UI

A themed component library built on Base UI (the shadcn default), shared across the monorepo.

What you get

Accessible components (buttons, cards, dialogs, forms, tabs, and more) in packages/ui/src/components/ui
A Tailwind v4 theme with light and dark modes, defined as CSS variables in globals.css
The cn class-merging helper and your Config.brand object

Using components

Import components by subpath from the UI package:

tsx

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

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

Note

These are Base UI components, not Radix. Where shadcn used asChild, Base UI uses a render prop:

tsx

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

Theming

Colors, radii, and fonts are CSS variables in packages/ui/src/styles/globals.css. Edit the :root and .dark blocks to restyle the whole app, every component reads from these tokens.

Adding more components

The library follows shadcn's canonical structure, so you can pull in any additional component with the shadcn CLI and it will match the existing style.

bash

bunx shadcn@latest add accordion

The marketing pages module builds directly on these components.