UI

Een componentbibliotheek met thema, gebouwd op Base UI (de standaard van shadcn), gedeeld in de hele monorepo.

Wat je krijgt

Toegankelijke componenten (knoppen, kaarten, dialogen, formulieren, tabs en meer) in packages/ui/src/components/ui
Een Tailwind v4-thema met lichte en donkere modus, gedefinieerd als CSS-variabelen in globals.css
De cn-helper voor het samenvoegen van classes en je Config.brand-object

Componenten gebruiken

Importeer componenten per subpad uit het UI-package:

tsx

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

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

Let op

Dit zijn Base UI-componenten, geen Radix. Waar shadcn asChild gebruikte, gebruikt Base UI een render-prop:

tsx

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

Thema's

Kleuren, radii en fonts zijn CSS-variabelen in packages/ui/src/styles/globals.css. Pas de :root- en .dark-blokken aan om de hele app te herstijlen, elk component leest uit deze tokens.

Meer componenten toevoegen

De bibliotheek volgt de canonieke structuur van shadcn, dus je kunt elk extra component via de shadcn-CLI binnenhalen en het past bij de bestaande stijl.

bash

bunx shadcn@latest add accordion

De marketingpagina's-module bouwt rechtstreeks op deze componenten.