Fabric UI

CLI

Use the CLI to add Fabric UI components and patterns.

Fabric UI works with the registry CLI flow, so components are copied into your project where you can fully own and customize them.

Add Components

Install a base component by name.

pnpm dlx dlx shadcn@latest add @fabric-ui/button

Install a production-ready pattern by registry item name.

pnpm dlx dlx shadcn@latest add @fabric-ui/c-data-grid-1

Use a Local Registry

When developing Fabric UI locally, keep the site running and use the local registry URL in components.json.

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

Then install items the same way.

pnpm dlx dlx shadcn@latest add @fabric-ui/filters

Recommended Flow

  1. Pick a base and style in the Theme customizer.
  2. Install the smallest component you need first.
  3. Add patterns when you want complete product-ready examples.
  4. Keep installed code in your app and adapt it to your product.

Common Commands

# Add a component
npx dlx shadcn@latest add @fabric-ui/dialog
 
# Add a pattern
npx dlx shadcn@latest add @fabric-ui/c-kanban-1
 
# Initialize MCP for AI-assisted component work
npx dlx shadcn@latest mcp init

For registry setup details, see Installation and Registry.