Installation

Fabric UI ships as a registry-first component system. Add the registry once, then install the components and patterns you need directly into your app.

Requirements

• React 19 or a compatible React setup.
• Tailwind CSS v4.
• A project with a components.json file.
• A package manager such as pnpm, npm, yarn, or bun.

Add the Registry

Add the Fabric UI registry namespace to components.json.

{
  "registries": {
    "@fabric-ui": "https://fabric-ui.com/r/{style}/{name}.json"
  }
}

When developing locally, point the registry at your local server.

{
  "registries": {
    "@fabric-ui": "http://localhost:4000/r/{style}/{name}.json"
  }
}

Choose a Style

Fabric UI supports multiple visual styles and primitive bases. Set the style in components.json so installed components match your design direction.

{
  "style": "radix-maia"
}

You can switch styles later from the Theme customizer or by updating the style value before installing more components.

Install a Component

Use the CLI to install a component from the registry.

pnpmnpmyarnbun
pnpm dlx dlx shadcn@latest add @fabric-ui/alert
Copy

You can also install a specific pattern.

pnpmnpmyarnbun
pnpm dlx dlx shadcn@latest add @fabric-ui/c-alert-1
Copy

Next Steps

• Read the CLI guide for command examples.
• Explore Skills for AI-assisted workflows.
• Open the component catalog to browse available components.