# Components

<!-- GENERATED by `scripts/gen-consumer-skills.mjs` — do not edit. Regenerate: `npm run consumer:gen` -->

39 components. Each row is one import subpath.

**Client** means the component ships `'use client'` — in a Next.js App
Router app it needs a client boundary at or above it. The others are
stateless and render in a Server Component untouched.

**all palettes** means `secondary` · `primary` · `tertiary` · `black` · `red` · `green` · `yellow` · `third` — the standard set, spelled out in `tokens.md`.

| Subpath | Exports | Client | Axes |
| --- | --- | --- | --- |
| `<pkg>/accordion` | `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`, `accordionVariants` | yes | `colorPalette`: all palettes<br>`variant`: `card` · `list` |
| `<pkg>/alert` | `Alert`, `AlertTitle`, `AlertDescription`, `alertVariants` | — | `colorPalette`: all palettes<br>`size`: `sm` · `md` · `lg`<br>`variant`: `solid` · `subtle` · `surface` · `outline` · `default` · `destructive` · `success` · `warning` |
| `<pkg>/avatar` | `Avatar`, `AvatarImage`, `AvatarFallback`, `AvatarBadge`, `AvatarGroup`, `AvatarGroupCount` | yes | `colorPalette`: all palettes<br>`size`: `sm` · `md` · `lg` · `2xs` · `xs` · `xl`<br>`variant`: `solid` · `subtle` · `outline` |
| `<pkg>/badge` | `Badge`, `badgeVariants` | yes | `colorPalette`: all palettes<br>`size`: `sm` · `md` · `lg` · `xs`<br>`variant`: `secondary` · `solid` · `subtle` · `surface` · `outline` · `default` · `destructive` · `success` · `warning` · `ghost` |
| `<pkg>/breadcrumb` | `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis` | yes | `colorPalette (BreadcrumbList)`: all palettes<br>`size (BreadcrumbList)`: `md` · `xs` |
| `<pkg>/button` | `Button`, `buttonVariants` | yes | `colorPalette`: all palettes<br>`size`: `sm` · `md` · `lg` · `xs` · `xl` · `icon-xs` · `icon-sm` · `icon` · `icon-lg`<br>`variant`: `secondary` · `link` · `solid` · `subtle` · `surface` · `outline` · `default` · `destructive` · `ghost` |
| `<pkg>/card` | `Card`, `CardHeader`, `CardFooter`, `CardTitle`, `CardAction`, `CardDescription`, `CardContent` | — | — |
| `<pkg>/checkbox` | `Checkbox` | yes | `colorPalette`: all palettes<br>`size`: `sm` · `md` · `lg` · `xs` |
| `<pkg>/combobox` | `Combobox` | yes | — |
| `<pkg>/command` | `Command`, `CommandDialog`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandShortcut`, `CommandSeparator` | yes | — |
| `<pkg>/data-table` | `DataTable` | yes | — |
| `<pkg>/date-picker` | `DatePicker`, `DateRangePicker`, `Calendar`, `addDays`, `addMonths`, `addYears`, `daysInMonth`, `formatDate`, `isSameDay`, `isSameMonth`, `isSameYear`, `isValid`, `isWithin`, `parseDate`, `startOfDay`, `startOfMonth`, `startOfWeek`, `startOfYear`, `weekStartOf` | yes | — |
| `<pkg>/dialog` | `Dialog`, `DialogClose`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogOverlay`, `DialogPortal`, `DialogTitle`, `DialogTrigger` | yes | — |
| `<pkg>/drawer` | `Drawer`, `DrawerPortal`, `DrawerOverlay`, `DrawerTrigger`, `DrawerClose`, `DrawerContent`, `DrawerHeader`, `DrawerFooter`, `DrawerTitle`, `DrawerDescription` | yes | — |
| `<pkg>/dropdown-menu` | `DropdownMenu`, `DropdownMenuPortal`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuLabel`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuSeparator`, `DropdownMenuShortcut`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent` | yes | `variant (DropdownMenuItem)`: `default` · `destructive` |
| `<pkg>/field` | `Field`, `FieldLabel`, `FieldDescription`, `FieldError`, `FieldSet`, `FieldLegend`, `FieldGroup`, `fieldVariants` | yes | `variant (FieldLegend)`: `legend` · `label` |
| `<pkg>/form` | `useFormField`, `Form`, `FormItem`, `FormLabel`, `FormControl`, `FormDescription`, `FormMessage`, `FormField` | yes | — |
| `<pkg>/input` | `Input`, `inputVariants`, `inputWrapperVariants` | — | `size`: `sm` · `md` · `lg` · `xs`<br>`variant`: `outline` · `flushed` |
| `<pkg>/input-number` | `InputNumber` | yes | — |
| `<pkg>/label` | `Label` | yes | — |
| `<pkg>/pagination` | `Pagination`, `PaginationContent`, `PaginationLink`, `PaginationItem`, `PaginationPrevious`, `PaginationNext`, `PaginationEllipsis` | yes | `colorPalette`: all palettes |
| `<pkg>/popover` | `Popover`, `PopoverTrigger`, `PopoverContent`, `PopoverAnchor`, `PopoverHeader`, `PopoverTitle`, `PopoverDescription` | yes | — |
| `<pkg>/progress` | `Progress`, `progressVariants`, `ProgressCircle`, `progressCircleVariants` | yes | `colorPalette`: all palettes<br>`size`: `md` · `lg`<br>`colorPalette (ProgressCircle)`: all palettes<br>`size (ProgressCircle)`: `sm` · `md` · `lg` · `xs` · `xl` |
| `<pkg>/radio-group` | `RadioGroup`, `RadioGroupItem` | yes | `colorPalette (RadioGroupItem)`: all palettes<br>`size (RadioGroupItem)`: `sm` · `md` · `lg` · `xs` |
| `<pkg>/range-slider` | `RangeSlider` | yes | — |
| `<pkg>/select` | `Select`, `SelectContent`, `SelectGroup`, `SelectItem`, `SelectLabel`, `SelectScrollDownButton`, `SelectScrollUpButton`, `SelectSeparator`, `SelectTrigger`, `SelectValue` | yes | `size (SelectTrigger)`: `sm` · `md` · `lg` · `xs`<br>`variant (SelectTrigger)`: `outline` · `flushed` |
| `<pkg>/separator` | `Separator` | yes | — |
| `<pkg>/sheet` | `Sheet`, `SheetTrigger`, `SheetClose`, `SheetContent`, `SheetHeader`, `SheetFooter`, `SheetTitle`, `SheetDescription` | yes | — |
| `<pkg>/skeleton` | `Skeleton` | — | — |
| `<pkg>/spinner` | `Spinner` | — | — |
| `<pkg>/switch` | `Switch` | yes | `colorPalette`: all palettes<br>`size`: `sm` · `md` · `lg` · `xs` |
| `<pkg>/tabs` | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `tabsListVariants` | yes | `colorPalette (TabsList)`: all palettes<br>`size (TabsList)`: `md` · `lg`<br>`variant (TabsList)`: `line` · `subtle` · `outline` · `default` · `plain` |
| `<pkg>/textarea` | `Textarea` | — | `size`: `sm` · `md` · `lg` · `xs`<br>`variant`: `outline` · `flushed` |
| `<pkg>/toast` | `Toaster`, `toast` | yes | — |
| `<pkg>/tooltip` | `Tooltip`, `TooltipTrigger`, `TooltipContent`, `TooltipProvider` | yes | — |
| `<pkg>/tree` | `Tree` | yes | — |
| `<pkg>/tree-select` | `TreeSelect` | yes | — |
| `<pkg>/upload` | `Upload`, `UploadDropzone`, `uploadVariants` | yes | `variant`: `button` · `dropzone` |
| `<pkg>/virtual-list` | `VirtualList` | yes | — |

## Types

Every component exports its own props type, so the app can extend it:

| Subpath | Types |
| --- | --- |
| `<pkg>/accordion` | `AccordionProps`, `AccordionItemProps` |
| `<pkg>/alert` | `AlertProps` |
| `<pkg>/avatar` | `AvatarProps`, `AvatarImageProps`, `AvatarFallbackProps` |
| `<pkg>/badge` | `BadgeProps` |
| `<pkg>/breadcrumb` | `BreadcrumbProps`, `BreadcrumbListProps`, `BreadcrumbLinkProps` |
| `<pkg>/button` | `ButtonProps` |
| `<pkg>/card` | `CardProps` |
| `<pkg>/checkbox` | `CheckboxProps` |
| `<pkg>/combobox` | `ComboboxProps`, `ComboboxOption` |
| `<pkg>/command` | `CommandProps`, `CommandDialogProps`, `CommandInputProps`, `CommandGroupProps`, `CommandItemProps`, `CommandFilter` |
| `<pkg>/data-table` | `DataTableProps`, `DataTableColumn`, `DataTableSort`, `SortDirection`, `DataTableExpandable` |
| `<pkg>/date-picker` | `DatePickerProps`, `DateRangePickerProps`, `DateRange`, `DateGranularity`, `CalendarProps` |
| `<pkg>/dialog` | `DialogProps`, `DialogContentProps` |
| `<pkg>/drawer` | `DrawerProps`, `DrawerContentProps`, `DrawerDirection` |
| `<pkg>/dropdown-menu` | `DropdownMenuProps`, `DropdownMenuItemProps` |
| `<pkg>/field` | `FieldProps`, `FieldLabelProps`, `FieldLegendProps` |
| `<pkg>/input` | `InputProps` |
| `<pkg>/input-number` | `InputNumberProps` |
| `<pkg>/label` | `LabelProps` |
| `<pkg>/pagination` | `PaginationProps`, `PaginationLinkProps` |
| `<pkg>/popover` | `PopoverProps`, `PopoverContentProps` |
| `<pkg>/progress` | `ProgressProps`, `ProgressCircleProps`, `ProgressCircleSize` |
| `<pkg>/radio-group` | `RadioGroupProps`, `RadioGroupItemProps` |
| `<pkg>/range-slider` | `RangeSliderProps`, `RangeSliderMark`, `RangeSliderClassNames` |
| `<pkg>/select` | `SelectProps`, `SelectTriggerProps` |
| `<pkg>/separator` | `SeparatorProps` |
| `<pkg>/sheet` | `SheetProps`, `SheetContentProps` |
| `<pkg>/skeleton` | `SkeletonProps` |
| `<pkg>/spinner` | `SpinnerProps` |
| `<pkg>/switch` | `SwitchProps` |
| `<pkg>/tabs` | `TabsProps`, `TabsListProps` |
| `<pkg>/textarea` | `TextareaProps` |
| `<pkg>/toast` | `ToasterProps` |
| `<pkg>/tooltip` | `TooltipProps`, `TooltipContentProps` |
| `<pkg>/tree` | `TreeProps`, `TreeNode`, `TreeCheckInfo` |
| `<pkg>/tree-select` | `TreeSelectProps`, `TreeSelectNode` |
| `<pkg>/upload` | `UploadProps`, `UploadDropzoneProps`, `UploadFile`, `UploadRequestMethod`, `UploadProgressEvent`, `UploadRequestError`, `UploadRequestOption`, `UploadRequestHandle`, `BeforeUploadResult` |
| `<pkg>/virtual-list` | `VirtualListProps` |

## Not in the barrel

These are reachable **only** at their own subpath, deliberately:

- `<pkg>/form` — built on an optional peer dependency, so re-exporting it from the barrel would break every app that has not installed that peer.

Icons are out of the barrel too, at `<pkg>/icons`: names like `CheckIcon`
collide with an app's own set often enough that the import should be explicit.