public-ui · Copilot · Apr 10, 2026
diff --git a/docs/30-components/pagination.mdx b/docs/30-components/pagination.mdx
@@ -1,16 +1,10 @@
 ---
 title: Pagination
 description: Beschreibung, Spezifikation und Beispiele für die Pagination-Komponente.
-tags:
-  - Pagination
-  - Beschreibung
-  - Spezifikation
-  - Beispiele
 ---
 
 import Readme from '../../readmes/pagination/readme.md';
-import { Configurator } from '@site/src/components/Configurator';
-import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
+import PaginationPreview from '@site/src/components/previews/components/Pagination';
 import { ExampleLink } from '@site/src/components/ExampleLink';
 
 # Pagination
@@ -19,15 +13,11 @@ Mit Hilfe der **Paginierung**-Komponente lassen sich umfangreiche, aufgeteilte I
 
 ## Konstruktion
 
-### Code
-
-```html
-<div>
-	<kol-pagination _max="100" _page="6"></kol-pagination>
-	<kol-pagination _max="100" _page="6" _sibling-count="2"></kol-pagination>
-	<kol-pagination _max="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
-</div>
-```
+<PaginationPreview
+	visibleProperties={['_max', '_page', '_pageSize', '_siblingCount', '_boundaryCount', '_hasButtons']}
+	codeCollapsable
+	codeCollapsed
+/>
 
 ### Events
 
@@ -39,17 +29,6 @@ Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="
 | `changePage`     | Seite wird angeklickt     | Nummer der ausgewählten Seite |
 | `changePageSize` | Seitengröße wird geändert | Neue Seitengröße              |
 
-### Beispiel
-
-<div class="grid gap-2">
-	<kol-heading _level="3" _label="Standardausgabe nur mit aktuellem Element"></kol-heading>
-	<kol-pagination _max="100" _page="6" _has-buttons="false"></kol-pagination>
-	<kol-heading _level="3" _label="Ausgabe 2 Elemente links und rechts dem aktuellen Element (_sibling)"></kol-heading>
-	<kol-pagination _max="100" _page="6" _sibling-count="2"></kol-pagination>
-	<kol-heading _level="3" _label="Ausgabe 2 Elemente links und rechts (_boundary-count)"></kol-heading>
-	<kol-pagination _max="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
-</div>
-
 ## Verwendung
 
 Die **Paginierung**-Komponente kann über Ihre Properties konfiguriert werden.
@@ -66,14 +45,11 @@ Die **Paginierung**-Komponente kann über Ihre Properties konfiguriert werden.
 Die **Paginierung**-Komponente kann auf vielfältige Art eingesetzt werden. Insbesondere dort, wo auf einer Inhaltsseite umfangreiche Inhalte dargestellt werden sollen, trägt sie zur Verbesserung der Struktur und Übersichtlichkeit bei.
 Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte, Listen und Tabellen. Auch für bestimmte Navigationsaufgaben innerhalb einer Seite kann die Paginierung gut verwendet werden.
 
-<Readme />
-
-<ExampleLink component="pagination" />
-
-## Live-Editor
+# API
 
-<LiveEditorCompact component="pagination" />
+<Readme />
 
 ## Beispiele
 
-<Configurator component="pagination" sample="basic" />
+<ExampleLink component="pagination" />
+
diff --git a/i18n/de/code.json b/i18n/de/code.json
@@ -519,6 +519,9 @@
 	"preview.component.image.label": {
 		"message": "Beispielbild"
 	},
+	"preview.component.pagination.label": {
+		"message": "Seitennavigation"
+	},
 	"preview.property.remove": {
 		"message": "Entfernen"
 	},

diff --git a/i18n/en/code.json b/i18n/en/code.json
@@ -519,6 +519,9 @@
 	"preview.component.image.label": {
 		"message": "Sample image"
 	},
+	"preview.component.pagination.label": {
+		"message": "Page navigation"
+	},
 	"preview.property.remove": {
 		"message": "Remove"
 	},

diff --git a/i18n/en/docusaurus-plugin-content-docs/current/30-components/pagination.mdx b/i18n/en/docusaurus-plugin-content-docs/current/30-components/pagination.mdx
@@ -4,8 +4,7 @@ description: Description, specification and examples for the Pagination componen
 ---
 
 import Readme from '/readmes/pagination/readme.md';
