UI

Eine thematisierte Komponentenbibliothek auf Basis von Base UI (dem shadcn-Standard), im gesamten Monorepo geteilt.

Was du bekommst

Barrierefreie Komponenten (Buttons, Cards, Dialoge, Formulare, Tabs und mehr) in packages/ui/src/components/ui
Ein Tailwind-v4-Theme mit hellem und dunklem Modus, definiert als CSS-Variablen in globals.css
Der cn-Helfer zum Zusammenführen von Klassen und dein Config.brand-Objekt

Komponenten verwenden

Importiere Komponenten per Unterpfad aus dem UI-Paket:

tsx

import { Button } from "@my-app/ui/components/ui/button";

<Button size="lg">Get started</Button>;

Hinweis

Das sind Base-UI-Komponenten, kein Radix. Wo shadcn asChild nutzte, verwendet Base UI eine render-Prop:

tsx

<Button render={<a href="/sign-up">Sign up</a>} />

Theming

Farben, Radien und Schriften sind CSS-Variablen in packages/ui/src/styles/globals.css. Bearbeite die :root- und .dark-Blöcke, um die ganze App neu zu stylen, jede Komponente liest aus diesen Tokens.

Weitere Komponenten hinzufügen

Die Bibliothek folgt der kanonischen shadcn-Struktur, sodass du jede weitere Komponente über die shadcn-CLI hinzufügen kannst und sie zum bestehenden Stil passt.

bash

bunx shadcn@latest add accordion

Das Modul Marketing-Seiten baut direkt auf diesen Komponenten auf.