public-ui · Copilot · Apr 10, 2026
diff --git a/docs/30-components/modal.mdx b/docs/30-components/modal.mdx
@@ -1,15 +1,10 @@
 ---
 title: Modal
 description: Beschreibung, Spezifikation und Beispiele für die Modal-Komponente.
-tags:
-  - Dialog
-  - Modal
-  - Beschreibung
-  - Spezifikation
-  - Beispiele
 ---
 
 import Readme from '../../readmes/modal/readme.md';
+import ModalPreview from '@site/src/components/previews/components/Modal';
 import { ExampleLink } from '@site/src/components/ExampleLink';
 
 # Modal
@@ -27,33 +22,10 @@ Sobald ein **Modal** geöffnet wird, werden alle selektierbaren Elemente in der
 
 ### Konstruktion
 
-#### Code
-
-```html
-<kol-modal id="test-modal" _label="Beschreibung zur Modalbox">
-	<kol-card _label="Vorgang löschen">
-		<div>
-			<p>Wollen Sie den Vorgang wirklich löschen?</p>
-			<kol-button class="close-modal" _label="Ok" _variant="primary"></kol-button>
-			<kol-button class="close-modal" _label="Abbrechen"></kol-button>
-		</div>
-	</kol-card>
-</kol-modal>
-
-<kol-button id="modal-open-button" _label="Modal öffnen"></kol-button>
-
-<script>
-	const modal = document.querySelector('#test-modal');
-	const modalOpenButton = document.querySelector('#modal-open-button');
-
-	document.querySelectorAll('.close-modal').forEach((buttonElement) => {
-		buttonElement._on = {
-			onClick: () => modal.closeModal(),
-		};
-	});
-	modalOpenButton._on = { onClick: () => modal.openModal() };
-</script>
-```
+<ModalPreview
+	codeCollapsable
+	codeCollapsed
+/>
 
 ### Events
 
@@ -108,6 +80,11 @@ Des Weiteren gibt es immer nur maximal ein aktives Modal, welches alle selektier
 - <kol-link _href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html" _target="_blank"></kol-link>
 - <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" _target="_blank"></kol-link>
 
+## API
+
 <Readme />
 
+## Beispiele
+
 <ExampleLink component="modal" />
+
diff --git a/i18n/de/code.json b/i18n/de/code.json
@@ -414,6 +414,18 @@
 	"preview.component.drawer.openButton": {
 		"message": "Drawer öffnen"
 	},
+	"preview.component.modal.content": {
+		"message": "Dies ist ein Beispielinhalt eines modalen Dialogs. Modale lenken die Aufmerksamkeit des Nutzers auf eine bestimmte Aufgabe oder Information. Drücken Sie Escape zum Schließen."
+	},
+	"preview.component.modal.label": {
+		"message": "Modal"
+	},
+	"preview.component.modal.openButton": {
+		"message": "Modal öffnen"
+	},
+	"preview.component.modal.closeButton": {
+		"message": "Schließen"
+	},
 	"preview.component.link.href": {
 		"message": "https://public-ui.github.io/docs"
 	},

diff --git a/i18n/en/code.json b/i18n/en/code.json
@@ -414,6 +414,18 @@
 	"preview.component.drawer.openButton": {
 		"message": "Open Drawer"
 	},
+	"preview.component.modal.content": {
+		"message": "This is an example of modal dialog content. Modals focus user attention on a specific task or information. Press Escape to close."
+	},
+	"preview.component.modal.label": {
+		"message": "Modal"
+	},
+	"preview.component.modal.openButton": {
+		"message": "Open Modal"
+	},
+	"preview.component.modal.closeButton": {
+		"message": "Close"
+	},
 	"preview.component.link.href": {
 		"message": "https://public-ui.github.io/en/docs"
 	},

diff --git a/i18n/en/docusaurus-plugin-content-docs/current/30-components/modal.mdx b/i18n/en/docusaurus-plugin-content-docs/current/30-components/modal.mdx
@@ -4,6 +4,7 @@ description: Description, specification and examples for the Modal component.
 ---
 
 import Readme from '/readmes/modal/readme.md';
+import ModalPreview from '@site/src/components/previews/components/Modal';
 import { ExampleLink } from '@site/src/components/ExampleLink';
 
 # Modal
@@ -21,33 +22,10 @@ As soon as a **modal** is opened, all selectable elements in the website are dea
 
 ### Construction
 