-import { Configurator } from '@site/src/components/Configurator';
-import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
+import PaginationPreview from '@site/src/components/previews/components/Pagination';
 import { ExampleLink } from '@site/src/components/ExampleLink';
 
 # Pagination
@@ -14,15 +13,11 @@ With the help of the **Pagination** component, extensive, divided content, such
 
 ## Construction
 
-### Code
-
-```html
-<div>
-	<kol-pagination _max="100" _page="6"></kol-pagination>
-	<kol-pagination _max="100" _page="6" _sibling-count="2"></kol-pagination>
-	<kol-pagination _max="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
-</div>
-```
+<PaginationPreview
+	visibleProperties={['_max', '_page', '_siblingCount', '_boundaryCount', '_hasButtons']}
+	codeCollapsable
+	codeCollapsed
+/>
 
 ### Events
 
@@ -34,17 +29,6 @@ For the handling of events or callbacks, see <kol-link _label="Events" _href="..
 | `changePage` | Page is clicked | Number of selected page |
 | `changePageSize` | Page size is changed | New page size |
 
-### Example
-
-<div class="grid gap-2">
-	<kol-heading _level="3" _label="Standardausgabe nur mit aktuellem Element"></kol-heading>
-	<kol-pagination _max="100" _page="6" _has-buttons="false"></kol-pagination>
-	<kol-heading _level="3" _label="Ausgabe 2 Elemente links und rechts dem aktuellen Element (_sibling)"></kol-heading>
-	<kol-pagination _max="100" _page="6" _sibling-count="2"></kol-pagination>
-	<kol-heading _level="3" _label="Ausgabe 2 Elemente links und rechts (_boundary-count)"></kol-heading>
-	<kol-pagination _max="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
-</div>
-
 ## Usage
 
 The **Pagination** component can be configured via your properties.
@@ -61,14 +45,11 @@ The **Pagination** component can be configured via your properties.
 The **Pagination** component can be used in a variety of ways. Especially where extensive content is to be displayed on a content page, it helps to improve the structure and clarity.
 Classic areas of application for pagination include blog-like content, lists and tables. Pagination can also be used for certain navigation tasks within a page.
 
-<Readme />
-
-<ExampleLink component="pagination" />
-
-## Live editor
+# API
 
-<LiveEditorCompact component="pagination" />
+<Readme />
 
 ## Examples
 
