Export · React
React, Tailwind v4, shadcn/ui: das Design als Komponenten
Der React-Export liefert jeden Abschnitt als TSX-Komponente und die Design-Tokens als Tailwind-v4-Theme. Die Variablen von shadcn/ui zeigen auf dieselben Tokens, damit Buttons, Dialoge und Formulare aus shadcn sofort im Look des Designs erscheinen.
Das passt, wenn du ohnehin in Next.js oder Vite arbeitest oder mit Werkzeugen wie v0, Bolt oder Lovable weiterbaust: Die Komponenten liegen zusätzlich als shadcn-Registry bereit.
Designs ansehenEin Design 59 € einmalig, alle Exporte inklusive.
Designs mit diesem Export
20 Designs wurden mit dem React-Export gebaut, bevor sie in die Galerie kamen. Die Lizenz gilt für alle Exporte desselben Designs.
-
10 SeitenLCP 1,6 sBFSG-Prüfung ohne Fehler
-
10 SeitenLCP 2,2 sBFSG-Prüfung ohne Fehler
-
10 SeitenLCP 2,0 sBFSG-Prüfung ohne Fehler
-
12 SeitenLCP 1,9 sBFSG-Prüfung ohne Fehler
-
10 SeitenLCP 1,9 sBFSG-Prüfung ohne Fehler
-
10 SeitenLCP 1,6 sBFSG-Prüfung ohne Fehler
-
10 SeitenLCP 2,0 sBFSG-Prüfung ohne Fehler
-
9 SeitenLCP 2,4 s
-
9 SeitenLCP 1,6 sBFSG-Prüfung ohne Fehler
Was du bekommst
- Komponenten
- TSX pro Abschnitt, Seiten als Zusammenstellung dieser Komponenten.
- Tailwind v4
- Ein @theme aus den Tokens, Tailwind-Standardwerte zurückgesetzt.
- shadcn/ui
- Die shadcn-Variablen als Aliase der Tokens, dazu registry.json für die Komponenten.
- Vorschau
- npm run preview rendert die Seiten zur Kontrolle.
So kommt es auf die Seite
- React-Export entpacken.
- Für Next.js die Komponenten und das Theme in dein App-Verzeichnis übernehmen, für Vite das Projekt direkt starten.
- Mit npm run preview prüfen, ob alles so aussieht wie das Original.
- Inhalte über Props oder dein CMS befüllen und wie gewohnt deployen.
Was nicht dabei ist
Routing, Datenabruf und Formular-Backend bringt dein Framework mit; der Export liefert Oberfläche und Tokens.
Ein Design, dein Stack
- AstroAbschnitte als Komponenten mit typisierten Props, Content Collections, Base-Layout mit CSP. Baut als statische Seite.
- HTMLJede Seite als HTML und CSS, Rechtsseiten-Gerüste, 404, Sitemap und Sicherheits-Header. Kein Build-Schritt.
- WordPresstheme.json v3, ein Pattern pro Abschnitt aus Core-Blöcken, Templates und Parts, als ZIP zum Hochladen.
- ElementorHello-Elementor-Child-Theme mit selbst gehosteten Schriften und Tokens, ein Kit mit globalen Farben und Schriften. Nur die Design-Ebene.
Verwandt
Fragen
Ist das ein fertiges Next.js-Projekt?
Nein, ein React-Paket, das du in Next.js, Vite oder einem anderen Setup verwendest. Für Next.js nimmst du die Komponenten in dein App-Verzeichnis.
Muss ich shadcn/ui nutzen?
Nein. Die Variablen stören nicht, wenn du shadcn nicht einsetzt.