ui

Brandon's source-first UI library, built on shadcn/ui.

This is a reference repository rather than an npm package. Copy the components you need into a project, then adapt them locally. The repository currently contains the complete official shadcn component set using React, TypeScript, Tailwind CSS v4, the Soft foundation (derived from Nova), and Base UI primitives.

The included responsive workbench groups representative components into actions, forms, navigation, feedback, data display, and overlays. It includes section search, mobile navigation, and light, dark, and system appearance controls.

Use a component

Copy the component from src/components/ui, along with any local dependencies it imports. Components expect the @/components, @/lib, and @/hooks aliases used by shadcn.

For a new shadcn project, use this repository as an implementation reference while installing the matching upstream component:

pnpm dlx shadcn@latest add button

Change the theme

The global theme lives in src/index.css. The two main starting points are:

:root {
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --radius: 1rem;
}

Update the corresponding values in .dark when changing the primary colour. Other semantic tokens in the same file control backgrounds, borders, muted surfaces, charts, and sidebar colours.

Develop

pnpm install
pnpm dev

Check

pnpm lint
pnpm build

Direction

Soft is the shared default: rounded buttons, 48px muted inputs, spacious fields, and rounded segmented tabs. Primary colour and base radius remain configurable. Copy src/index.css alongside components; --radius-control and --radius-field derive from --radius. The shadcn configuration retains base-nova as its upstream source; reinstalling components can overwrite these local design choices.