60 components, MIT licensed

Components you own outright.

React components built on Base UI primitives and Tailwind CSS v4, with a shadcn-compatible variant API. The source is copied into your repository, so there is no runtime dependency to upgrade and nothing to override when a design changes.

DocumentationSource

Built on

  • React
  • Next.js
  • TypeScript
  • Tailwind CSS
  • Base UI
  • shadcn/ui

Quickstart

Terminal
$ pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/button.json

The CLI resolves its own dependencies, installs the npm packages it needs, and copies the source into components/ui/. Every component is addressable the same way.

By the numbers

Components
60
documented and installable
Themes
1,170
13 hues × 5 neutrals × 6 radii × 3 densities
Semantic tokens
122
resolved from an oklch ramp
Runtime deps
0
the source lives in your repo

Every tile below is the real component.

Not a screenshot, not a video. Toggle the switch, drag the slider. This page runs the same source the CLI copies into your repository.

Engineered to the point where you stop noticing it.

Every decision here is a token, a contract, or a deliberate omission. The pay-off is that a design change lands in one place, an agent can read the whole library without a browser, and nothing surprises you six months in.

AI first

Agents read this library the way they read your code.

Machine-addressable by design, not by scraper. Point a model at a path and it gets the real source, not rendered HTML.

  • /llms.txtindex
  • /llms-full.txtwhole corpus
  • /llms.mdx/docs/*any page as raw markdown
  • /r/<name>.jsoninstallable by URL

The shadcn MCP server ships wired up in .vscode/mcp.json, so an agent in your editor installs a component without leaving the chat.

1,170 themes
13 brand hues, 5 neutrals, 6 radii and 3 densities compose from data-* attributes on the root element. No rebuild, no per-component overrides.
Bidirectional
147 logical-property utilities and 40 direction-aware variants. Nothing hardcodes left or right, so RTL mirrors without a second stylesheet.
Motion under contract
Components never hardcode a millisecond. Reduced-motion collapses distance and overshoot while keeping the opacity that aids comprehension.
Accessible by inheritance
Focus management, roles and keyboard behaviour come from Base UI primitives rather than being reimplemented per component.
Perceptual colour
122 semantic tokens resolve from an oklch ramp, so contrast holds at every brand, neutral and density combination.

All components

60