-<Configurator component="pagination" sample="basic" />
+<ExampleLink component="pagination" />
+
diff --git a/src/components/previews/components/Pagination.tsx b/src/components/previews/components/Pagination.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import Preview, { PreviewLayout } from '../Preview';
+import { BoundedNumberProperty, ClampedNumberProperty, PaginationHasButtonsProperty } from '../properties';
+import type { JSX } from '@public-ui/components';
+import { KolInputText, KolPagination } from '@public-ui/react-v19';
+import { translate } from '@docusaurus/Translate';
+
+interface PaginationPreviewProps {
+	initialProps?: JSX.KolPagination;
+	visibleProperties?: (keyof JSX.KolPagination)[];
+	codeCollapsable?: boolean;
+	codeCollapsed?: boolean;
+}
+
+const PaginationPreview = (props: PaginationPreviewProps) => {
+	const defaultProps = React.useMemo<JSX.KolPagination>(
+		() => ({
+			_label: translate({ id: 'preview.component.pagination.label' }),
+			_max: 100,
+			_pageSize: 5,
+			_siblingCount: 1,
+			_boundaryCount: 1,
+			_page: 6,
+			_on: {}
+		}),
+		[],
+	);
+
+	const [maxValue, setMaxValue] = React.useState<number>(props.initialProps?._max ?? defaultProps._max);
+
+	const handleMaxChange = (newMax: number) => {
+		setMaxValue(newMax);
+	};
+
+	return (
+		<Preview<JSX.KolPagination>
+			propertyComponents={{
+				_label: <KolInputText _label="Label" />,
+				_max: (
+					<BoundedNumberProperty label="Max" min={1} max={1000} _value={maxValue} onBoundaryChange={handleMaxChange} />
+				),
+				_page: (
+					<ClampedNumberProperty
+						label="Page"
+						min={1}
+						max={maxValue}
+						_value={props.initialProps?._page ?? defaultProps._page}
+					/>
+				),
+				_pageSize: <BoundedNumberProperty label="Page Size" min={1} max={100} />,
+				_siblingCount: <BoundedNumberProperty label="Sibling Count" min={0} max={10} />,
+				_boundaryCount: <BoundedNumberProperty label="Boundary Count" min={0} max={10} />,
+				_hasButtons: <PaginationHasButtonsProperty label="Has Buttons" />,
+			}}
+			initialProps={{ ...defaultProps, ...props.initialProps }}
+			componentName="KolPagination"
+			visibleProperties={props.visibleProperties}
+			codeCollapsable={props.codeCollapsable}
+			codeCollapsed={props.codeCollapsed}
+			layout={PreviewLayout.DEFAULT}
+		>
+			{(componentProps) => <KolPagination {...componentProps} />}
+		</Preview>
+	);
+};
+
+export default PaginationPreview;
diff --git a/src/components/previews/properties/PaginationHasButtonsProperty.tsx b/src/components/previews/properties/PaginationHasButtonsProperty.tsx
@@ -0,0 +1,70 @@
+import { PaginationHasButton } from '@public-ui/components';
+import { KolInputCheckbox } from '@public-ui/react-v19';
+import React, { useState } from 'react';
+
+
+const FALLBACK_VALUE: PaginationHasButton = {
+	first: true,
+	last: true,
+	next: true,
+	previous: true,
+};
+
+const PaginationHasButtonsProperty = (props: {
+	label: string;
+	_value?: PaginationHasButton;
+	_on?: {
+		onInput?: (event: Event, value: unknown) => void;
+	};
+}) => {
+	const [enabled, setEnabled] = useState<boolean>(props._value !== undefined);
+	const [value, setValue] = useState<PaginationHasButton>(props._value ?? FALLBACK_VALUE);
+
+	const handleEnabledChange = (checked: boolean) => {
+		setEnabled(checked);
+		props._on?.onInput?.(new Event('input'), checked ? value : undefined);
+	};
+
+	const handleChange = (key: keyof PaginationHasButton, checked: boolean) => {
+		const newValue = { ...value, [key]: checked };
+		setValue(newValue);
+		props._on?.onInput?.(new Event('input'), newValue);
+	};
+
+	return (
+		<fieldset>
+			<legend>{props.label}</legend>
+			<KolInputCheckbox
+				_label="Enabled"
+				_variant="switch"
+				_labelAlign="left"
+				_checked={enabled}
+				_on={{
+					onInput: (_: Event, checked: unknown) => {
+						handleEnabledChange(!!checked);
+					},
+				}}
+			/>
+			{enabled && (
+				<div className="grid grid-cols-2 gap-2 mt-2">
+					{(['first', 'last', 'next', 'previous'] as (keyof PaginationHasButton)[]).map((key) => (
+						<KolInputCheckbox
+							key={key}
+							_label={key.charAt(0).toUpperCase() + key.slice(1)}
+							_variant="switch"
+							_labelAlign="left"
+							_checked={value[key]}
+							_on={{
+								onInput: (_: Event, checked: unknown) => {
+									handleChange(key, !!checked);
+								},
+							}}
+						/>
+					))}
+				</div>
+			)}
+		</fieldset>
+	);
+};
+
+export default PaginationHasButtonsProperty;
diff --git a/src/components/previews/properties/index.ts b/src/components/previews/properties/index.ts
@@ -12,6 +12,7 @@ export { default as LinksProperty } from './LinksProperty';
 export { default as MsgProperty } from './MsgProperty';
 export { default as MultiLineTextProperty } from './MultiLineText';
 export { default as OrientationProperty } from './OrientationProperty';
+export { default as PaginationHasButtonsProperty } from './PaginationHasButtonsProperty';
 export { default as PasswordVariantProperty } from './PasswordVariantProperty';
 export { default as QuoteVariantProperty } from './QuoteVariantProperty';
 export { default as RadioOptionsProperty } from './RadioOptionsProperty';