---
name: "@ai2"
slug: "ai2"
description: "Agent-native design system for the shadcn CLI: 51 base components with a full variant, tone and size matrix on an OKLCH token layer, plus 307 styled variations. MIT."
category: "Animated components"
tags: ["accessibility", "ai", "animation", "auth", "buttons", "cards", "design-system", "forms", "glassmorphism", "hooks", "loaders", "media", "navigation", "overlays", "pro-available", "tables", "theming"]
framework: "react"
license: "MIT"
author: "ai2design"
website: "https://ai2.design"
github: "https://github.com/ai2design/ai2-registry"
registry: "https://ai2.design/r/registry.json"
pro: true
pro_url: "https://ai2.design/pricing"
github_stars: 0
component_count: 250
generated_at: "2026-09-05T09:50:59.044Z"
---

# @ai2

Agent-native design system for the shadcn CLI: 51 base components with a full variant, tone and size matrix on an OKLCH token layer, plus 307 styled variations. MIT.

## Links

- Website: https://ai2.design
- GitHub: https://github.com/ai2design/ai2-registry
- Registry JSON: https://ai2.design/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/ai2
- This file: https://sh4dcn.vercel.app/md/ai2.md
- Pro / pricing: https://ai2.design/pricing

## Install

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

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| tokens | registry:theme | ai2 extension tokens: tone colors (brand, success, warning, danger, info + soft pairs), surface-2/3 and motion variables. Required by every ai2 component; inst… | `npx shadcn@latest add https://ai2.design/r/tokens.json` |
| button | registry:ui | Button with a full variant x tone x size matrix: 5 variants (solid, soft, outline, ghost, link), 6 tones (neutral, brand, success, warning, danger, info), 10 s… | `npx shadcn@latest add https://ai2.design/r/button.json` |
| theme-indigo | registry:theme | Indigo brand theme for ai2: recolors the brand tone channel (solid + soft pairs) in light and dark mode. Install on top of any ai2 setup; every component using… | `npx shadcn@latest add https://ai2.design/r/theme-indigo.json` |
| glass | registry:lib | Floating surface treatments: glass.overlay (translucent + blur, for tooltips/dropdowns), glass.frosted (heavier blur + deep layered shadow, for modals), glass.… | `npx shadcn@latest add https://ai2.design/r/glass.json` |
| primitives | registry:lib | Headless primitive adapter: the single entry point every ai2 component imports its unstyled behaviour from. Components never import the primitive library direc… | `npx shadcn@latest add https://ai2.design/r/primitives.json` |
| primitives-base | registry:lib | The second provider behind the ai2 primitive adapter: the same surface as @ai2/primitives, bound to Base UI instead of Radix. A pro block imports the adapter, … | `npx shadcn@latest add https://ai2.design/r/primitives-base.json` |
| card | registry:ui | Card surface with 4 variants (outline, elevated, soft, glass) and 3 inset scales (sm, md, lg) that pad header, content and footer together. Parts: Card, CardHe… | `npx shadcn@latest add https://ai2.design/r/card.json` |
| file-input | registry:ui | Styled file picker: hidden native input under a custom surface with a leading icon (lucide or remixicon), placeholder or selected file name, multiple-file coun… | `npx shadcn@latest add https://ai2.design/r/file-input.json` |
| input-group | registry:ui | Composable input shell: InputGroup carries the field appearance with 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg) and 3 tones (neutral, success, dan… | `npx shadcn@latest add https://ai2.design/r/input-group.json` |
| input | registry:ui | Text input with 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg) and 3 tones (neutral, success, danger) for validation states via border and focus ring … | `npx shadcn@latest add https://ai2.design/r/input.json` |
| textarea | registry:ui | Auto-growing textarea (field-sizing-content) with 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg) and 3 tones (neutral, success, danger) matching Input… | `npx shadcn@latest add https://ai2.design/r/textarea.json` |
| label | registry:ui | Accessible form label built on radix-ui Label with 2 sizes (sm, md). Auto-dims when the associated control is disabled. | `npx shadcn@latest add https://ai2.design/r/label.json` |
| checkbox | registry:ui | Checkbox on radix-ui with 4 tones (neutral, brand, success, danger) and 3 sizes (sm, md, lg). Invalid state via aria-invalid. | `npx shadcn@latest add https://ai2.design/r/checkbox.json` |
| radio-group | registry:ui | Radio group + item on radix-ui with 4 tones and 3 sizes. Exports RadioGroup and RadioGroupItem. | `npx shadcn@latest add https://ai2.design/r/radio-group.json` |
| switch | registry:ui | Toggle switch on radix-ui with 4 tones (neutral, brand, success, danger) and 3 sizes (sm, md, lg). Thumb travel and easing use ai2 motion tokens. | `npx shadcn@latest add https://ai2.design/r/switch.json` |
| badge | registry:ui | Badge with a variant x tone x size matrix: 3 variants (solid, soft, outline), 6 tones, 3 sizes (sm, md, lg). Icons work with both lucide svg and remixicon i ch… | `npx shadcn@latest add https://ai2.design/r/badge.json` |
| avatar | registry:ui | Avatar on radix-ui with 5 sizes (xs-xl) and 2 shapes (circle, rounded), plus AvatarGroup for overlapping stacks with an optional max that collapses the rest in… | `npx shadcn@latest add https://ai2.design/r/avatar.json` |
| progress | registry:ui | Progress bar on radix-ui with 6 tones (neutral, brand, success, warning, danger, info) and 3 sizes. Fill animates using ai2 motion tokens. | `npx shadcn@latest add https://ai2.design/r/progress.json` |
| skeleton | registry:ui | Loading placeholder on the ai2 surface-3 token with 3 shapes (line, circle, rect) and 2 animations (pulse, none). Style dimensions via className. | `npx shadcn@latest add https://ai2.design/r/skeleton.json` |
| spinner | registry:ui | Loading spinner (lucide) with 3 tones (current, brand, muted) and 4 sizes (sm-xl). Has role=status and an aria-label. | `npx shadcn@latest add https://ai2.design/r/spinner.json` |
| separator | registry:ui | Horizontal or vertical divider on radix-ui with 2 variants (solid, dashed) and an optional centered label that renders a two-line divider with text (e.g. OR). … | `npx shadcn@latest add https://ai2.design/r/separator.json` |
| kbd | registry:ui | Keyboard key hint styled with the ai2 mono font and surface tokens. Use for shortcuts and command hints. | `npx shadcn@latest add https://ai2.design/r/kbd.json` |
| field | registry:ui | Form field composition: Field, FieldControl, FieldLabel, FieldDescription, FieldError. Auto-wires accessibility: FieldControl (a Slot around any control) recei… | `npx shadcn@latest add https://ai2.design/r/field.json` |
| tabs | registry:ui | Tabs on radix-ui with 3 variants (solid segmented, line underline, pill) and 2 sizes (sm, md). Variant and size flow from TabsList to every trigger via context… | `npx shadcn@latest add https://ai2.design/r/tabs.json` |
| accordion | registry:ui | Accordion on radix-ui with 3 variants (default divided rows, separated cards, outline boxed) plus animated open/close (ai2 motion tokens) and a rotating chevro… | `npx shadcn@latest add https://ai2.design/r/accordion.json` |
| alert | registry:ui | Alert with a variant x tone matrix: 2 variants (soft, outline) x 6 tones. Optional leading icon, AlertTitle and AlertDescription. role=alert. | `npx shadcn@latest add https://ai2.design/r/alert.json` |
| tooltip | registry:ui | Tooltip on radix-ui with portal, arrow, directional slide/zoom animations and 2 content sizes (sm, md). Tooltip wraps its own Provider, so a single import work… | `npx shadcn@latest add https://ai2.design/r/tooltip.json` |
| breadcrumb | registry:ui | Accessible breadcrumb (nav + ordered list) with link, current page, separator and ellipsis parts. Semantic aria-current on the active page. | `npx shadcn@latest add https://ai2.design/r/breadcrumb.json` |
| dialog | registry:ui | Modal dialog on radix-ui with portal, overlay, focus trap, fade/zoom animations and 5 content sizes (sm, md, lg, xl, full) that cap the width from the sm break… | `npx shadcn@latest add https://ai2.design/r/dialog.json` |
| sheet | registry:ui | Slide-in panel on radix-ui Dialog with 4 sides (right, left, top, bottom), 3 sizes (sm, md, lg) that set the panel width for the left/right sides, and directio… | `npx shadcn@latest add https://ai2.design/r/sheet.json` |
| popover | registry:ui | Popover on radix-ui with portal, directional slide/zoom animations, 3 content sizes (sm, md, lg) and an optional anchor. Exports Popover, PopoverTrigger, Popov… | `npx shadcn@latest add https://ai2.design/r/popover.json` |
| dropdown-menu | registry:ui | Full dropdown menu on radix-ui: items (default + danger variant), checkbox items, radio group, submenus, labels, separators and shortcuts. Keyboard navigable. | `npx shadcn@latest add https://ai2.design/r/dropdown-menu.json` |
| select | registry:ui | Select on radix-ui. Trigger follows the Input contract: 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg), 3 tones (neutral, success, danger). Grouped it… | `npx shadcn@latest add https://ai2.design/r/select.json` |
| command | registry:ui | Command palette (cmdk) with fuzzy search, groups, items, shortcuts and a CommandDialog wrapper for a ⌘K experience. | `npx shadcn@latest add https://ai2.design/r/command.json` |
| sonner | registry:ui | Toast notifications via sonner, themed with ai2 tokens and synced to next-themes. Drop the Toaster once in your root layout, then call toast() anywhere. | `npx shadcn@latest add https://ai2.design/r/sonner.json` |
| table | registry:ui | Composable table primitives (Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption) with hover rows, selected state and hori… | `npx shadcn@latest add https://ai2.design/r/table.json` |
| alert-dialog | registry:ui | Confirmation dialog on radix-ui AlertDialog for destructive or irreversible actions. Action button defaults to the danger tone; cancel is focused first per WAI… | `npx shadcn@latest add https://ai2.design/r/alert-dialog.json` |
| toggle | registry:ui | Two-state toggle button on radix-ui with 2 variants (default, outline), 3 sizes and 2 tones (neutral, brand). Pressed state uses the accent token (neutral) or … | `npx shadcn@latest add https://ai2.design/r/toggle.json` |
| toggle-group | registry:ui | Single or multiple selection toggle group on radix-ui. Inherits variant/size/tone from the group via context; outline variant renders as a segmented control. | `npx shadcn@latest add https://ai2.design/r/toggle-group.json` |
| pagination | registry:ui | Accessible pagination nav (previous/next, page links, ellipsis) styled with ai2 button variants. Current page gets aria-current. | `npx shadcn@latest add https://ai2.design/r/pagination.json` |
| combobox | registry:ui | Searchable single-select built from Popover + Command. Trigger follows the Input contract: 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg), 3 tones (ne… | `npx shadcn@latest add https://ai2.design/r/combobox.json` |
| slider | registry:ui | Range slider on radix-ui with 4 tones (neutral, brand, success, danger) coloring the range and thumb, and 3 sizes (sm, md, lg) for the track and thumb. Support… | `npx shadcn@latest add https://ai2.design/r/slider.json` |
| scroll-area | registry:ui | Custom cross-browser scroll container on radix-ui with a thin token-colored scrollbar. Exports ScrollArea and ScrollBar (vertical or horizontal orientation). | `npx shadcn@latest add https://ai2.design/r/scroll-area.json` |
| hover-card | registry:ui | Rich hover preview on radix-ui with portal, directional slide/zoom animations and 3 content sizes (sm, md, lg). Exports HoverCard, HoverCardTrigger, HoverCardC… | `npx shadcn@latest add https://ai2.design/r/hover-card.json` |
| collapsible | registry:ui | Single expand/collapse region on radix-ui. Exports Collapsible, CollapsibleTrigger, CollapsibleContent. Unstyled by design so it composes into any layout. | `npx shadcn@latest add https://ai2.design/r/collapsible.json` |
| button-group | registry:ui | Joins buttons, inputs and selects into a single segmented control on horizontal or vertical orientation, collapsing inner radii and borders. Exports ButtonGrou… | `npx shadcn@latest add https://ai2.design/r/button-group.json` |
| empty | registry:ui | Empty-state placeholder: Empty wrapper with EmptyHeader, EmptyMedia (default or icon variant), EmptyTitle, EmptyDescription and EmptyContent for actions. Cente… | `npx shadcn@latest add https://ai2.design/r/empty.json` |
| item | registry:ui | List/row primitive with 3 variants (default, outline, muted) and 2 sizes (default, sm). Parts: Item, ItemGroup, ItemMedia (default/icon/image), ItemContent, It… | `npx shadcn@latest add https://ai2.design/r/item.json` |
| drawer | registry:ui | Draggable drawer on vaul with 4 directions (top, right, bottom, left), a drag handle on the bottom variant, overlay and snap behavior. Exports Drawer, DrawerTr… | `npx shadcn@latest add https://ai2.design/r/drawer.json` |
| input-otp | registry:ui | One-time-passcode input on input-otp with individual slots, a blinking fake caret, active-slot ring and aria-invalid danger styling. Exports InputOTP, InputOTP… | `npx shadcn@latest add https://ai2.design/r/input-otp.json` |
| calendar | registry:ui | Date calendar on react-day-picker v10 styled with ai2 Button and tokens. Single, multiple and range selection, dropdown or label caption, outside days, week nu… | `npx shadcn@latest add https://ai2.design/r/calendar.json` |
| date-picker | registry:ui | Date field that opens a Calendar in a Popover. Controlled or uncontrolled via value/defaultValue and onValueChange; formats the selected date with date-fns and… | `npx shadcn@latest add https://ai2.design/r/date-picker.json` |
| context-menu | registry:ui | Right-click menu on radix-ui with items, checkbox and radio items, submenus, labels, separators and shortcuts. Item variant default or danger. Icons work with … | `npx shadcn@latest add https://ai2.design/r/context-menu.json` |
| menubar | registry:ui | Application menu bar on radix-ui with top-level menus, items, checkbox and radio items, submenus, labels, separators and shortcuts. Item variant default or dan… | `npx shadcn@latest add https://ai2.design/r/menubar.json` |
| resizable | registry:ui | Resizable split panels on react-resizable-panels with horizontal or vertical groups and an optional drag handle. Exports ResizablePanelGroup, ResizablePanel, R… | `npx shadcn@latest add https://ai2.design/r/resizable.json` |
| carousel | registry:ui | Slider/carousel on embla-carousel-react with horizontal or vertical orientation, keyboard support and prev/next controls built from ai2 Button. Exports Carouse… | `npx shadcn@latest add https://ai2.design/r/carousel.json` |
| accordion-demo | registry:example | Usage example for the ai2 accordion component. | `npx shadcn@latest add https://ai2.design/r/accordion-demo.json` |
| alert-demo | registry:example | Usage example for the ai2 alert component. | `npx shadcn@latest add https://ai2.design/r/alert-demo.json` |
| alert-dialog-demo | registry:example | Usage example for the ai2 alert-dialog component. | `npx shadcn@latest add https://ai2.design/r/alert-dialog-demo.json` |
| avatar-demo | registry:example | Usage example for the ai2 avatar component. | `npx shadcn@latest add https://ai2.design/r/avatar-demo.json` |
| badge-demo | registry:example | Usage example for the ai2 badge component. | `npx shadcn@latest add https://ai2.design/r/badge-demo.json` |
| breadcrumb-demo | registry:example | Usage example for the ai2 breadcrumb component. | `npx shadcn@latest add https://ai2.design/r/breadcrumb-demo.json` |
| button-demo | registry:example | Usage example for the ai2 button component. | `npx shadcn@latest add https://ai2.design/r/button-demo.json` |
| card-demo | registry:example | Usage example for the ai2 card component. | `npx shadcn@latest add https://ai2.design/r/card-demo.json` |
| checkbox-demo | registry:example | Usage example for the ai2 checkbox component. | `npx shadcn@latest add https://ai2.design/r/checkbox-demo.json` |
| combobox-demo | registry:example | Usage example for the ai2 combobox component. | `npx shadcn@latest add https://ai2.design/r/combobox-demo.json` |
| command-demo | registry:example | Usage example for the ai2 command component. | `npx shadcn@latest add https://ai2.design/r/command-demo.json` |
| dialog-demo | registry:example | Usage example for the ai2 dialog component. | `npx shadcn@latest add https://ai2.design/r/dialog-demo.json` |
| dropdown-menu-demo | registry:example | Usage example for the ai2 dropdown-menu component. | `npx shadcn@latest add https://ai2.design/r/dropdown-menu-demo.json` |
| field-demo | registry:example | Usage example for the ai2 field component. | `npx shadcn@latest add https://ai2.design/r/field-demo.json` |
| input-demo | registry:example | Usage example for the ai2 input component. | `npx shadcn@latest add https://ai2.design/r/input-demo.json` |
| kbd-demo | registry:example | Usage example for the ai2 kbd component. | `npx shadcn@latest add https://ai2.design/r/kbd-demo.json` |
| label-demo | registry:example | Usage example for the ai2 label component. | `npx shadcn@latest add https://ai2.design/r/label-demo.json` |
| pagination-demo | registry:example | Usage example for the ai2 pagination component. | `npx shadcn@latest add https://ai2.design/r/pagination-demo.json` |
| popover-demo | registry:example | Usage example for the ai2 popover component. | `npx shadcn@latest add https://ai2.design/r/popover-demo.json` |
| progress-demo | registry:example | Usage example for the ai2 progress component. | `npx shadcn@latest add https://ai2.design/r/progress-demo.json` |
| radio-group-demo | registry:example | Usage example for the ai2 radio-group component. | `npx shadcn@latest add https://ai2.design/r/radio-group-demo.json` |
| select-demo | registry:example | Usage example for the ai2 select component. | `npx shadcn@latest add https://ai2.design/r/select-demo.json` |
| separator-demo | registry:example | Usage example for the ai2 separator component. | `npx shadcn@latest add https://ai2.design/r/separator-demo.json` |
| sheet-demo | registry:example | Usage example for the ai2 sheet component. | `npx shadcn@latest add https://ai2.design/r/sheet-demo.json` |
| skeleton-demo | registry:example | Usage example for the ai2 skeleton component. | `npx shadcn@latest add https://ai2.design/r/skeleton-demo.json` |
| sonner-demo | registry:example | Usage example for the ai2 sonner component. | `npx shadcn@latest add https://ai2.design/r/sonner-demo.json` |
| spinner-demo | registry:example | Usage example for the ai2 spinner component. | `npx shadcn@latest add https://ai2.design/r/spinner-demo.json` |
| switch-demo | registry:example | Usage example for the ai2 switch component. | `npx shadcn@latest add https://ai2.design/r/switch-demo.json` |
| table-demo | registry:example | Usage example for the ai2 table component. | `npx shadcn@latest add https://ai2.design/r/table-demo.json` |
| tabs-demo | registry:example | Usage example for the ai2 tabs component. | `npx shadcn@latest add https://ai2.design/r/tabs-demo.json` |
| textarea-demo | registry:example | Usage example for the ai2 textarea component. | `npx shadcn@latest add https://ai2.design/r/textarea-demo.json` |
| toggle-demo | registry:example | Usage example for the ai2 toggle component. | `npx shadcn@latest add https://ai2.design/r/toggle-demo.json` |
| toggle-group-demo | registry:example | Usage example for the ai2 toggle-group component. | `npx shadcn@latest add https://ai2.design/r/toggle-group-demo.json` |
| tooltip-demo | registry:example | Usage example for the ai2 tooltip component. | `npx shadcn@latest add https://ai2.design/r/tooltip-demo.json` |
| file-input-demo | registry:example | Usage example for the ai2 file-input component. | `npx shadcn@latest add https://ai2.design/r/file-input-demo.json` |
| input-group-demo | registry:example | Usage example for the ai2 input-group component. | `npx shadcn@latest add https://ai2.design/r/input-group-demo.json` |
| button-group-demo | registry:example | Usage example for the ai2 button-group component. | `npx shadcn@latest add https://ai2.design/r/button-group-demo.json` |
| collapsible-demo | registry:example | Usage example for the ai2 collapsible component. | `npx shadcn@latest add https://ai2.design/r/collapsible-demo.json` |
| hover-card-demo | registry:example | Usage example for the ai2 hover-card component. | `npx shadcn@latest add https://ai2.design/r/hover-card-demo.json` |
| scroll-area-demo | registry:example | Usage example for the ai2 scroll-area component. | `npx shadcn@latest add https://ai2.design/r/scroll-area-demo.json` |
| slider-demo | registry:example | Usage example for the ai2 slider component. | `npx shadcn@latest add https://ai2.design/r/slider-demo.json` |
| calendar-demo | registry:example | Usage example for the ai2 calendar component. | `npx shadcn@latest add https://ai2.design/r/calendar-demo.json` |
| date-picker-demo | registry:example | Usage example for the ai2 date-picker component. | `npx shadcn@latest add https://ai2.design/r/date-picker-demo.json` |
| drawer-demo | registry:example | Usage example for the ai2 drawer component. | `npx shadcn@latest add https://ai2.design/r/drawer-demo.json` |
| empty-demo | registry:example | Usage example for the ai2 empty component. | `npx shadcn@latest add https://ai2.design/r/empty-demo.json` |
| input-otp-demo | registry:example | Usage example for the ai2 input-otp component. | `npx shadcn@latest add https://ai2.design/r/input-otp-demo.json` |
| item-demo | registry:example | Usage example for the ai2 item component. | `npx shadcn@latest add https://ai2.design/r/item-demo.json` |
| carousel-demo | registry:example | Usage example for the ai2 carousel component. | `npx shadcn@latest add https://ai2.design/r/carousel-demo.json` |
| context-menu-demo | registry:example | Usage example for the ai2 context-menu component. | `npx shadcn@latest add https://ai2.design/r/context-menu-demo.json` |
| menubar-demo | registry:example | Usage example for the ai2 menubar component. | `npx shadcn@latest add https://ai2.design/r/menubar-demo.json` |
| resizable-demo | registry:example | Usage example for the ai2 resizable component. | `npx shadcn@latest add https://ai2.design/r/resizable-demo.json` |
| avatars-badge | registry:component | Styled avatars: the Badge set. 5 decorative avatars variations (NotifyAvatar, StatusRingAvatar, TypingAvatar, NewAvatar, VerifiedAvatar) on the ai2 token syste… | `npx shadcn@latest add https://ai2.design/r/avatars-badge.json` |
| avatars-glass | registry:component | Styled avatars: the Glass set. 5 decorative avatars variations (FrostAvatar, TintAvatar, SheenAvatar, CrystalAvatar, HaloGlassAvatar) on the ai2 token system, … | `npx shadcn@latest add https://ai2.design/r/avatars-glass.json` |
| avatars-magnetic | registry:component | Styled avatars: the Magnetic set. 5 decorative avatars variations (MagneticAvatar, TiltAvatar, PopAvatar, WobbleAvatar, FollowAvatar) on the ai2 token system, … | `npx shadcn@latest add https://ai2.design/r/avatars-magnetic.json` |
| avatars-stack | registry:component | Styled avatars: the Stack set. 5 decorative avatars variations (AvatarStack, AvatarStackMore, AvatarRowGap, FannedStack, GridAvatars) on the ai2 token system, … | `npx shadcn@latest add https://ai2.design/r/avatars-stack.json` |
| avatars-styled | registry:component | Styled avatars: the essentials set. 5 decorative avatars variations (RingAvatar, StatusAvatar, GradientRingAvatar, GlowAvatar, SquircleAvatar) on the ai2 token… | `npx shadcn@latest add https://ai2.design/r/avatars-styled.json` |
| avatars-threed | registry:component | Styled avatars: the 3D set. 5 decorative avatars variations (CoinAvatar, CardTiltAvatar, LayeredAvatar, ShadowLiftAvatar, CubeAvatar) on the ai2 token system, … | `npx shadcn@latest add https://ai2.design/r/avatars-threed.json` |
| badges-animated | registry:component | Styled badges: the Animated set. 5 decorative badges variations (ShimmerBadge, BounceBadge, FlipBadge, SlideBadge, WobbleBadge) on the ai2 token system, powere… | `npx shadcn@latest add https://ai2.design/r/badges-animated.json` |
| badges-glass | registry:component | Styled badges: the Glass set. 5 decorative badges variations (FrostBadge, TintBadge, CrystalBadge, SmokeBadge, HaloBadge) on the ai2 token system, driven by CS… | `npx shadcn@latest add https://ai2.design/r/badges-glass.json` |
| badges-particle | registry:component | Styled badges: the Particle set. 5 decorative badges variations (SparkBadge, BurstBadge, TrailBadge, ConfettiBadge, GlitterBadge) on the ai2 token system, powe… | `npx shadcn@latest add https://ai2.design/r/badges-particle.json` |
| badges-shine | registry:component | Styled badges: the Shine set. 5 decorative badges variations (MetallicBadge, NeonBadge, HolographicBadge, GoldBadge, ChromeBadge) on the ai2 token system, powe… | `npx shadcn@latest add https://ai2.design/r/badges-shine.json` |
| badges-status | registry:component | Styled badges: the Status set. 5 decorative badges variations (OnlineBadge, AwayBadge, BusyBadge, OfflineBadge, CountBadge) on the ai2 token system, powered by… | `npx shadcn@latest add https://ai2.design/r/badges-status.json` |
| badges-styled | registry:component | Styled badges: the essentials set. 5 decorative badges variations (DotBadge, GradientBadge, GlowBadge, PulseBadge, OutlineBadge) on the ai2 token system, power… | `npx shadcn@latest add https://ai2.design/r/badges-styled.json` |
| buttons-3d | registry:component | Styled buttons: the 3D set. 5 decorative buttons variations (PushButton, TiltButton, LayeredButton, EmbossButton, LiftButton) on the ai2 token system, powered … | `npx shadcn@latest add https://ai2.design/r/buttons-3d.json` |
| buttons-animated | registry:component | Styled buttons: the Animated set. 5 decorative buttons variations (BounceButton, ScaleButton, SlideButton, RotateButton, BreatheButton) on the ai2 token system… | `npx shadcn@latest add https://ai2.design/r/buttons-animated.json` |
| buttons-glass | registry:component | Styled buttons: the Glass set. 5 decorative buttons variations (FrostButton, TintButton, CrystalButton, SmokeButton, DepthButton) on the ai2 token system, powe… | `npx shadcn@latest add https://ai2.design/r/buttons-glass.json` |
| buttons-glow | registry:component | Styled buttons: the Glow set. 5 decorative buttons variations (GlowButton, PulseGlowButton, AuraButton, NeonButton, EmberButton) on the ai2 token system, power… | `npx shadcn@latest add https://ai2.design/r/buttons-glow.json` |
| buttons-gradient | registry:component | Styled buttons: the Gradient set. 5 decorative buttons variations (FlowButton, ConicButton, DuotoneButton, AuroraButton, SunsetButton) on the ai2 token system,… | `npx shadcn@latest add https://ai2.design/r/buttons-gradient.json` |
| buttons-magnetic | registry:component | Styled buttons: the Magnetic set. 5 decorative buttons variations (MagneticButton, RepelButton, TiltPointerButton, ElasticButton, SquishButton) on the ai2 toke… | `npx shadcn@latest add https://ai2.design/r/buttons-magnetic.json` |
| buttons-particle | registry:component | Styled buttons: the Particle set. 5 decorative buttons variations (BurstButton, ConfettiButton, SparkleButton, RiseButton, PopButton) on the ai2 token system, … | `npx shadcn@latest add https://ai2.design/r/buttons-particle.json` |
| buttons-pill | registry:component | Styled buttons: the Pill set. 5 decorative buttons variations (FillButton, CenterFillButton, SwapButton, OutlineFillButton, DotButton) on the ai2 token system,… | `npx shadcn@latest add https://ai2.design/r/buttons-pill.json` |
| buttons-ripple | registry:component | Styled buttons: the Ripple set. 5 decorative buttons variations (RippleButton, EchoButton, SonarButton, PingButton, FlashButton) on the ai2 token system, power… | `npx shadcn@latest add https://ai2.design/r/buttons-ripple.json` |
| buttons-shiny | registry:component | Styled buttons: the Shiny set. 5 decorative buttons variations (ShimmerButton, SheenButton, MetallicButton, SpotlightButton, HolographicButton) on the ai2 toke… | `npx shadcn@latest add https://ai2.design/r/buttons-shiny.json` |
| buttons-stroke | registry:component | Styled buttons: the Stroke set. 5 decorative buttons variations (RotateStrokeButton, BeamButton, GradientStrokeButton, CornersButton, GrowRingButton) on the ai… | `npx shadcn@latest add https://ai2.design/r/buttons-stroke.json` |
| buttons-text-animated | registry:component | Styled buttons: the Text-animated set. 5 decorative buttons variations (BounceTextButton, WaveTextButton, RevealTextButton, FlipTextButton, SlideTextButton) on… | `npx shadcn@latest add https://ai2.design/r/buttons-text-animated.json` |
| inputs-glass | registry:component | Styled inputs: the Glass set. 5 decorative inputs variations (FrostInput, TintInput, CrystalInput, SmokeInput, DepthGlassInput) on the ai2 token system, driven… | `npx shadcn@latest add https://ai2.design/r/inputs-glass.json` |
| inputs-magnetic | registry:component | Styled inputs: the Magnetic set. 5 decorative inputs variations (TiltInput, GlowTrailInput, ExpandInput, ShakeInput, SpotlightInput) on the ai2 token system, p… | `npx shadcn@latest add https://ai2.design/r/inputs-magnetic.json` |
| inputs-otp | registry:component | Styled inputs: the OTP set. 5 decorative inputs variations (PinInput, SegmentInput, CodeInput, MaskedInput, StepperInput) on the ai2 token system, driven by CS… | `npx shadcn@latest add https://ai2.design/r/inputs-otp.json` |
| inputs-styled | registry:component | Styled inputs: the essentials set. 5 decorative inputs variations (UnderlineInput, FloatInput, GlowInput, FilledInput, IconInput) on the ai2 token system, driv… | `npx shadcn@latest add https://ai2.design/r/inputs-styled.json` |
| inputs-typewriter | registry:component | Styled inputs: the Typewriter set. 5 decorative inputs variations (TypewriterInput, CyclePlaceholderInput, CaretInput, GhostInput, MorphLabelInput) on the ai2 … | `npx shadcn@latest add https://ai2.design/r/inputs-typewriter.json` |
| inputs-validation | registry:component | Styled inputs: the Validation set. 5 decorative inputs variations (SuccessInput, ErrorInput, LiveInput, StrengthInput, CharCountInput) on the ai2 token system,… | `npx shadcn@latest add https://ai2.design/r/inputs-validation.json` |
| loaders-dna | registry:component | Styled loaders: the DNA set. 5 decorative loaders variations (HelixLoader, LadderLoader, TwistLoader, CoilLoader, WeaveLoader) on the ai2 token system, powered… | `npx shadcn@latest add https://ai2.design/r/loaders-dna.json` |
| loaders-morph | registry:component | Styled loaders: the Morph set. 5 decorative loaders variations (BlobLoader, FlipLoader, StretchLoader, TriadLoader, SpinSquareLoader) on the ai2 token system, … | `npx shadcn@latest add https://ai2.design/r/loaders-morph.json` |
| loaders-orbital | registry:component | Styled loaders: the Orbital set. 5 decorative loaders variations (SolarLoader, BinaryLoader, CometLoader, SatelliteLoader, GyroLoader) on the ai2 token system,… | `npx shadcn@latest add https://ai2.design/r/loaders-orbital.json` |
| loaders-particle | registry:component | Styled loaders: the Particle set. 5 decorative loaders variations (SwarmLoader, ScatterLoader, ConvergeLoader, TrailLoader, FireflyLoader) on the ai2 token sys… | `npx shadcn@latest add https://ai2.design/r/loaders-particle.json` |
| loaders-skeleton | registry:component | Styled loaders: the Skeleton set. 5 decorative loaders variations (LineSkeleton, CardSkeleton, AvatarSkeleton, TextSkeleton, ListSkeleton) on the ai2 token sys… | `npx shadcn@latest add https://ai2.design/r/loaders-skeleton.json` |
| loaders-styled | registry:component | Styled loaders: the essentials set. 5 decorative loaders variations (DotsLoader, BarsLoader, RingLoader, PulseLoader, OrbitLoader) on the ai2 token system, pow… | `npx shadcn@latest add https://ai2.design/r/loaders-styled.json` |
| loaders-text | registry:component | Styled loaders: the Text set. 5 decorative loaders variations (TypingLoader, EllipsisLoader, ScrambleLoader, WaveTextLoader, BlinkLoader) on the ai2 token syst… | `npx shadcn@latest add https://ai2.design/r/loaders-text.json` |
| progress-circular | registry:component | Styled progress: the Circular set. 5 decorative progress variations (RingProgress, ConicProgress, DualRingProgress, DashRingProgress, GlowRingProgress) on the … | `npx shadcn@latest add https://ai2.design/r/progress-circular.json` |
| progress-indeterminate | registry:component | Styled progress: the Indeterminate set. 5 decorative progress variations (BarSweepProgress, DualBarProgress, PulseTrackProgress, MarchProgress, CometProgress) … | `npx shadcn@latest add https://ai2.design/r/progress-indeterminate.json` |
| progress-liquid | registry:component | Styled progress: the Liquid set. 5 decorative progress variations (WaveProgress, BubbleProgress, TideProgress, DropProgress, FoamProgress) on the ai2 token sys… | `npx shadcn@latest add https://ai2.design/r/progress-liquid.json` |
| progress-stepped | registry:component | Styled progress: the Stepped set. 5 decorative progress variations (StepsProgress, DotsStepProgress, NumberedProgress, CheckStepProgress, PillStepProgress) on … | `npx shadcn@latest add https://ai2.design/r/progress-stepped.json` |
| progress-styled | registry:component | Styled progress: the essentials set. 5 decorative progress variations (StripedProgress, GradientProgress, GlowProgress, SegmentedProgress, ShimmerProgress) on … | `npx shadcn@latest add https://ai2.design/r/progress-styled.json` |
| progress-threed | registry:component | Styled progress: the 3D set. 5 decorative progress variations (RaisedProgress, TubeProgress, BevelProgress, GlossProgress, InsetProgress) on the ai2 token syst… | `npx shadcn@latest add https://ai2.design/r/progress-threed.json` |
| toggles-3d | registry:component | Styled toggles: the 3D set. 5 decorative toggles variations (RaisedToggle, PillPressToggle, TactileToggle, DomeToggle, SwitchLeverToggle) on the ai2 token syst… | `npx shadcn@latest add https://ai2.design/r/toggles-3d.json` |
| toggles-liquid | registry:component | Styled toggles: the Liquid set. 5 decorative toggles variations (LiquidToggle, BlobToggle, DropToggle, WaveToggle, MercuryToggle) on the ai2 token system, powe… | `npx shadcn@latest add https://ai2.design/r/toggles-liquid.json` |
| toggles-neon | registry:component | Styled toggles: the Neon set. 5 decorative toggles variations (NeonToggle, OutlineNeonToggle, PulseNeonToggle, TubeToggle, FlickerToggle) on the ai2 token syst… | `npx shadcn@latest add https://ai2.design/r/toggles-neon.json` |
| toggles-particle | registry:component | Styled toggles: the Particle set. 5 decorative toggles variations (ParticleToggle, SparkToggle, TrailToggle, ConfettiToggle, CometToggle) on the ai2 token syst… | `npx shadcn@latest add https://ai2.design/r/toggles-particle.json` |
| toggles-styled | registry:component | Styled toggles: the essentials set. 5 decorative toggles variations (IOSToggle, SquareToggle, IconToggle, GlowToggle, LabeledToggle) on the ai2 token system, p… | `npx shadcn@latest add https://ai2.design/r/toggles-styled.json` |
| toggles-themed | registry:component | Styled toggles: the Themed set. 5 decorative toggles variations (DayNightToggle, CheckXToggle, OnOffToggle, EyeToggle, LockToggle) on the ai2 token system, pow… | `npx shadcn@latest add https://ai2.design/r/toggles-themed.json` |
| tooltips-animated | registry:component | Styled tooltips: the Animated set. 5 decorative tooltips variations (PopTooltip, FlipTooltip, SwingTooltip, TypeTooltip, GlowInTooltip) on the ai2 token system… | `npx shadcn@latest add https://ai2.design/r/tooltips-animated.json` |
| tooltips-interactive | registry:component | Styled tooltips: the Interactive set. 5 decorative tooltips variations (ScaleTooltip, UnderlineTooltip, LiftTooltip, FadeScaleTooltip, DelayTooltip) on the ai2… | `npx shadcn@latest add https://ai2.design/r/tooltips-interactive.json` |
| tooltips-magnetic | registry:component | Styled tooltips: the Magnetic set. 5 decorative tooltips variations (MagneticTooltip, FloatTooltip, TiltTooltip, SpotlightTooltip, ParallaxTooltip) on the ai2 … | `npx shadcn@latest add https://ai2.design/r/tooltips-magnetic.json` |
| tooltips-rich | registry:component | Styled tooltips: the Rich set. 5 decorative tooltips variations (TitleTooltip, IconTooltip, KbdTooltip, MediaTooltip, MenuTooltip) on the ai2 token system, dri… | `npx shadcn@latest add https://ai2.design/r/tooltips-rich.json` |
| tooltips-shape | registry:component | Styled tooltips: the Shape set. 5 decorative tooltips variations (BubbleTooltip, PillTooltip, NotchTooltip, CalloutTooltip, BadgeTooltip) on the ai2 token syst… | `npx shadcn@latest add https://ai2.design/r/tooltips-shape.json` |
| tooltips-styled | registry:component | Styled tooltips: the essentials set. 5 decorative tooltips variations (GlassTooltip, GradientTooltip, ArrowTooltip, DarkTooltip, SlideTooltip) on the ai2 token… | `npx shadcn@latest add https://ai2.design/r/tooltips-styled.json` |
| alert-styled | registry:component | Styled alert: the essentials set. 5 decorative alert variations (SoftAlert, LeftBarAlert, GlassAlert, GlowAlert, IconPulseAlert) on the ai2 token system, power… | `npx shadcn@latest add https://ai2.design/r/alert-styled.json` |
| card-styled | registry:component | Styled card: the essentials set. 5 decorative card variations (GlassCard, GradientBorderCard, GlowCard, TiltCard, SpotlightCard) on the ai2 token system, power… | `npx shadcn@latest add https://ai2.design/r/card-styled.json` |
| checkbox-styled | registry:component | Styled checkbox: the essentials set. 5 decorative checkbox variations (FillCheckbox, BounceCheckbox, DrawCheckbox, GlowCheckbox, RoundedCheckbox) on the ai2 to… | `npx shadcn@latest add https://ai2.design/r/checkbox-styled.json` |
| separator-styled | registry:component | Styled separator: the essentials set. 5 decorative separator variations (GradientSeparator, DashedSeparator, LabelSeparator, IconSeparator, GlowSeparator) on t… | `npx shadcn@latest add https://ai2.design/r/separator-styled.json` |
| skeleton-styled | registry:component | Styled skeleton: the essentials set. 5 decorative skeleton variations (ShimmerSkeleton, PulseSkeleton, WaveSkeleton, GradientSkeleton, GlowSkeleton) on the ai2… | `npx shadcn@latest add https://ai2.design/r/skeleton-styled.json` |
| textarea-styled | registry:component | Styled textarea: the essentials set. 5 decorative textarea variations (UnderlineTextarea, FloatTextarea, GlowTextarea, FilledTextarea, CountTextarea) on the ai… | `npx shadcn@latest add https://ai2.design/r/textarea-styled.json` |
| accordion-styled | registry:component | Styled accordion: the essentials set. 5 decorative accordion variations (BorderedAccordion, SeparatedAccordion, FilledAccordion, GhostAccordion, PlusAccordion)… | `npx shadcn@latest add https://ai2.design/r/accordion-styled.json` |
| kbd-styled | registry:component | Styled kbd: the essentials set. 5 decorative kbd variations (RaisedKbd, FlatKbd, GlowKbd, OutlineKbd, SoftKbd) on the ai2 token system, driven by CSS token tra… | `npx shadcn@latest add https://ai2.design/r/kbd-styled.json` |
| label-styled | registry:component | Styled label: the essentials set. 5 decorative label variations (RequiredLabel, UppercaseLabel, PillLabel, IconLabel, GradientLabel) on the ai2 token system, d… | `npx shadcn@latest add https://ai2.design/r/label-styled.json` |
| radio-group-styled | registry:component | Styled radio: the Group-styled set. 5 decorative radio variations (SegmentedRadio, CardRadio, PillRadio, DotRadio, IconRadio) on the ai2 token system, powered … | `npx shadcn@latest add https://ai2.design/r/radio-group-styled.json` |
| slider-styled | registry:component | Styled slider: the essentials set. 5 decorative slider variations (GradientSlider, GlowSlider, TicksSlider, BubbleSlider, ThickSlider) on the ai2 token system,… | `npx shadcn@latest add https://ai2.design/r/slider-styled.json` |
| tabs-styled | registry:component | Styled tabs: the essentials set. 5 decorative tabs variations (UnderlineTabs, PillTabs, SegmentedTabs, BoxedTabs, IconTabs) on the ai2 token system, powered by… | `npx shadcn@latest add https://ai2.design/r/tabs-styled.json` |
| alert-dialog-styled | registry:component | Styled alert: the Dialog-styled set. 5 decorative alert variations (ConfirmAlert, DestructiveAlert, InfoAlert, SuccessAlert, IconAlert) on the ai2 token system… | `npx shadcn@latest add https://ai2.design/r/alert-dialog-styled.json` |
| dialog-styled | registry:component | Styled dialog: the essentials set. 5 decorative dialog variations (CenterDialog, SlideUpDialog, GlassDialog, FullscreenDialog, DropDialog) on the ai2 token sys… | `npx shadcn@latest add https://ai2.design/r/dialog-styled.json` |
| drawer-styled | registry:component | Styled drawer: the essentials set. 5 decorative drawer variations (BottomDrawer, TopDrawer, GlassDrawer, RoundedDrawer, SnapDrawer) on the ai2 token system, po… | `npx shadcn@latest add https://ai2.design/r/drawer-styled.json` |
| hover-card-styled | registry:component | Styled hover: the Card-styled set. 5 decorative hover variations (ProfileHoverCard, GlassHoverCard, PreviewHoverCard, StatsHoverCard, MediaHoverCard) on the ai… | `npx shadcn@latest add https://ai2.design/r/hover-card-styled.json` |
| popover-styled | registry:component | Styled popover: the essentials set. 5 decorative popover variations (ArrowPopover, GlassPopover, MenuPopover, FormPopover, RichPopover) on the ai2 token system… | `npx shadcn@latest add https://ai2.design/r/popover-styled.json` |
| sheet-styled | registry:component | Styled sheet: the essentials set. 5 decorative sheet variations (RightSheet, LeftSheet, TopSheet, BottomSheet, GlassSheet) on the ai2 token system, powered by … | `npx shadcn@latest add https://ai2.design/r/sheet-styled.json` |
| breadcrumb-styled | registry:component | Styled breadcrumb: the essentials set. 5 decorative breadcrumb variations (SlashBreadcrumb, ChevronBreadcrumb, PillBreadcrumb, ArrowBreadcrumb, DotBreadcrumb) … | `npx shadcn@latest add https://ai2.design/r/breadcrumb-styled.json` |
| command-styled | registry:component | Styled command: the essentials set. 5 decorative command variations (SimpleCommand, GroupedCommand, IconCommand, GlassCommand, KbdCommand) on the ai2 token sys… | `npx shadcn@latest add https://ai2.design/r/command-styled.json` |
| context-menu-styled | registry:component | Styled context: the Menu-styled set. 5 decorative context variations (SimpleContextMenu, IconContextMenu, ShortcutContextMenu, SectionContextMenu, DangerContex… | `npx shadcn@latest add https://ai2.design/r/context-menu-styled.json` |
| dropdown-menu-styled | registry:component | Styled dropdown: the Menu-styled set. 5 decorative dropdown variations (SimpleMenu, IconMenu, SectionMenu, CheckMenu, RichMenu) on the ai2 token system, powere… | `npx shadcn@latest add https://ai2.design/r/dropdown-menu-styled.json` |
| menubar-styled | registry:component | Styled menubar: the essentials set. 5 decorative menubar variations (BarMenubar, PillMenubar, GlassMenubar, MinimalMenubar, IconMenubar) on the ai2 token syste… | `npx shadcn@latest add https://ai2.design/r/menubar-styled.json` |
| pagination-styled | registry:component | Styled pagination: the essentials set. 5 decorative pagination variations (NumberedPagination, ArrowsPagination, DotsPagination, PillPagination, MinimalPaginat… | `npx shadcn@latest add https://ai2.design/r/pagination-styled.json` |
| combobox-styled | registry:component | Styled combobox: the essentials set. 5 decorative combobox variations (SimpleCombobox, GlassCombobox, IconCombobox, TagsCombobox, InlineCombobox) on the ai2 to… | `npx shadcn@latest add https://ai2.design/r/combobox-styled.json` |
| field-styled | registry:component | Styled field: the essentials set. 5 decorative field variations (StackedField, FloatingField, InlineField, CardField, BorderedField) on the ai2 token system, d… | `npx shadcn@latest add https://ai2.design/r/field-styled.json` |
| file-input-styled | registry:component | Styled file: the Input-styled set. 5 decorative file variations (DropzoneFile, ButtonFile, AvatarFile, ListFile, GlassFile) on the ai2 token system, powered by… | `npx shadcn@latest add https://ai2.design/r/file-input-styled.json` |
| input-group-styled | registry:component | Styled input: the Group-styled set. 5 decorative input variations (PrefixGroup, SuffixGroup, IconGroup, ButtonGroup, SegmentGroup) on the ai2 token system, dri… | `npx shadcn@latest add https://ai2.design/r/input-group-styled.json` |
| input-otp-styled | registry:component | Styled input: the Otp-styled set. 5 decorative input variations (BoxOtp, UnderlineOtp, RoundedOtp, SeparatedOtp, FilledOtp) on the ai2 token system, powered by… | `npx shadcn@latest add https://ai2.design/r/input-otp-styled.json` |
| select-styled | registry:component | Styled select: the essentials set. 5 decorative select variations (SimpleSelect, GlassSelect, IconSelect, PillSelect, GroupedSelect) on the ai2 token system, p… | `npx shadcn@latest add https://ai2.design/r/select-styled.json` |
| button-group-styled | registry:component | Styled button: the Group-styled set. 5 decorative button variations (AttachedGroup, SplitGroup, ToolbarGroup, PillGroup, StepperGroup) on the ai2 token system,… | `npx shadcn@latest add https://ai2.design/r/button-group-styled.json` |
| calendar-styled | registry:component | Styled calendar: the essentials set. 5 decorative calendar variations (ClassicCalendar, RoundedCalendar, CompactCalendar, GlassCalendar, RangeCalendar) on the … | `npx shadcn@latest add https://ai2.design/r/calendar-styled.json` |
| date-picker-styled | registry:component | Styled date: the Picker-styled set. 5 decorative date variations (SimpleDatePicker, RangeDatePicker, GlassDatePicker, InlineDatePicker, IconDatePicker) on the … | `npx shadcn@latest add https://ai2.design/r/date-picker-styled.json` |
| item-styled | registry:component | Styled item: the essentials set. 5 decorative item variations (SimpleItem, IconItem, AvatarItem, ActionItem, CardItem) on the ai2 token system, driven by CSS t… | `npx shadcn@latest add https://ai2.design/r/item-styled.json` |
| table-styled | registry:component | Styled table: the essentials set. 5 decorative table variations (StripedTable, BorderedTable, HoverGlowTable, CompactTable, CardTable) on the ai2 token system,… | `npx shadcn@latest add https://ai2.design/r/table-styled.json` |
| toggle-group-styled | registry:component | Styled toggle: the Group-styled set. 5 decorative toggle variations (SegmentedToggleGroup, PillToggleGroup, IconToggleGroup, OutlineToggleGroup, GhostToggleGro… | `npx shadcn@latest add https://ai2.design/r/toggle-group-styled.json` |
| carousel-styled | registry:component | Styled carousel: the essentials set. 5 decorative carousel variations (SlideCarousel, FadeCarousel, CardsCarousel, DotsCarousel, AutoCarousel) on the ai2 token… | `npx shadcn@latest add https://ai2.design/r/carousel-styled.json` |
| collapsible-styled | registry:component | Styled collapsible: the essentials set. 5 decorative collapsible variations (SimpleCollapsible, CardCollapsible, GhostCollapsible, PlusCollapsible, PreviewColl… | `npx shadcn@latest add https://ai2.design/r/collapsible-styled.json` |
| empty-styled | registry:component | Styled empty: the essentials set. 5 decorative empty variations (SimpleEmpty, IconEmpty, IllustrationEmpty, ActionEmpty, CardEmpty) on the ai2 token system, dr… | `npx shadcn@latest add https://ai2.design/r/empty-styled.json` |
| resizable-styled | registry:component | Styled resizable: the essentials set. 5 decorative resizable variations (HorizontalResizable, VerticalResizable, HandleResizable, NestedResizable, GlassResizab… | `npx shadcn@latest add https://ai2.design/r/resizable-styled.json` |
| scroll-area-styled | registry:component | Styled scroll: the Area-styled set. 5 decorative scroll variations (ThinScrollArea, RoundedScrollArea, ColoredScrollArea, OverlayScrollArea, BothScrollArea) on… | `npx shadcn@latest add https://ai2.design/r/scroll-area-styled.json` |
| sonner-styled | registry:component | Styled sonner: the essentials set. 5 decorative sonner variations (SimpleToaster, ToneToaster, GlassToaster, ActionToaster, PromiseToaster) on the ai2 token sy… | `npx shadcn@latest add https://ai2.design/r/sonner-styled.json` |
| dialog-blur | registry:component | Styled dialog: the Blur set. 5 decorative dialog variations (SoftBlurDialog, HeavyBlurDialog, DarkBlurDialog, TintBlurDialog, GradientBlurDialog) on the ai2 to… | `npx shadcn@latest add https://ai2.design/r/dialog-blur.json` |
| dialog-bordered | registry:component | Styled dialog: the Bordered set. 5 decorative dialog variations (RingDialog, GlowDialog, GradientBorderDialog, InsetDialog, AccentBarDialog) on the ai2 token s… | `npx shadcn@latest add https://ai2.design/r/dialog-bordered.json` |
| dialog-corner | registry:component | Styled dialog: the Corner set. 5 decorative dialog variations (TopRightDialog, BottomRightDialog, TopCenterDialog, DockedDialog, OffsetDialog) on the ai2 token… | `npx shadcn@latest add https://ai2.design/r/dialog-corner.json` |
| dialog-header | registry:component | Styled dialog: the Header set. 5 decorative dialog variations (AccentHeaderDialog, IconHeaderDialog, GradientHeaderDialog, StickyHeaderDialog, DividerHeaderDia… | `npx shadcn@latest add https://ai2.design/r/dialog-header.json` |
| dialog-motion | registry:component | Styled dialog: the Motion set. 5 decorative dialog variations (FlipDialog, SwingDialog, ZoomDialog, ElasticDialog, RotateDialog) on the ai2 token system, power… | `npx shadcn@latest add https://ai2.design/r/dialog-motion.json` |
| alert-dialog-accent | registry:component | Styled alert: the Dialog-accent set. 5 decorative alert variations (TopBarAlert, SideBarAlert, RingAlert, GlowAlert, FillAlert) on the ai2 token system, powere… | `npx shadcn@latest add https://ai2.design/r/alert-dialog-accent.json` |
| alert-dialog-glass | registry:component | Styled alert: the Dialog-glass set. 5 decorative alert variations (FrostAlert, TintAlert, DarkAlert, BlurAlert, CrystalAlert) on the ai2 token system, powered … | `npx shadcn@latest add https://ai2.design/r/alert-dialog-glass.json` |
| alert-dialog-illustration | registry:component | Styled alert: the Dialog-illustration set. 5 decorative alert variations (SpotlightAlert, BadgeAlert, CircleAlert, GradientAlert, BannerAlert) on the ai2 token… | `npx shadcn@latest add https://ai2.design/r/alert-dialog-illustration.json` |
| alert-dialog-layout | registry:component | Styled alert: the Dialog-layout set. 5 decorative alert variations (CenteredAlert, HorizontalAlert, CompactAlert, WideAlert, SplitAlert) on the ai2 token syste… | `npx shadcn@latest add https://ai2.design/r/alert-dialog-layout.json` |
| alert-dialog-motion | registry:component | Styled alert: the Dialog-motion set. 5 decorative alert variations (ShakeAlert, PopAlert, DropAlert, ZoomAlert, SlideAlert) on the ai2 token system, powered by… | `npx shadcn@latest add https://ai2.design/r/alert-dialog-motion.json` |
| sheet-blur | registry:component | Styled sheet: the Blur set. 5 decorative sheet variations (SoftBlurSheet, HeavyBlurSheet, DarkBlurSheet, TintBlurSheet, GradientBlurSheet) on the ai2 token sys… | `npx shadcn@latest add https://ai2.design/r/sheet-blur.json` |
| sheet-content | registry:component | Styled sheet: the Content set. 5 decorative sheet variations (MenuSheet, FormSheet, ListSheet, DetailSheet, SplitSheet) on the ai2 token system, powered by fra… | `npx shadcn@latest add https://ai2.design/r/sheet-content.json` |
| sheet-header | registry:component | Styled sheet: the Header set. 5 decorative sheet variations (TitleSheet, StickySheet, FooterSheet, DividerSheet, AccentSheet) on the ai2 token system, powered … | `npx shadcn@latest add https://ai2.design/r/sheet-header.json` |
| sheet-inset | registry:component | Styled sheet: the Inset set. 5 decorative sheet variations (FloatingSheet, RoundedSheet, MarginSheet, CardSheet, PillSheet) on the ai2 token system, powered by… | `npx shadcn@latest add https://ai2.design/r/sheet-inset.json` |
| sheet-motion | registry:component | Styled sheet: the Motion set. 5 decorative sheet variations (SlideSheet, SpringSheet, FadeSheet, ScaleSheet, OvershootSheet) on the ai2 token system, powered b… | `npx shadcn@latest add https://ai2.design/r/sheet-motion.json` |
| hover-card-accent | registry:component | Styled hover: the Card-accent set. 5 decorative hover variations (BorderHoverCard, GlowHoverCard, RingHoverCard, TopBarHoverCard, FillHoverCard) on the ai2 tok… | `npx shadcn@latest add https://ai2.design/r/hover-card-accent.json` |
| hover-card-layout | registry:component | Styled hover: the Card-layout set. 5 decorative hover variations (HorizontalHoverCard, CompactHoverCard, WideHoverCard, StackedHoverCard, SplitHoverCard) on th… | `npx shadcn@latest add https://ai2.design/r/hover-card-layout.json` |
| hover-card-motion | registry:component | Styled hover: the Card-motion set. 5 decorative hover variations (FadeHoverCard, ScaleHoverCard, SlideHoverCard, PopHoverCard, SpringHoverCard) on the ai2 toke… | `npx shadcn@latest add https://ai2.design/r/hover-card-motion.json` |
| hover-card-placement | registry:component | Styled hover: the Card-placement set. 5 decorative hover variations (TopHoverCard, BottomHoverCard, LeftHoverCard, RightHoverCard, FollowHoverCard) on the ai2 … | `npx shadcn@latest add https://ai2.design/r/hover-card-placement.json` |
| hover-card-tone | registry:component | Styled hover: the Card-tone set. 5 decorative hover variations (PrimaryHoverCard, SuccessHoverCard, WarningHoverCard, DangerHoverCard, InfoHoverCard) on the ai… | `npx shadcn@latest add https://ai2.design/r/hover-card-tone.json` |
| popover-accent | registry:component | Styled popover: the Accent set. 5 decorative popover variations (BorderPopover, GlowPopover, RingPopover, TopBarPopover, FillPopover) on the ai2 token system, … | `npx shadcn@latest add https://ai2.design/r/popover-accent.json` |
| popover-compact | registry:component | Styled popover: the Compact set. 5 decorative popover variations (MiniPopover, DensePopover, WidePopover, TallPopover, SplitPopover) on the ai2 token system, p… | `npx shadcn@latest add https://ai2.design/r/popover-compact.json` |
| popover-motion | registry:component | Styled popover: the Motion set. 5 decorative popover variations (FadePopover, ScalePopover, SlidePopover, PopPopover, SpringPopover) on the ai2 token system, p… | `npx shadcn@latest add https://ai2.design/r/popover-motion.json` |
| popover-placement | registry:component | Styled popover: the Placement set. 5 decorative popover variations (TopPopover, BottomPopover, LeftPopover, RightPopover, CornerPopover) on the ai2 token syste… | `npx shadcn@latest add https://ai2.design/r/popover-placement.json` |
| popover-tone | registry:component | Styled popover: the Tone set. 5 decorative popover variations (PrimaryPopover, SuccessPopover, WarningPopover, DangerPopover, InfoPopover) on the ai2 token sys… | `npx shadcn@latest add https://ai2.design/r/popover-tone.json` |
| drawer-blur | registry:component | Styled drawer: the Blur set. 5 decorative drawer variations (SoftBlurDrawer, HeavyBlurDrawer, DarkBlurDrawer, TintBlurDrawer, GradientBlurDrawer) on the ai2 to… | `npx shadcn@latest add https://ai2.design/r/drawer-blur.json` |
| drawer-content | registry:component | Styled drawer: the Content set. 5 decorative drawer variations (MenuDrawer, FormDrawer, ListDrawer, DetailDrawer, GridDrawer) on the ai2 token system, powered … | `npx shadcn@latest add https://ai2.design/r/drawer-content.json` |
| drawer-header | registry:component | Styled drawer: the Header set. 5 decorative drawer variations (TitleDrawer, StickyDrawer, FooterDrawer, HandleDrawer, DividerDrawer) on the ai2 token system, p… | `npx shadcn@latest add https://ai2.design/r/drawer-header.json` |
| drawer-motion | registry:component | Styled drawer: the Motion set. 5 decorative drawer variations (SlideDrawer, SpringDrawer, FadeDrawer, ScaleDrawer, OvershootDrawer) on the ai2 token system, po… | `npx shadcn@latest add https://ai2.design/r/drawer-motion.json` |
| drawer-side | registry:component | Styled drawer: the Side set. 5 decorative drawer variations (RightDrawer, LeftDrawer, RightInsetDrawer, LeftInsetDrawer, CornerDrawer) on the ai2 token system,… | `npx shadcn@latest add https://ai2.design/r/drawer-side.json` |
| accordion-accent | registry:component | Styled accordion: the Accent set. 5 decorative accordion variations (BarAccordion, GrowAccordion, GlowAccordion, LeftAccordion, FullAccordion) on the ai2 token… | `npx shadcn@latest add https://ai2.design/r/accordion-accent.json` |
| accordion-glass | registry:component | Styled accordion: the Glass set. 5 decorative accordion variations (FrostAccordion, TintAccordion, SmokeAccordion, CrystalAccordion, DepthAccordion) on the ai2… | `npx shadcn@latest add https://ai2.design/r/accordion-glass.json` |
| accordion-numbered | registry:component | Styled accordion: the Numbered set. 5 decorative accordion variations (CircleAccordion, SquareAccordion, OutlineAccordion, FilledAccordion, GhostAccordion) on … | `npx shadcn@latest add https://ai2.design/r/accordion-numbered.json` |
| accordion-timeline | registry:component | Styled accordion: the Timeline set. 5 decorative accordion variations (LineAccordion, DashedAccordion, NodeAccordion, FilledAccordion, GradientAccordion) on th… | `npx shadcn@latest add https://ai2.design/r/accordion-timeline.json` |
| accordion-underline | registry:component | Styled accordion: the Underline set. 5 decorative accordion variations (SweepAccordion, CenterAccordion, GrowAccordion, DoubleAccordion, DashedAccordion) on th… | `npx shadcn@latest add https://ai2.design/r/accordion-underline.json` |
| carousel-coverflow | registry:component | Styled carousel: the Coverflow set. 5 decorative carousel variations (FlowCarousel, DeepCarousel, TiltCarousel, FanCarousel, StackCarousel) on the ai2 token sy… | `npx shadcn@latest add https://ai2.design/r/carousel-coverflow.json` |
| carousel-fraction | registry:component | Styled carousel: the Fraction set. 5 decorative carousel variations (CounterCarousel, BarCarousel, RingCarousel, CornerCarousel, CombinedCarousel) on the ai2 t… | `npx shadcn@latest add https://ai2.design/r/carousel-fraction.json` |
| carousel-parallax | registry:component | Styled carousel: the Parallax set. 5 decorative carousel variations (SoftCarousel, DeepCarousel, LayeredCarousel, TiltCarousel, ZoomCarousel) on the ai2 token … | `npx shadcn@latest add https://ai2.design/r/carousel-parallax.json` |
| carousel-thumbnails | registry:component | Styled carousel: the Thumbnails set. 5 decorative carousel variations (BelowCarousel, SideCarousel, DotsThumbsCarousel, ScaledCarousel, BorderedCarousel) on th… | `npx shadcn@latest add https://ai2.design/r/carousel-thumbnails.json` |
| carousel-vertical | registry:component | Styled carousel: the Vertical set. 5 decorative carousel variations (SlideCarousel, FadeCarousel, CardsCarousel, DotsCarousel, StackCarousel) on the ai2 token … | `npx shadcn@latest add https://ai2.design/r/carousel-vertical.json` |
| collapsible-accent | registry:component | Styled collapsible: the Accent set. 5 decorative collapsible variations (BarCollapsible, GrowCollapsible, GlowCollapsible, LeftCollapsible, FullCollapsible) on… | `npx shadcn@latest add https://ai2.design/r/collapsible-accent.json` |
| collapsible-glass | registry:component | Styled collapsible: the Glass set. 5 decorative collapsible variations (FrostCollapsible, TintCollapsible, SmokeCollapsible, CrystalCollapsible, DepthCollapsib… | `npx shadcn@latest add https://ai2.design/r/collapsible-glass.json` |
| collapsible-notice | registry:component | Styled collapsible: the Notice set. 5 decorative collapsible variations (InfoCollapsible, SuccessCollapsible, WarningCollapsible, DangerCollapsible, MutedColla… | `npx shadcn@latest add https://ai2.design/r/collapsible-notice.json` |
| collapsible-split | registry:component | Styled collapsible: the Split set. 5 decorative collapsible variations (PillCollapsible, SquareCollapsible, GhostCollapsible, OutlineCollapsible, FilledCollaps… | `npx shadcn@latest add https://ai2.design/r/collapsible-split.json` |
| collapsible-underline | registry:component | Styled collapsible: the Underline set. 5 decorative collapsible variations (SweepCollapsible, CenterCollapsible, GrowCollapsible, DoubleCollapsible, DashedColl… | `npx shadcn@latest add https://ai2.design/r/collapsible-underline.json` |
| resizable-accent | registry:component | Styled resizable: the Accent set. 5 decorative resizable variations (BarResizable, GlowResizable, RingResizable, FillResizable, EdgeResizable) on the ai2 token… | `npx shadcn@latest add https://ai2.design/r/resizable-accent.json` |

## For AI agents

```text
You are adding components from @ai2 to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/ai2.md) for the component list.
2. Fetch the machine-readable index: https://ai2.design/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: ai2).
```