-#### Code
-
-```html
-<kol-modal id="test-modal" _label="Beschreibung zur Modalbox">
-	<kol-card _label="Vorgang löschen">
-		<div>
-			<p>Wollen Sie den Vorgang wirklich löschen?</p>
-			<kol-button class="close-modal" _label="Ok" _variant="primary"></kol-button>
-			<kol-button class="close-modal" _label="Abbrechen"></kol-button>
-		</div>
-	</kol-card>
-</kol-modal>
-
-<kol-button id="modal-open-button" _label="Modal öffnen"></kol-button>
-
-<script>
-	const modal = document.querySelector('#test-modal');
-	const modalOpenButton = document.querySelector('#modal-open-button');
-
-	document.querySelectorAll('.close-modal').forEach((buttonElement) => {
-		buttonElement._on = {
-			onClick: () => modal.closeModal(),
-		};
-	});
-	modalOpenButton._on = { onClick: () => modal.openModal() };
-</script>
-```
+<ModalPreview
+	codeCollapsable
+	codeCollapsed
+/>
 
 ### Events
 
@@ -102,6 +80,11 @@ Furthermore, there is only ever a maximum of one active modal, which deactivates
 - <kol-link _href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html" _target="_blank"></kol-link>
 - <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" _target="_blank"></kol-link>
 
+## API
+
 <Readme />
 
+## Examples
+
 <ExampleLink component="modal" />
+
diff --git a/src/components/previews/components/Modal.tsx b/src/components/previews/components/Modal.tsx
@@ -0,0 +1,86 @@
+import React, { useRef } from 'react';
+import Preview, { PreviewLayout } from '../Preview';
+import { MultiLineTextProperty } from '../properties';
+import type { JSX } from '@public-ui/components';
+import { KolButton, KolInputText, KolModal } from '@public-ui/react-v19';
+import { translate } from '@docusaurus/Translate';
+import { sanitizeHtml } from '../../../shares/sanitize';
+
+type ModalPreviewProps = JSX.KolModal & { _slot?: string };
+
+interface ModalPreviewComponentProps {
+	initialProps?: ModalPreviewProps;
+	visibleProperties?: (keyof JSX.KolModal | '_slot')[];
+	codeCollapsable?: boolean;
+	codeCollapsed?: boolean;
+}
+
+const ModalPreview = (props: ModalPreviewComponentProps) => {
+	const modalRef = useRef<HTMLKolModalElement>(null);
+
+	const defaultProps = React.useMemo<ModalPreviewProps>(
+		() => ({
+			_label: translate({ id: 'preview.component.modal.label' }),
+			_slot: `<p>${translate({ id: 'preview.component.modal.content' })}</p>`,
+		}),
+		[],
+	);
+
+	return (
+		<Preview<ModalPreviewProps>
+			propertyComponents={{
+				_label: <KolInputText _label="Label" />,
+				_width: <KolInputText _label="Width" />,
+				_slot: <MultiLineTextProperty label="Content" />,
+			}}
+			initialProps={{ ...defaultProps, ...props.initialProps }}
+			componentName="KolModal"
+			visibleProperties={props.visibleProperties}
+			codeCollapsable={props.codeCollapsable}
+			codeCollapsed={props.codeCollapsed}
+			layout={PreviewLayout.CENTERED}
+			slotKey="_slot"
+		>
+			{(componentProps) => {
+				const { _slot, ...modalProps } = componentProps;
+				const sanitizedHtml = sanitizeHtml(_slot ?? '');
+				return (
+					<>
+						<KolButton
+							_label={translate({ id: 'preview.component.modal.openButton' })}
+							_on={{
+								onClick: () => {
+									void modalRef.current?.openModal();
+								},
+							}}
+						/>
+						<KolModal {...modalProps} ref={modalRef}>
+							<div style={{ padding: '1.5rem' }}>
+								<div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />
+							</div>
+							<div
+								style={{
+									borderTop: '1px solid var(--color-subtle, #e0e0e0)',
+									display: 'flex',
+									justifyContent: 'flex-end',
+									padding: '1rem 1.5rem',
+								}}
+							>
+								<KolButton
+									_label={translate({ id: 'preview.component.modal.closeButton' })}
+									_on={{
+										onClick: () => {
+											void modalRef.current?.closeModal();
+										},
+									}}
+								/>
+							</div>
+						</KolModal>
+					</>
+				);
+			}}
+		</Preview>
+	);
+};
+
+export default ModalPreview;