Up and running in minutes.

1. 01

   Install the package

   Add @codefast/ui to your project. Peer dependencies (React 19, Tailwind v4) must already be present.

   pnpm add @codefast/ui

   Copy
2. 02

   Import the CSS

   Add the design-system stylesheet to your global CSS. Pick a theme palette, then load the preset for Tailwind variants and motion utilities.

   @import "tailwindcss";
   @import "@codefast/ui/css/themes/neutral.css";
   @import "@codefast/ui/css/preset.css";

   Copy
3. 03

   Use a component

   Import any component by its named sub-path. No barrel imports, no tree-shaking surprises.

   import { Button } from "@codefast/ui/button";
   
   export function MyPage() {
     return <Button variant="outline">Click me</Button>;
   }

   Copy

@import "tailwindcss";
@import "@codefast/ui/css/themes/sky.css";
@import "@codefast/ui/css/preset.css";

For SSR apps, add @codefast/theme to persist color-scheme preference without a flash of the wrong theme. This docs site uses sky; consumer apps typically start with neutral.