---
name: "@fab-ui"
slug: "fab-ui"
description: "Fab UI is a shadcn-compatible component registry built entirely on Base UI (headless, accessible primitives) rather than Radix UI, with Tailwind CSS v4 and React 19. Offers 39 components across four categories: Form (button, checkbox, checkbox-group, combobox, field, fieldset, form, input, input-group, label, number-field, radio, select, slider, switch, textarea, toggle), Overlay (alert-dialog, context-menu, dialog, dropdown-menu, popover, preview-card, tooltip), Layout (accordion, card, collapsible, scroll-area, separator, tabs, toolbar), and Data Display (avatar, badge, meter, progress). Special components include autocomplete, toggle-group, and two liquid-metal animated components (button and avatar) using Paper Design shaders. WCAG-compliant, copy-paste owned. Free, MIT licensed. Use for: building an accessible, Base UI-based component set with Tailwind v4 that bypasses Radix UI while still following the shadcn copy-paste ownership model."
category: "Component library (general)"
tags: ["accessibility", "aesthetic", "animation", "backgrounds", "buttons", "cards", "components", "design-system", "forms", "glassmorphism", "hooks", "loaders", "media", "navigation", "overlays"]
framework: "react"
license: "MIT"
author: "triatetarta"
website: "https://fab-ui.com"
github: "https://github.com/triatetarta/fab-ui"
registry: "https://fab-ui.com/r/registry.json"
pro: false
pro_url: null
github_stars: 53
component_count: 44
generated_at: "2026-07-28T08:00:50.948Z"
---

# @fab-ui

Fab UI is a shadcn-compatible component registry built entirely on Base UI (headless, accessible primitives) rather than Radix UI, with Tailwind CSS v4 and React 19. Offers 39 components across four categories: Form (button, checkbox, checkbox-group, combobox, field, fieldset, form, input, input-group, label, number-field, radio, select, slider, switch, textarea, toggle), Overlay (alert-dialog, context-menu, dialog, dropdown-menu, popover, preview-card, tooltip), Layout (accordion, card, collapsible, scroll-area, separator, tabs, toolbar), and Data Display (avatar, badge, meter, progress). Special components include autocomplete, toggle-group, and two liquid-metal animated components (button and avatar) using Paper Design shaders. WCAG-compliant, copy-paste owned. Free, MIT licensed. Use for: building an accessible, Base UI-based component set with Tailwind v4 that bypasses Radix UI while still following the shadcn copy-paste ownership model.

## Links

