This guide walks you through the essential steps to integrate Fabric UI into your project.
Prerequisites
Fabric UI is built on the latest React 19 and Tailwind CSS v4. Ensure your project is set up with these technologies before proceeding. If you are already using a compatible registry-based setup, your existing installation flow and customizer options will carry over cleanly.
Setup Fabric UI Registry
Add the Fabric UI registry namespace to your components.json and set your component library and style.
For compatibility with older generated dependencies, keep the legacy alias pointed at the same registry URL.
{
...
"style": "base-nova",
...
"registries": {
"@fabric-ui": "http://localhost:4000/r/{style}/{name}.json",
"@reui": "http://localhost:4000/r/{style}/{name}.json"
}
}Components
You can integrate Fabric UI using the registry CLI flow for automation or by manual installation for full control.
Both methods apply to everything in Docs and the component catalog. New top-level examples use @fabric-ui/…, while older generated dependencies continue to resolve through the legacy alias.
Styling
Fabric UI extends the underlying theming system with additional semantic tokens that enable precise, context-aware UI states:
--destructive-foreground: Used for high-contrast destructive actions and error states.--info&--info-foreground: Semantic colors for informational alerts and badges.--success&--success-foreground: Semantic colors for success indicators and positive states.--warning&--warning-foreground: Semantic colors for cautionary callouts and warnings.--invert&--invert-foreground: Semantic colors for inverse states.
For these custom color tokens, see the Styling guide.
Base UI and Radix UI Support
We understand that different projects have different needs. Fabric UI is built to be primitive-agnostic, offering both Base UI and Radix UI versions for each entry in our registry. This allows you to maintain consistency while choosing the library that best fits your technical requirements.
AI-Enhanced Workflow
Fabric UI is designed from the ground up to be AI-friendly, making it easier for language models to understand and modify your UI.
- llms.txt: Access our llms.txt file for a structured map of our documentation and architecture optimized for AI agents.
- Copy Markdown: Every page includes a Copy Markdown feature, allowing you to instantly feed documentation or code into your AI-driven development workflows.