CP Component Registry
Moderne, barrierefreie Astro-Components für TYPO3-Webprojekte. Einmal gebaut, überall einsetzbar — mit einheitlichem Design-System, CLI-Tool und automatischem TYPO3-Sync.
33 Components
Von Button bis Charts. Alle barrierefrei, responsive und Cross-Browser getestet. Inkl. React-basierte Chart-Bibliothek.
Design-Token System
11 semantische Farben, fluide Typografie und Spacing. Eine Config — alle Marken.
CLI + TYPO3-Sync
Components per Befehl installieren. Assets automatisch ins Sitepackage kopieren.
UI-Elemente
Grundlegende Bedienelemente die überall gebraucht werden.
Alert
Benachrichtigungen für Info, Erfolg, Warnung und Fehler mit ARIA-Rollen.
Breadcrumbs
Navigationspfad mit Schema.org JSON-LD und aria-current.
Button
5 Varianten, 3 Größen, Loading-State, Icon-Support. Link oder Button.
Pagination
Seitennavigation mit Ellipsis-Logik, Prev/Next und ARIA-Labels.
Popover & Tooltip
Native Popover API mit Anchor Positioning und position-try-fallbacks.
Tag / Badge
Labels für Kategorien und Status. 6 Farbvarianten, 2 Größen.
CheckboxCard
Checkbox als klickbare Karte mit CSS peer-Selektor Pattern.
Formulare
Eingabefelder mit Validierung, Fehleranzeige und Barrierefreiheit.
Input
Text, E-Mail, Passwort, Datum, Telefon, Suche, Textarea.
Select
Natives Dropdown mit Custom-Styling. Optgroups, Platzhalter, Fehlermeldungen.
Custom Select
Popover API + WAI-ARIA Listbox. Keyboard-Navigation, Type-ahead, Anchor Positioning.
DatePicker
Datumswahl mit nativem Input und optionalem Kalender-Popover.
Checkbox
Checkbox und CheckboxGroup mit Custom-Styling und Validierung.
Radio
Radio-Button und RadioGroup mit Custom-Styling und Validierung.
Content
Inhaltsbausteine die den Großteil einer Webseite ausmachen.
Accordion
Auf- und zuklappbare Bereiche. Basiert auf nativem HTML, animiert, druckbar.
Card
Klickbare Karte mit Bild, Tag und Beschreibung. Semantisches HTML.
Tabs
Tab-Navigation mit Tastatursteuerung (Pfeiltasten). WAI-ARIA Pattern.
Hero
Grosser Seitenheader mit optionalem Hintergrundbild und Textkontrast.
ImageText
Bild full-bleed mit Text im Content Grid. Für Marketing-Layouts.
Teaser
Content-Vorschau mit Bild (links/rechts/oben). Responsive.
Quote
Blockzitat mit Autor, Rolle. Featured-Variante mit großem Bild.
Video
Responsive Video mit Portrait/Landscape-Modi. WCAG-konformes Autoplay.
IFrame
Responsive iFrame mit aspect-ratio und Pflicht-Title für a11y.
JumpTo
Sprungnavigation / Table of Contents mit Scroll-Spy.
Slider
Karussell auf Swiper.js-Basis. Tastaturnavigation, Live-Region.
Gallery
Bildergalerie mit Lightbox. Pfeiltasten, responsive Grid.
Downloads
Download-Liste mit Dateityp-Erkennung und Groessenangabe.
Charts
React/Recharts-Bibliothek: Area, Bar, Line, Pie, Radar, Radial. Mit ChartSwitcher und Vergleichsansicht.
Layout & Navigation
Seitenstruktur-Elemente.
Grid
Auto-fit Grid für alle Spalten-Layouts. Content Grid + Fixed Grid.
SectionWrapper
Universeller Section-Wrapper mit Breite, Abstand und Hintergrund.
Navigation
Mobile-first mit Focus-Trap. Desktop-Dropdowns via Popover API.
Footer
Spalten-basierter Footer mit Logo, Link-Listen und Copyright.
Dialog
Nativer HTML-Dialog. Focus-Trap, Escape-Schliessung, Backdrop.
Animation
Scroll-basierte Animationen.
Design-System verstehen
Die Components setzen auf ein gemeinsames Fundament. Wer versteht wie Farben, Abstande und Grids funktionieren, kann schneller eigene Layouts bauen.