Kiekkist
Menü
EN

Anleitung · React

React-Vorlage mit Tailwind und shadcn/ui einbauen

Der React-Export ist kein fertiges Projekt, sondern ein Baukasten für deins: Abschnitte als TSX-Komponenten, Seiten als Komponenten, Tokens als CSS-Variablen, Tailwind-Theme und shadcn/ui-Variablen.

Im Beispiel heißt das Design Fieldnote (kostenlos, Kurzname fieldnote). Bei deinem Design steht dort sein Kurzname.

Was du brauchst

Was im Export liegt

Ordner fieldnote-react/

components/
Eine TSX-Komponente pro Abschnitt, Texte in components/content/ als JSON, index.ts exportiert alles.
pages/
Eine Komponente pro Seite, jede mit meta: Titel, Beschreibung, Pfad und bodyClassName.
styles/tokens.css
Alle Design-Werte als CSS-Variablen.
styles/theme.css
Tailwind-v4-@theme aus den Tokens und die shadcn/ui-Variablen (--background, --primary …) als Verweise auf die Tokens.
styles/site.css
Das CSS der Abschnitte.
styles/index.css
Alles in einer Datei, für Projekte ohne Tailwind.
styles/fonts/
Schriften als woff2 mit fonts.css und Lizenzdateien.
public/assets/
Bilder und das kleine Skript des Designs.
registry.json, r/
shadcn-Registry-Dateien für Theme und Abschnitte.
AGENTS.md, DESIGN.md, EXPORT.md
Regeln für KI-Assistenten, Gestaltungsregeln, Export-Bericht.

Von Hand

  1. Fertigen Export herunterladen

    Kostenlose Designs lädst du auf der Designseite, gekaufte auf der Download-Seite mit deinem Lizenzschlüssel. Danach wählst du, was du laden willst: React-Paket, alles in einem ZIP oder nur das Designpaket. Entpackt liegt der Export in fieldnote/exports/react/, mit INSTALL.md und EXPORT.md. Das ist derselbe Inhalt wie fieldnote-react/ in den Schritten unten.

  2. Oder selbst erzeugen

    Wer den Export aus einem geänderten Designpaket neu bauen will, nimmt das Kiekkist-Werkzeug kk. Es ist Open Source, läuft lokal und braucht Node.js 22 oder neuer. Lege es neben den Designordner (im Download „Nur Designpaket“ heißt er fieldnote/). Der Befehl schreibt fieldnote-react/; --no-check lässt die Bildvergleichs-Prüfung weg (dafür einmal npx playwright install chromium).

    git clone https://github.com/tillheidrich/kiekkist
cd kiekkist && npm ci && cd ..
node kiekkist/cli/kk.js export ./fieldnote --target react --no-check

  3. Projekt anlegen (Vite)

    Hast du schon ein Projekt, überspring den Schritt.

    npm create vite@latest meine-seite -- --template react-ts
cd meine-seite
npm install
npm install -D tailwindcss @tailwindcss/vite

  4. Dateien kopieren

    Kopiere styles/, components/ und pages/ aus fieldnote-react/ nach src/kiekkist/, und public/assets/ nach public/assets/. Die Bildpfade beginnen mit /assets/.

  5. Tailwind-Plugin eintragen

    In vite.config.ts:

    import tailwindcss from '@tailwindcss/vite'
// …
plugins: [react(), tailwindcss()]

  6. CSS einbinden

    In src/index.css (wird in main.tsx schon importiert). Wichtig sind zwei Punkte: fonts.css mit einbinden, sonst fehlen die Schriften. Und Tailwinds Grund-Reset (Preflight) weglassen, sonst verschwinden zum Beispiel Link-Unterstreichungen. So bleibt die Seite pixelgleich mit dem Original:

    @layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
@import "./kiekkist/styles/tokens.css";
@import "./kiekkist/styles/fonts/fonts.css";
@import "./kiekkist/styles/theme.css";
@import "./kiekkist/styles/site.css";

  7. Seite anzeigen

    Jede Seite bringt in meta.bodyClassName eine Klasse für <body> mit. Ohne sie fehlen manche Gestaltungen, etwa der Kopfbereich über dem Startbild. In src/App.tsx:

    import { useEffect } from 'react'
