# The package

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

**This file never names the kit.** Take the real package name from the
consuming project's own `package.json` — it is the dependency whose `exports`
include `./button`. Examples in the skills say `<pkg>` for the same reason:
the kit can be renamed by whoever owns it, and a name written down here would
go quietly out of date.

| | |
| --- | --- |
| Runtime dependencies | **none** — installing the kit adds nothing transitively |
| Module format | ESM and CJS, with types for both |

## Peer dependencies

| Package | Range | Required |
| --- | --- | --- |
| `react` | `^18 || ^19` | yes |
| `react-dom` | `^18 || ^19` | yes |
| `react-hook-form` | `^7` | no — only if the app imports `<pkg>/form` |

## Also install as a **dev** dependency

```bash
npm install --save-dev radix-ui     # pnpm add -D radix-ui
```

Types only, and non-optional for a TypeScript app. The shipped `.d.ts` files
describe several components' props as `React.ComponentProps<typeof
SomePrimitive.Content>` and still import `radix-ui/<primitive>` to do it.
With the package absent those types resolve to nothing, so Dialog, Tooltip,
Select and fifteen others type-check as accepting no props at all —
`TS2559: Type '{ children: Element[] }' has no properties in common with…`.
The runtime bundle is byte-identical with or without it.

## Stylesheet — pick one route

**The app has no Tailwind.** Import the compiled stylesheet once, at the app
entry. It is self-contained.

```ts
import '<pkg>/styles.css';
```

**The app already runs Tailwind v4.** Take the tokens instead and let the
app's own build generate the utilities:

```css
@import 'tailwindcss';
@import '<pkg>/tokens.css';
@import '<pkg>/theme.css';
@source '../node_modules/<pkg>/dist';
```

The `@source` line is not optional on this route — without it Tailwind never
sees the kit's class names and every component renders unstyled.

Do **not** do both. Two copies of the same layer is wasted bytes at best and
a specificity fight at worst.

## Import subpaths

48 in total. Import from the subpath, not the barrel — the barrel reaches
every component in the kit.

```ts
import { Button } from '<pkg>/button';        // ✔ Button and its dependencies
import { Button } from '<pkg>';               // ✘ pulls the whole kit
```

| Subpath | Holds |
| --- | --- |
| `<pkg>/accordion` | `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`, `accordionVariants` |
| `<pkg>/alert` | `Alert`, `AlertTitle`, `AlertDescription`, `alertVariants` |
| `<pkg>/avatar` | `Avatar`, `AvatarImage`, `AvatarFallback`, `AvatarBadge`, `AvatarGroup`, `AvatarGroupCount` |
| `<pkg>/badge` | `Badge`, `badgeVariants` |
| `<pkg>/breadcrumb` | `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis` |
| `<pkg>/button` | `Button`, `buttonVariants` |
| `<pkg>/card` | `Card`, `CardHeader`, `CardFooter`, `CardTitle`, `CardAction`, `CardDescription`, `CardContent` |
| `<pkg>/checkbox` | `Checkbox` |
| `<pkg>/combobox` | `Combobox` |
| `<pkg>/command` | `Command`, `CommandDialog`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandShortcut`, `CommandSeparator` |
| `<pkg>/data-table` | `DataTable` |
| `<pkg>/date-picker` | `DatePicker`, `DateRangePicker`, `Calendar`, `addDays`, `addMonths`, `addYears`, `daysInMonth`, `formatDate`, `isSameDay`, `isSameMonth`, `isSameYear`, `isValid`, `isWithin`, `parseDate`, `startOfDay`, `startOfMonth`, `startOfWeek`, `startOfYear`, `weekStartOf` |
| `<pkg>/dialog` | `Dialog`, `DialogClose`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogOverlay`, `DialogPortal`, `DialogTitle`, `DialogTrigger` |
| `<pkg>/drawer` | `Drawer`, `DrawerPortal`, `DrawerOverlay`, `DrawerTrigger`, `DrawerClose`, `DrawerContent`, `DrawerHeader`, `DrawerFooter`, `DrawerTitle`, `DrawerDescription` |
| `<pkg>/dropdown-menu` | `DropdownMenu`, `DropdownMenuPortal`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuLabel`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuSeparator`, `DropdownMenuShortcut`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent` |
| `<pkg>/field` | `Field`, `FieldLabel`, `FieldDescription`, `FieldError`, `FieldSet`, `FieldLegend`, `FieldGroup`, `fieldVariants` |
| `<pkg>/form` | `useFormField`, `Form`, `FormItem`, `FormLabel`, `FormControl`, `FormDescription`, `FormMessage`, `FormField` |
| `<pkg>/input` | `Input`, `inputVariants`, `inputWrapperVariants` |
| `<pkg>/input-number` | `InputNumber` |
| `<pkg>/label` | `Label` |
| `<pkg>/pagination` | `Pagination`, `PaginationContent`, `PaginationLink`, `PaginationItem`, `PaginationPrevious`, `PaginationNext`, `PaginationEllipsis` |
| `<pkg>/popover` | `Popover`, `PopoverTrigger`, `PopoverContent`, `PopoverAnchor`, `PopoverHeader`, `PopoverTitle`, `PopoverDescription` |
| `<pkg>/progress` | `Progress`, `progressVariants`, `ProgressCircle`, `progressCircleVariants` |
| `<pkg>/radio-group` | `RadioGroup`, `RadioGroupItem` |
| `<pkg>/range-slider` | `RangeSlider` |
| `<pkg>/select` | `Select`, `SelectContent`, `SelectGroup`, `SelectItem`, `SelectLabel`, `SelectScrollDownButton`, `SelectScrollUpButton`, `SelectSeparator`, `SelectTrigger`, `SelectValue` |
| `<pkg>/separator` | `Separator` |
| `<pkg>/sheet` | `Sheet`, `SheetTrigger`, `SheetClose`, `SheetContent`, `SheetHeader`, `SheetFooter`, `SheetTitle`, `SheetDescription` |
| `<pkg>/skeleton` | `Skeleton` |
| `<pkg>/spinner` | `Spinner` |
| `<pkg>/switch` | `Switch` |
| `<pkg>/tabs` | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `tabsListVariants` |
| `<pkg>/textarea` | `Textarea` |
| `<pkg>/toast` | `Toaster`, `toast` |
| `<pkg>/tooltip` | `Tooltip`, `TooltipTrigger`, `TooltipContent`, `TooltipProvider` |
| `<pkg>/tree` | `Tree` |
| `<pkg>/tree-select` | `TreeSelect` |
| `<pkg>/upload` | `Upload`, `UploadDropzone`, `uploadVariants` |
| `<pkg>/virtual-list` | `VirtualList` |
| `<pkg>/lib` | `cn`, `cx`, `cva`, and the shared vocabulary — see `tokens.md` |
| `<pkg>/hooks` | `useMediaQuery`, `useIsMobile`, `MOBILE_BREAKPOINT` |
| `<pkg>/icons` | every icon — see `icons.md` |
| `<pkg>/styles.css` | the compiled stylesheet |
| `<pkg>/theme.css` | the semantic layer alone |
| `<pkg>/tokens.css` | the raw values alone |
| `<pkg>/tokens.json` | the same values as data, for non-web targets |