Installation

Foundry is a copy-first design system: bring tokens into your global CSS, drop in the cn utility, then adopt components that already speak those tokens.

Recommended stack

React 18+, Tailwind CSS v4, TypeScript, and Radix primitives. This docs app also uses TanStack Start — your product can use Vite, Next, Remix, or plain SPA.

1. Dependencies

Core packages

Install only the Radix packages for components you actually ship. Foundry wrappers re-export accessible behavior — no custom focus traps required.

2. Utility

src/lib/utils.ts

Every component uses cn() for conflict-free class merging.

3. Tokens

Global CSS (Tailwind v4)

Map semantic CSS variables into @theme so utilities like bg-background work. Full palette lives on the Tokens and Color pages.

4. Copy a component

Open any component page (start with Button).
Copy the import path from the catalog — e.g. @/components/ui/button.
Paste the source from this repo’s src/components/ui into your project.
Use DemoBlock Code tabs for full, paste-ready examples.

Theme FOUC prevention

Before React hydrates, run a tiny script that reads localStorage.foundry-theme and toggles .dark on the document element (document.documentElement). Foundry’s root layout already includes this pattern.

PreviousOverview NextPrinciples