Getting Started
Install Faber UI and add your first component.
Prerequisites
- A React 19 project with Tailwind CSS v4
- A
components.json. Runnpx shadcn@latest initfirst if the project has none. - Node.js 22 or newer for the shadcn CLI
Add a component
Run the shadcn CLI
Point the shadcn CLI at the Faber UI registry:
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/button.jsonThe CLI reads your components.json for aliases, resolves any components the
item depends on, installs the npm packages it needs, and copies the source into
your project. The first component also brings the theme: the tokens, motion
utilities and base styles every component uses, copied into styles/faber/
(under src/ if your project has one).
Import the theme
Import the theme once, from the CSS file your components.json points at, after
Tailwind and the shadcn variants:
@import "tailwindcss";
@import "shadcn/tailwind.css";
@import "../styles/faber/index.css";Adjust the relative path to where the CLI placed styles/faber. The theme
defines --background, --primary and the rest of the shadcn token names, so
remove the default :root, .dark and @theme inline blocks that
shadcn init generated, or keep them after the import only to override
specific values.
Use it
The component lands under your configured ui alias:
import { Button } from "@/components/ui/button";
export default function Page() {
return <Button>Hello</Button>;
}Working inside this repository instead of your own? Every file in
packages/ui/src/components/ is importable as
@workspace/ui/components/<name> through the ./components/* export.
Customizing a component
Because the source lives in your repository, you can edit any component directly. Open lib/button-variants.ts and adjust the buttonVariants cva config, or open components/ui/button.tsx for the className and props. Changes apply everywhere the component is imported.
Theming
The kit's colors, radii, spacing, type and motion are generated from a small set of knobs, so re-theming it does not mean editing components. The fastest version is a single attribute:
<html data-brand="emerald" data-neutral="stone" data-radius="lg">That re-derives every color in the kit from one hue: buttons, focus rings, the sidebar, charts, callouts and the documentation chrome.
See Theming for the token layers, the full list of presets, and how to add your own.
Next steps
Now that you have a component running, explore the full catalog in the Components section.
Last updated on