- Website: https://fab-ui.com
- GitHub: https://github.com/triatetarta/fab-ui
- Registry JSON: https://fab-ui.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/fab-ui
- This file: https://sh4dcn.vercel.app/md/fab-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://fab-ui.com/r/registry.json
pnpm dlx shadcn@latest add https://fab-ui.com/r/registry.json
bunx shadcn@latest add https://fab-ui.com/r/registry.json
# clone the source repo
git clone https://github.com/triatetarta/fab-ui.git
# fetch the raw registry index
curl -s https://fab-ui.com/r/registry.json
```

## Components (44)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:ui | Accordion | `npx shadcn@latest add https://fab-ui.com/r/accordion.json` |
| alert-dialog | registry:ui | Alert Dialog | `npx shadcn@latest add https://fab-ui.com/r/alert-dialog.json` |
| autocomplete | registry:ui | Autocomplete | `npx shadcn@latest add https://fab-ui.com/r/autocomplete.json` |
| avatar | registry:ui | Avatar | `npx shadcn@latest add https://fab-ui.com/r/avatar.json` |
| badge | registry:ui | Badge | `npx shadcn@latest add https://fab-ui.com/r/badge.json` |
| button | registry:ui | Button | `npx shadcn@latest add https://fab-ui.com/r/button.json` |
| card | registry:ui | Card | `npx shadcn@latest add https://fab-ui.com/r/card.json` |
| checkbox | registry:ui | Checkbox | `npx shadcn@latest add https://fab-ui.com/r/checkbox.json` |
| checkbox-group | registry:ui | Checkbox Group | `npx shadcn@latest add https://fab-ui.com/r/checkbox-group.json` |
| collapsible | registry:ui | Collapsible | `npx shadcn@latest add https://fab-ui.com/r/collapsible.json` |
| combobox | registry:ui | Combobox | `npx shadcn@latest add https://fab-ui.com/r/combobox.json` |
| context-menu | registry:ui | Context Menu | `npx shadcn@latest add https://fab-ui.com/r/context-menu.json` |
| dialog | registry:ui | Dialog | `npx shadcn@latest add https://fab-ui.com/r/dialog.json` |
| drawer | registry:ui | Drawer | `npx shadcn@latest add https://fab-ui.com/r/drawer.json` |
| dropdown-menu | registry:ui | Dropdown Menu | `npx shadcn@latest add https://fab-ui.com/r/dropdown-menu.json` |
| field | registry:ui | Field | `npx shadcn@latest add https://fab-ui.com/r/field.json` |
| fieldset | registry:ui | Fieldset | `npx shadcn@latest add https://fab-ui.com/r/fieldset.json` |
| form | registry:ui | Form | `npx shadcn@latest add https://fab-ui.com/r/form.json` |
| input | registry:ui | Input | `npx shadcn@latest add https://fab-ui.com/r/input.json` |
| input-group | registry:ui | Input Group | `npx shadcn@latest add https://fab-ui.com/r/input-group.json` |
| label | registry:ui | Label | `npx shadcn@latest add https://fab-ui.com/r/label.json` |
| liquid-metal-avatar | registry:ui | Liquid Metal Avatar | `npx shadcn@latest add https://fab-ui.com/r/liquid-metal-avatar.json` |
| liquid-metal-button | registry:ui | Liquid Metal Button | `npx shadcn@latest add https://fab-ui.com/r/liquid-metal-button.json` |
| liquid-metal-card | registry:ui | Liquid Metal Card | `npx shadcn@latest add https://fab-ui.com/r/liquid-metal-card.json` |
| mesh-gradient-card | registry:ui | Mesh Gradient Card | `npx shadcn@latest add https://fab-ui.com/r/mesh-gradient-card.json` |
| meter | registry:ui | Meter | `npx shadcn@latest add https://fab-ui.com/r/meter.json` |
| navigation-menu | registry:ui | Navigation Menu | `npx shadcn@latest add https://fab-ui.com/r/navigation-menu.json` |
| number-field | registry:ui | Number Field | `npx shadcn@latest add https://fab-ui.com/r/number-field.json` |
| popover | registry:ui | Popover | `npx shadcn@latest add https://fab-ui.com/r/popover.json` |
| hover-card | registry:ui | Hover Card | `npx shadcn@latest add https://fab-ui.com/r/hover-card.json` |
| progress | registry:ui | — | `npx shadcn@latest add https://fab-ui.com/r/progress.json` |
| radio-group | registry:ui | Radio Group | `npx shadcn@latest add https://fab-ui.com/r/radio-group.json` |
| scroll-area | registry:ui | Scroll Area | `npx shadcn@latest add https://fab-ui.com/r/scroll-area.json` |
| select | registry:ui | Select | `npx shadcn@latest add https://fab-ui.com/r/select.json` |
| separator | registry:ui | Separator | `npx shadcn@latest add https://fab-ui.com/r/separator.json` |
| slider | registry:ui | Slider | `npx shadcn@latest add https://fab-ui.com/r/slider.json` |
| switch | registry:ui | Switch | `npx shadcn@latest add https://fab-ui.com/r/switch.json` |
| tabs | registry:ui | Tabs | `npx shadcn@latest add https://fab-ui.com/r/tabs.json` |
| textarea | registry:ui | Textarea | `npx shadcn@latest add https://fab-ui.com/r/textarea.json` |
| toggle-group | registry:ui | Toggle Group | `npx shadcn@latest add https://fab-ui.com/r/toggle-group.json` |
| toggle | registry:ui | Toggle | `npx shadcn@latest add https://fab-ui.com/r/toggle.json` |
| toolbar | registry:ui | Toolbar | `npx shadcn@latest add https://fab-ui.com/r/toolbar.json` |
| tooltip | registry:ui | Tooltip | `npx shadcn@latest add https://fab-ui.com/r/tooltip.json` |
| utils | registry:lib | — | `npx shadcn@latest add https://fab-ui.com/r/utils.json` |

## For AI agents

```text
You are adding components from @fab-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/fab-ui.md) for the component list.
2. Fetch the machine-readable index: https://fab-ui.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: fab-ui).
```