Production components, packaged for agents and teams.

Accordion on radix-ui with 3 variants (default divided rows, separated cards, outline boxed) plus animated open/close (ai2 motion tokens) and a rotating chevron. Variant flows from Accordion to every item via context. Exports Accordion, AccordionItem, AccordionTrigger, AccordionContent.

Alert with a variant x tone matrix: 2 variants (soft, outline) x 6 tones. Optional leading icon, AlertTitle and AlertDescription. role=alert.

Confirmation dialog on radix-ui AlertDialog for destructive or irreversible actions. Action button defaults to the danger tone; cancel is focused first per WAI-ARIA.

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 into a +N tile. Exports Avatar, AvatarImage, AvatarFallback, AvatarGroup.

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 children. Supports asChild for links.

Accessible breadcrumb (nav + ordered list) with link, current page, separator and ellipsis parts. Semantic aria-current on the active page.

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 sizes (xs-xl plus square icon-xs through icon-xl for icon-only buttons), plus isLoading and asChild. Every tone is driven by ai2 semantic tokens.

Joins buttons, inputs and selects into a single segmented control on horizontal or vertical orientation, collapsing inner radii and borders. Exports ButtonGroup, ButtonGroupText, ButtonGroupSeparator.

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 numbers. Exports Calendar, CalendarDayButton.

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, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter.

Slider/carousel on embla-carousel-react with horizontal or vertical orientation, keyboard support and prev/next controls built from ai2 Button. Exports Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext.

Checkbox on radix-ui with 4 tones (neutral, brand, success, danger) and 3 sizes (sm, md, lg). Invalid state via aria-invalid.

Single expand/collapse region on radix-ui. Exports Collapsible, CollapsibleTrigger, CollapsibleContent. Unstyled by design so it composes into any layout.

Searchable single-select built from Popover + Command. Trigger follows the Input contract: 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg), 3 tones (neutral, success, danger). Controlled or uncontrolled via value/defaultValue and onValueChange; options as {value, label} pairs.

Command palette (cmdk) with fuzzy search, groups, items, shortcuts and a CommandDialog wrapper for a ⌘K experience.

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 lucide svg and remixicon i. Exports the full ContextMenu part set.

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 shows a placeholder when empty.

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 breakpoint up while staying full width minus a margin on mobile. Exports Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose.

Draggable drawer on vaul with 4 directions (top, right, bottom, left), a drag handle on the bottom variant, overlay and snap behavior. Exports Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerClose, DrawerOverlay, DrawerPortal.

Full dropdown menu on radix-ui: items (default + danger variant), checkbox items, radio group, submenus, labels, separators and shortcuts. Keyboard navigable.

Empty-state placeholder: Empty wrapper with EmptyHeader, EmptyMedia (default or icon variant), EmptyTitle, EmptyDescription and EmptyContent for actions. Centered, balanced text, dashed-border ready.

Form field composition: Field, FieldControl, FieldLabel, FieldDescription, FieldError. Auto-wires accessibility: FieldControl (a Slot around any control) receives a generated id, aria-describedby pointing at the description and error, and aria-invalid; the label targets the control automatically. invalid/disabled props drive data attributes, label color and dimming. orientation switches vertical (default) and horizontal (label-left, e.g. switch rows).

Styled file picker: hidden native input under a custom surface with a leading icon (lucide or remixicon), placeholder or selected file name, multiple-file count and an optional clear button. Follows the Input contract: 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg), 3 tones (neutral, success, danger). States: empty, selected, disabled, invalid via aria-invalid.

Rich hover preview on radix-ui with portal, directional slide/zoom animations and 3 content sizes (sm, md, lg). Exports HoverCard, HoverCardTrigger, HoverCardContent.

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 color. Invalid state also via aria-invalid.

Composable input shell: InputGroup carries the field appearance with 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg) and 3 tones (neutral, success, danger); InputGroupInput/InputGroupTextarea render transparent controls inside; InputGroupAddon places icons, text or buttons at inline-start, inline-end, block-start or block-end; InputGroupText and InputGroupButton for addon content.

One-time-passcode input on input-otp with individual slots, a blinking fake caret, active-slot ring and aria-invalid danger styling. Exports InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator.

List/row primitive with 3 variants (default, outline, muted) and 2 sizes (default, sm). Parts: Item, ItemGroup, ItemMedia (default/icon/image), ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator. asChild renders the row as a link.

Keyboard key hint styled with the ai2 mono font and surface tokens. Use for shortcuts and command hints.

Accessible form label built on radix-ui Label with 2 sizes (sm, md). Auto-dims when the associated control is disabled.

Application menu bar on radix-ui with top-level menus, items, checkbox and radio items, submenus, labels, separators and shortcuts. Item variant default or danger. Icons work with lucide svg and remixicon i. Exports the full Menubar part set.

Accessible pagination nav (previous/next, page links, ellipsis) styled with ai2 button variants. Current page gets aria-current.

Popover on radix-ui with portal, directional slide/zoom animations, 3 content sizes (sm, md, lg) and an optional anchor. Exports Popover, PopoverTrigger, PopoverContent, PopoverAnchor.

Progress bar on radix-ui with 6 tones (neutral, brand, success, warning, danger, info) and 3 sizes. Fill animates using ai2 motion tokens.

Radio group + item on radix-ui with 4 tones and 3 sizes. Exports RadioGroup and RadioGroupItem.

Resizable split panels on react-resizable-panels with horizontal or vertical groups and an optional drag handle. Exports ResizablePanelGroup, ResizablePanel, ResizableHandle.

Custom cross-browser scroll container on radix-ui with a thin token-colored scrollbar. Exports ScrollArea and ScrollBar (vertical or horizontal orientation).

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 items, labels, separators, scroll buttons, checkmark indicator; popper positioned with matching width.

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). Decorative by default with correct aria semantics when not.

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 directional slide animations using ai2 motion tokens.

Loading placeholder on the ai2 surface-3 token with 3 shapes (line, circle, rect) and 2 animations (pulse, none). Style dimensions via className.

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. Supports single and multi-thumb, horizontal and vertical.

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.

Loading spinner (lucide) with 3 tones (current, brand, muted) and 4 sizes (sm-xl). Has role=status and an aria-label.

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.

Composable table primitives (Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption) with hover rows, selected state and horizontal scroll. Table takes density (compact, comfortable, relaxed) and variant (line, striped, outline), both flowing to rows and cells via context.

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. Exports Tabs, TabsList, TabsTrigger, TabsContent.

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. Invalid state also via aria-invalid.

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 brand-soft (brand).

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.

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 works out of the box.