import { IndexPage, IndexMeta } from './kiekkist/pages'

export default function App() {
  useEffect(() => {
    document.title = IndexMeta.title
    document.body.className = IndexMeta.bodyClassName
  }, [])
  return <IndexPage />
}

  8. Starten und bauen

    Für mehrere Seiten nimmst du einen Router deiner Wahl und gibst pro Route die passende Seiten-Komponente aus.

    npm run dev
npm run build

  9. Next.js (App Router)

    Ordner wie oben kopieren, ohne Tailwind reicht import '../kiekkist/styles/index.css' in app/layout.tsx. Dort <body className={IndexMeta.bodyClassName}> setzen und metadata aus IndexMeta übernehmen. app/page.tsx gibt <IndexPage /> zurück. Die Schriften bleiben lokale woff2-Dateien, nicht über next/font/google laden.

Mit KI-Assistent

Dein KI-Coding-Assistent kann den Export erzeugen, die Beispielinhalte ersetzen und dir sagen, was du noch selbst tun musst. Gib ihm den entpackten Designordner und diese Dateien zu lesen:

  • fieldnote/DESIGN.md: Gestaltungsregeln, Farben, Schriften, was man nicht ändern sollte
  • fieldnote/tokens.json und tokens.css: alle Farb-, Schrift- und Abstandswerte
  • fieldnote/README.md: Inhalt des Pakets und was vor dem Start ersetzt werden muss
  • fieldnote/LICENSE.md: was du mit Code, Texten und Fotos darfst
  • fieldnote/UEBERGABE/: Vorlagen für die Übergabe an deinen Kunden (Deutsch und Englisch)
  • im Export fieldnote-react/AGENTS.md und EXPORT.md

Prompt zum Kopieren. Ersetze die Angaben in eckigen Klammern. Statt fieldnote setzt du den Kurznamen deines Designs ein.

