Get started
Fabricator UI

Search documentation

Search pages, components, blocks, styles and colours.

Introduction

PreviousNext

Fabricator UI is the foundation for your design system. Accessible components, three primitive bases, its own design language. Open Source. Open Code.

Fabricator UI is a component registry you copy into your project, not a package you install.

Every component is delivered as source code through the Fabricator CLI, so you own it, read it and change it like any other file in your app. Fabricator UI gives you a complete set of accessible components, extra components on top of that set and, over time, its own design language.

Fabricator UI is built around the following principles:

  • Open Code: You get the component source, not a compiled package.
  • Drop-in Compatible: Works in existing projects. Same components.json, same tokens, same component APIs.
  • Three Bases: Every component is available for Base UI, Radix and React Aria.
  • Styles: Components compile into the visual style you pick.
  • Registry: Everything is distributed through the @fabricator registry.
  • AI-Ready: Plain source and consistent APIs that LLMs can read and extend.

Open Code

Fabricator UI hands you the actual component code. You have full control to customize and extend the components to your needs:

  • Full Transparency: You see exactly how each component is built.
  • Easy Customization: Modify any part of a component to fit your design and functionality requirements.
  • No Wrappers: To change a button, you edit the button. You do not override styles or wrap a library component.

Works with existing shadcn/ui projects

  • Superset: A Fabricator component that replaces a shadcn/ui component keeps its name, file path, exports, props, variants and data-slot attributes. It only adds.
  • Same tokens: Components use the same CSS variables (--background, --primary, --radius, …), so your theme carries over.
  • Same tooling: Run npx fabricator-ui@latest init to add the @fabricator registry next to the components you already have. See Registry.

Three Bases

Each component is written against a primitive library, called a base:

  • Base UI (base): the default.
  • Radix UI (radix).
  • React Aria (aria).

The same component looks and behaves the same in every base. Pick the base when you create a project, and the CLI installs the matching source.

Style

Every component ships in one visual style: the Fabricator design you see in these docs. Components are written with semantic classes and compiled into that style at build time, so the code you install is plain Tailwind. Colours, radius and fonts come from your theme's CSS variables.

Registry

Fabricator UI is distributed as a registry. It serves components, blocks, themes and an init payload, compiled in the Fabricator style for your base.

AI-Ready

Open code and a consistent API make components easy for AI tools to read, understand and generate. Every docs page is also available as Markdown (append .md to the URL), the site publishes an llms.txt, and the Fabricator MCP server can browse and install from @fabricator.

Acknowledgements

Fabricator UI is built on shadcn/ui by shadcn, released under the MIT license. Its design language (surfaces, motion, fluid hover and scrollbars) is adapted from Fluid Functionalism by Micka Touillaud, also MIT. The original copyright notices are kept in the repository.