Einbau in 5 Minuten

Die Copy-Paste-Blöcke für ein neues Kundenprojekt, in der Reihenfolge des Einbaus: Registry, Installation, global.css, Layout-Grundgerüst, erste Section, Marken-Tokens. Ausführlich mit Hintergrund und Referenztabelle: das Paket-README von@on-fleek-gmbh/theme.

1 · .npmrc im Projekt-Root — @on-fleek-gmbh/themeliegt in GitHub Packages, nicht auf npm

@on-fleek-gmbh:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}

2 · Installation exakt gepinnt, bewusst ohne^ — Upgrades sind eine bewusste Einzelentscheidung

pnpm add @on-fleek-gmbh/theme --save-exact

3 · global.css — Pfad in @source ist relativ zur CSS-Datei, ggf. an eure Ordnertiefe anpassen

@import "tailwindcss";
@import "@on-fleek-gmbh/theme/tokens.css";
/* optional: neutrales Dark-Scheme */
@import "@on-fleek-gmbh/theme/tokens.dark.css";
@import "./tokens.client.css";

/* Tailwind muss die Klassen der Section-Sources sehen (Pfad relativ zur CSS-Datei) */
@source "../../node_modules/@on-fleek-gmbh/theme/src";

4 · Layout-Grundgerüst — Reveal-Script immer als Template-<script>, nie im Frontmatter (Window-Zugriff crasht den SSG-Build); lang="de" aktiviert die Silbentrennung der Display-Headings

---
import { ClientRouter } from "astro:transitions";
---
<html lang="de">
  <head>
    <ClientRouter />
    <script>
      import "@on-fleek-gmbh/theme/reveal";
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

5 · Erste Section — jede Section hat ein eigenes README im Paket untersrc/sections/<id>/README.md (Props, Slots, Motion, A11y)

---
import Button from "@on-fleek-gmbh/theme/components/Button";
import Hero from "@on-fleek-gmbh/theme/components/HeroSplit";
---

<Hero
  title="Handwerk, das hält was es verspricht"
  description="Möbel und Einbauten nach Maß, gefertigt in unserer Werkstatt."
  features={["Festpreis nach Aufmaß", "Heimische Hölzer", "6–8 Wochen Lieferzeit"]}
  headingLevel={1}
>
  <img slot="image" src="/werkstatt.jpg" alt="Werkstatt mit frisch gefertigtem Sideboard aus Eiche" width="960" height="720" />
  <Button slot="actions" href="/kontakt">Anfrage stellen</Button>
</Hero>

6 · tokens.client.css — nur Werte, nach dem Theme-Import geladen; Vorlage mit allen Hebeln:@on-fleek-gmbh/theme/tokens.client.example.css

:root {
  --primary: oklch(0.28 0.09 250);
  --primary-foreground: oklch(0.98 0 0);
  --background: oklch(0.99 0.005 90);
  --foreground: oklch(0.2 0.01 90);
  --font-display: "Brand Display", ui-sans-serif, system-ui, sans-serif;
  --radius: 0.75rem;
}