Im Ordner ./fieldnote liegt ein Website-Design als Paket. Bau es in mein React-Projekt in ./[projekt] ein ([Vite oder Next.js], [mit oder ohne Tailwind v4]). 1. Lies zuerst fieldnote/DESIGN.md, README.md und LICENSE.md. Gestaltung nicht ändern, nur Werte aus den Tokens verwenden, keine Tailwind-Standardfarben. 2. Hol das Kiekkist-Werkzeug (git clone https://github.com/tillheidrich/kiekkist, darin npm ci) und erzeuge den Export: node kiekkist/cli/kk.js export ./fieldnote --target react --no-check. Lies danach fieldnote-react/AGENTS.md und EXPORT.md. 3. Kopier styles/, components/ und pages/ ins Projekt und public/assets/ nach public/assets/. Binde styles/fonts/fonts.css mit ein. Bei Tailwind ohne Preflight importieren (tailwindcss/theme.css und tailwindcss/utilities.css), damit sich die Gestaltung nicht ändert. 4. Setz für jede Seite meta.bodyClassName auf <body> und Titel und Beschreibung aus meta. Leg Routen für alle Seiten an. 5. Ersetze die Beispieltexte in components/content/*.json durch meine Angaben: [Name, Adresse, Leistungen]. 6. Bau das Projekt, behebe Fehler und vergleich die Startseite mit fieldnote/pages/index.html.

Lass dir jede Änderung zeigen, bevor sie auf die Live-Website geht. Zugangsdaten und Lizenzschlüssel gehören nicht in den Chat und nicht ins Repository.

Inhalte, Bilder und Logo ersetzen

Texte: in components/content/sections/<abschnitt>.json und den Listen daneben. Jede Komponente nimmt außerdem Props entgegen: <HeroRoom1 khA="Neuer Titel" /> überschreibt den Wert aus der JSON-Datei.

Bilder: in public/assets/img/, die Pfade stehen in den JSON-Dateien. Gleicher Name und gleiche Größen, oder Pfade ändern. Alternativtexte mit anpassen.

Logo: SVG in SiteHeader.tsx und den Kopfbereichen der einzelnen Seiten (*SiteHeader.tsx).

Farben und Schriften anpassen

Die Werte stehen zweimal: in styles/tokens.css (für das CSS der Abschnitte) und in styles/theme.css (für Tailwind-Klassen wie bg-paper). Beide sind aus tokens.json erzeugt. Sauberster Weg: tokens.json im Designpaket ändern und neu exportieren, dann beide Dateien ersetzen.

Die shadcn/ui-Variablen in theme.css (--background, --foreground, --primary, --ring …) zeigen auf die Tokens. shadcn-Komponenten, die du ergänzt, übernehmen damit Farben und Rundungen des Designs.

Tailwinds Standardpalette ist in theme.css abgeschaltet (--color-*: initial). Klassen wie bg-blue-500 gibt es also nicht, nur die Farben des Designs.

Schriften: woff2-Dateien in styles/fonts/ bleiben lokal. Nicht über einen Font-Dienst nachladen.

Was die Lizenz erlaubt

Gekauftes Design: Du darfst damit beliebig viele Websites bauen, eigene und für Kunden, und sie mit allen Rechten übergeben. Dein Kunde darf die Seite ohne dich weiterbetreiben. Nicht erlaubt ist, das Design selbst weiterzugeben oder zu verkaufen, auch nicht als Vorlage, Theme oder Kit. Der volle Text steht in der Lizenz.

Kostenloses Design: Es gilt LICENSE.md im Paket. Bei Fieldnote ist das CC BY 4.0: Nutzung auch für Kunden und kommerziell, mit einer kurzen Namensnennung im Quelltext oder auf einer Credits-Seite.

Fotos aus dem Paket darfst du nur als Teil der Website verwenden, die du damit baust. Nicht einzeln weitergeben, nicht als Stockfotos.

Schriften stehen unter der SIL Open Font License. Die Lizenzdateien LICENSE-*.txt bleiben neben den Schriftdateien liegen.

Deinen Lizenzschlüssel legst du nie ins Repository oder in Theme-Dateien. KIEKKIST-LICENCE.txt im Paket nennt nur Lizenz-ID und Projekt.

Häufige Probleme

Die Schriften fehlen, es erscheint Arial oder Georgia.

styles/fonts/fonts.css ist nicht eingebunden. Ohne Tailwind lädt styles/index.css sie mit, bei Tailwind musst du sie selbst importieren (siehe oben).

Links haben keine Unterstreichung mehr, Abstände sehen anders aus.

Tailwinds Preflight setzt Browser-Standards zurück. Importier Tailwind ohne Preflight (tailwindcss/theme.css und tailwindcss/utilities.css) wie oben gezeigt.

Kopfbereich oder Startbild sehen anders aus als in der Vorschau.

Die Klasse aus meta.bodyClassName fehlt auf <body>. Setz sie pro Seite.

Bilder fehlen.

public/assets/ wurde nicht nach public/assets/ kopiert, oder die App läuft unter einem Unterpfad. Die Pfade beginnen mit /assets/.

npx shadcn add mit der Registry-Datei klappt nicht.

Die Dateien in r/ müssen unter einer öffentlichen Adresse liegen, damit npx shadcn add https://…/r/fieldnote-theme.json sie findet. Lokal ist das Kopieren der Ordner der einfachere Weg.

Der Export bricht mit „export refused“ ab.

kk prüft das Design vor dem Export und nennt jeden Fehler mit Datei und Zeile, zum Beispiel einen Abschnitt ohne Namen. Das passiert, wenn du die HTML-Seiten im Paket vorher umgebaut hast. Behebe die genannte Stelle oder exportiere aus dem unveränderten Paket und ändere danach. Prüfe auch die Node-Version mit node -v: Unter 22 läuft das Werkzeug nicht.

Was wir geprüft haben

Geprüft mit Kestrel Row in einem frischen Vite-Projekt (Vite 8, React 19, Tailwind 4.3, TypeScript 7): Build ohne Fehler, Startseite pixelgleich mit dem HTML-Export. Dazu ein frisches Next.js-16-Projekt ohne Tailwind: Build ohne Fehler, Startseite im Browser geprüft.

Mehr zum Export Alle Anleitungen Zur Galerie

Andere Exporte: WordPress, Astro, HTML, Elementor