# Werewolf > Werewolf: design tokens and React components for AI coding agents. Each link below is a Markdown version of a docs page. ## Docs - [Installation](https://www.werewolf-ui.dev/docs/installation.md): Set up tokens and agent rules with the CLI, then add React components. - [Design skill](https://www.werewolf-ui.dev/docs/design-skill.md): A rules file your coding agent reads before it writes UI: type, spacing, surfaces and motion. - [Colors](https://www.werewolf-ui.dev/docs/foundations/colors.md): Color tokens named for their job, with a value for light and dark mode. - [Typography](https://www.werewolf-ui.dev/docs/typography.md): Geist for the interface, JetBrains Mono for code, and a type scale tuned around 14px. - [Iconography](https://www.werewolf-ui.dev/docs/iconography.md): One icon set, two variants, three sizes. - [Tokens](https://www.werewolf-ui.dev/docs/tokens.md): Spacing, size, radius, type, motion, shadow, blur, material and opacity tokens with their values. ## Components - [Button](https://www.werewolf-ui.dev/components/button.md): Triggers an action. Dependencies: npm 2 direct, 3 total; registry 2 direct, 2 total. - [Input](https://www.werewolf-ui.dev/components/input.md): Single-line text field. Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total. - [NumberInput](https://www.werewolf-ui.dev/components/number-input.md): A formatted numeric field with optional step buttons. Dependencies: npm 2 direct, 4 total; registry 4 direct, 4 total. - [OtpInput](https://www.werewolf-ui.dev/components/otp-input.md): A one-time code field shown as equal slots: one real input with autocomplete one-time-code over a visual slot layer. Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total. - [Select](https://www.werewolf-ui.dev/components/select.md): Picks one value from a list. Dependencies: npm 3 direct, 4 total; registry 2 direct, 2 total. - [Tabs](https://www.werewolf-ui.dev/components/tabs.md): Switches between panels in place. Dependencies: npm 2 direct, 3 total; registry 2 direct, 2 total. - [Calendar](https://www.werewolf-ui.dev/components/calendar.md): A month grid for picking one date inline, with month and year selects in the caption. Dependencies: npm 3 direct, 4 total; registry 2 direct, 2 total. - [DatePicker](https://www.werewolf-ui.dev/components/date-picker.md): A field-looking trigger that opens a Calendar in a Popover, for picking one date in a form. Dependencies: npm 2 direct, 5 total; registry 4 direct, 4 total. - [Card](https://www.werewolf-ui.dev/components/card.md): Bordered surface for grouping related content. Dependencies: npm 0 direct, 1 total; registry 2 direct, 2 total. - [Dialog](https://www.werewolf-ui.dev/components/dialog.md): Modal dialog with scrim and focus trap. Dependencies: npm 3 direct, 5 total; registry 3 direct, 3 total. - [AlertDialog](https://www.werewolf-ui.dev/components/alert-dialog.md): Confirmation for a destructive action: Dialog's look, focus on Cancel, no close on a scrim click. Dependencies: npm 1 direct, 6 total; registry 4 direct, 4 total. - [Badge](https://www.werewolf-ui.dev/components/badge.md): Compact status or category label. Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total. - [Token](https://www.werewolf-ui.dev/components/token.md): Pill that names a token or short machine value, on a soft hue pair (pink by default), with an optional 12px icon, color swatch or 16px avatar, and an optional remove button (onRemove, removeLabel). Dependencies: npm 2 direct, 3 total; registry 2 direct, 2 total. - [Avatar](https://www.werewolf-ui.dev/components/avatar.md): A person, team or workspace as a photo, or one or two initials on a hue pair when there is no photo. Dependencies: npm 2 direct, 3 total; registry 2 direct, 2 total. - [Label](https://www.werewolf-ui.dev/components/label.md): Visible name of a form control, with an optional required marker or "(optional)" note, and an optional info button with a tooltip. Dependencies: npm 1 direct, 3 total; registry 3 direct, 3 total. - [Field](https://www.werewolf-ui.dev/components/field.md): One form field: FieldLabel, FieldControl, FieldDescription and FieldError, with the ids linked and required, disabled and invalid set once. Dependencies: npm 3 direct, 5 total; registry 3 direct, 4 total. - [Tooltip](https://www.werewolf-ui.dev/components/tooltip.md): Short text hint for the element it wraps, on hover and keyboard focus: . Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total. - [Textarea](https://www.werewolf-ui.dev/components/textarea.md): Text field over several lines, with Input's look and states. Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total. - [Checkbox](https://www.werewolf-ui.dev/components/checkbox.md): A 16px box that turns one option on or off, or shows partly on (indeterminate). Dependencies: npm 2 direct, 4 total; registry 3 direct, 4 total. - [RadioGroup](https://www.werewolf-ui.dev/components/radio-group.md): One choice out of a few options: RadioGroup with RadioGroupItem, each with a label and an optional description. Dependencies: npm 2 direct, 5 total; registry 3 direct, 4 total. - [Rating](https://www.werewolf-ui.dev/components/rating.md): Picks or shows a score on a short scale of stars. Dependencies: npm 2 direct, 3 total; registry 2 direct, 2 total. - [Switch](https://www.werewolf-ui.dev/components/switch.md): Turns a setting on or off at once. Dependencies: npm 2 direct, 5 total; registry 3 direct, 4 total. - [Separator](https://www.werewolf-ui.dev/components/separator.md): A 1px line that splits content into groups. Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total. - [Skeleton](https://www.werewolf-ui.dev/components/skeleton.md): A gray block that holds the place of content while it loads. Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total. - [Spinner](https://www.werewolf-ui.dev/components/spinner.md): A turning arc for work of unknown length, with a visually hidden label. Dependencies: npm 2 direct, 3 total; registry 2 direct, 2 total. - [Stepper](https://www.werewolf-ui.dev/components/stepper.md): Shows progress through an ordered flow. Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total. - [Progress](https://www.werewolf-ui.dev/components/progress.md): A bar for how much of a task is done; no value makes it indeterminate. Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total. - [Popover](https://www.werewolf-ui.dev/components/popover.md): A panel anchored to its trigger for a short form, filters or a share link: Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose. Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total. - [DropdownMenu](https://www.werewolf-ui.dev/components/dropdown-menu.md): A menu of actions behind a button: DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem (destructive, inset, leadingIcon, shortcut, asChild), DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal. Dependencies: npm 2 direct, 4 total; registry 3 direct, 3 total. - [Sheet](https://www.werewolf-ui.dev/components/sheet.md): A dialog that slides in from an edge: Sheet, SheetTrigger, SheetContent (side: top, right, bottom, left; size: sm, md, lg, full; showCloseButton), SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose. Dependencies: npm 3 direct, 5 total; registry 3 direct, 4 total. - [Sidebar](https://www.werewolf-ui.dev/components/sidebar.md): App shell navigation: SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarSection, SidebarItem, SidebarTrigger. Dependencies: npm 3 direct, 8 total; registry 8 direct, 9 total. - [Slider](https://www.werewolf-ui.dev/components/slider.md): Picks a number, or a range of two, by dragging a thumb: one thumb per value. Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total. - [ColorPicker](https://www.werewolf-ui.dev/components/color-picker.md): Picks a color from a 2D saturation and brightness area, a hue bar and a hex field, in a Popover. Dependencies: npm 0 direct, 7 total; registry 6 direct, 9 total. - [Accordion](https://www.werewolf-ui.dev/components/accordion.md): Sections that open in place: Accordion (type single or multiple, collapsible, headingLevel), AccordionItem, AccordionTrigger, AccordionContent. Dependencies: npm 2 direct, 3 total; registry 2 direct, 2 total. - [Toast](https://www.werewolf-ui.dev/components/toast.md): A short message after an action, in the corner of the screen: mount one Toaster at the root and call toast({ title, description, variant, action, duration }). Dependencies: npm 3 direct, 5 total; registry 3 direct, 3 total. - [Breadcrumb](https://www.werewolf-ui.dev/components/breadcrumb.md): The path to the current page: Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink (asChild), BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis. Dependencies: npm 2 direct, 3 total; registry 2 direct, 2 total. - [Pagination](https://www.werewolf-ui.dev/components/pagination.md): Moves between pages: Pagination with page, pageCount, siblingCount and getHref (links) or onPageChange (buttons); or PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis for your own layout. Dependencies: npm 1 direct, 4 total; registry 3 direct, 3 total. - [Table](https://www.werewolf-ui.dev/components/table.md): Rows of data: Table, TableHeader, TableBody, TableFooter, TableRow (selected), TableHead (align, numeric, fit, sortDirection, onSort), TableCell (align, numeric, fit), TableCaption, TableEmpty, and TableToolbar with TableActions for the bars above and below. Dependencies: npm 2 direct, 6 total; registry 4 direct, 6 total. - [Tokenizer](https://www.werewolf-ui.dev/components/tokenizer.md): A field that collects several short values as Tokens: Enter or a comma adds one, Backspace removes the last. Dependencies: npm 1 direct, 3 total; registry 4 direct, 4 total. - [Combobox](https://www.werewolf-ui.dev/components/combobox.md): Picks one value from a long list by typing to filter it: Combobox (value, defaultValue, onValueChange, open, emptyText, placeholder, size, name) with ComboboxItem and ComboboxGroup children. Dependencies: npm 3 direct, 5 total; registry 4 direct, 4 total. - [Metadata](https://www.werewolf-ui.dev/components/metadata.md): Read-only label and value pairs in a description list: . Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total. - [Alert](https://www.werewolf-ui.dev/components/alert.md): An inline named message with optional action and dismissal. Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total. - [Kbd](https://www.werewolf-ui.dev/components/kbd.md): Displays a keyboard shortcut or key sequence. Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total. - [Image](https://www.werewolf-ui.dev/components/image.md): Displays an image in a frame that keeps its size, with a blurred placeholder that the full image fades in over. Dependencies: npm 0 direct, 1 total; registry 2 direct, 2 total. - [Toggle](https://www.werewolf-ui.dev/components/toggle.md): A button with a persistent on or off state. Dependencies: npm 2 direct, 3 total; registry 2 direct, 2 total. - [ToggleGroup](https://www.werewolf-ui.dev/components/toggle-group.md): A keyboard-navigable group of single or multiple toggle choices. Dependencies: npm 1 direct, 4 total; registry 3 direct, 3 total. - [Link](https://www.werewolf-ui.dev/components/link.md): An underlined destination with optional external indicator. Dependencies: npm 2 direct, 3 total; registry 2 direct, 2 total. - [EmptyState](https://www.werewolf-ui.dev/components/empty-state.md): Explains an empty successful result and its next action. Dependencies: npm 0 direct, 1 total; registry 2 direct, 2 total. - [Command](https://www.werewolf-ui.dev/components/command.md): Searches and runs actions inline or in a dialog. Dependencies: npm 0 direct, 7 total; registry 6 direct, 8 total. - [ScrollArea](https://www.werewolf-ui.dev/components/scroll-area.md): Scrollable content with a thin themed native scrollbar. Dependencies: npm 0 direct, 1 total; registry 2 direct, 2 total. - [HoverCard](https://www.werewolf-ui.dev/components/hover-card.md): Read-only preview content that opens on hover or keyboard focus of a link. Dependencies: npm 0 direct, 2 total; registry 3 direct, 3 total. - [ContextMenu](https://www.werewolf-ui.dev/components/context-menu.md): Opens a menu at a pointer on right click, a keyboard context key or a touch long press, with the same items as DropdownMenu. Dependencies: npm 1 direct, 5 total; registry 3 direct, 4 total. - [BottomNav](https://www.werewolf-ui.dev/components/bottom-nav.md): A named mobile navigation bar with links, optional counts, and the selected state. Dependencies: npm 1 direct, 3 total; registry 3 direct, 3 total. - [DataTrend](https://www.werewolf-ui.dev/components/data-trend.md): A metric block with a label, current value and change. Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total. - [Chart](https://www.werewolf-ui.dev/components/chart.md): Eleven typed chart forms with responsive geometry, inspection and an accessible data table. Dependencies: npm 0 direct, 6 total; registry 4 direct, 7 total. - [Checklist](https://www.werewolf-ui.dev/components/checklist.md): A titled list of tasks with a progress bar, such as getting started steps. Dependencies: npm 1 direct, 5 total; registry 4 direct, 6 total. - [SortableList](https://www.werewolf-ui.dev/components/sortable-list.md): A list the user reorders by dragging a row's grip handle or with the keyboard, with every move announced. Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total. - [FilterBar](https://www.werewolf-ui.dev/components/filter-bar.md): A row of filters above a table, list or chart: a search field, your filter controls, a clear button and the result count, in a named search landmark. Dependencies: npm 1 direct, 4 total; registry 4 direct, 4 total. - [Navbar](https://www.werewolf-ui.dev/components/navbar.md): Site navigation across the top of the page: brand, links and actions, with the links in a slide-in menu below md. Dependencies: npm 2 direct, 5 total; registry 4 direct, 5 total. - [ResizablePanels](https://www.werewolf-ui.dev/components/resizable-panels.md): Panels side by side or stacked, with a line between them that the user drags or moves with the arrow keys. Dependencies: npm 1 direct, 2 total; registry 2 direct, 2 total.