Get Started

Installation

Direct URL

Install components directly without any configuration:


pnpm dlx shadcn@latest add https://fab-ui.com/r/button.json

Namespaced Registry

For a cleaner workflow, configure the fab-ui registry in your components.json:

components.json

{
  "$schema": "https://shadcn.com/schema.json",
  "registries": {
    "fab-ui": "https://fab-ui.com/r/{name}.json"
  }
}

Then install components using short names:


pnpm dlx shadcn@latest add fab-ui/button

Portals Setup

fab-ui uses portals for popup components like Dialog and Popover. To ensure these display above all page content, add an isolation: isolate style to your application root element:

globals.css

.root {
  isolation: isolate;
}

This creates a separate stacking context, preventing z-index conflicts with other page styles.

iOS 26+ Safari

Starting with iOS 26, Safari displays content beneath the UI chrome. Dialog backdrops and similar elements must use position: absolute instead of position: fixed to cover the visual viewport properly after scrolling. Add this style globally:

globals.css

body {
  position: relative;
}

Working with LLMs

fab-ui is built on Base UI. When working with AI assistants, you can reference the Base UI documentation in markdown format for accurate component APIs and patterns.

See Base UI's llms.txt for AI-friendly documentation.