# Primitives

> Unstyled-but-themed building blocks — Button, Input, Dialog, Tabs, and 46 more.

The 50 primitives in `@otfdashkit/ui` are the foundation everything else is built on.
They follow Radix UI's compound-component pattern (multiple parts you wire together)
and read their colors from `@otfdashkit/tokens` so theme switching just works.

## Form

| Component         | What it is                                       | Key parts                                                                  |
| ----------------- | ------------------------------------------------ | -------------------------------------------------------------------------- |
| `Button`          | Click target with size + variant slots           | `variant: 'default' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive' \| 'link'` |
| `Input`           | Single-line text input                           | All standard `<input>` props                                                |
| `Textarea`        | Multi-line text input                            |                                                                             |
| `Label`           | Accessible form label                            | Pairs with `htmlFor`                                                        |
| `Form`, `FormField`, `FormItem`, `FormLabel`, `FormControl`, `FormDescription`, `FormMessage` | react-hook-form-shaped wrappers | Bring your own resolver |
| `Checkbox`        | Single check                                     | Controlled or uncontrolled                                                  |
| `Radio` (`RadioGroup` + `RadioGroupItem`) | One-of-many                          |                                                                             |
| `Switch`          | Toggle                                           | Controlled `checked` + `onCheckedChange`                                    |
| `Slider`          | Range slider                                     | `value`, `defaultValue`, `min`, `max`, `step`                                |
| `Toggle`, `ToggleGroup` | Press-state button(s)                      | Single or multiple selection                                                |
| `InputOtp`, `InputOtpSlot`, `InputOtpSeparator` | One-time-passcode input               | Auto-focuses next slot on type                                              |
| `Select`, `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem` | Native-feeling dropdown | Searchable; supports groups |

```tsx
import { Button, Input, Label } from '@otfdashkit/ui'

<form className="grid gap-3">
  <div>
    <Label htmlFor="email">Email</Label>
    <Input id="email" type="email" required />
  </div>
  <Button type="submit">Sign in</Button>
</form>
```

## Layout

| Component                                                   | What it is                                       |
| ----------------------------------------------------------- | ------------------------------------------------ |
| `Card`, `CardHeader`, `CardTitle`, `CardContent`, `CardFooter` | Standard card scaffolding                  |
| `AspectRatio`                                                | Lock content to a ratio (e.g. 16/9, 1/1)         |
| `Separator`                                                  | Horizontal or vertical line                       |
| `ScrollArea`                                                 | Custom-styled scrollbar                          |
| `Resizable` (`ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle`) | Draggable splitters         |
| `Skeleton`                                                   | Loading placeholder                              |
| `TextureCard`                                                | Card with subtle grain texture (premium feel)    |

## Overlay

| Component                                                                                                | What it is                                  |
| -------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter`, `DialogClose` | Modal              |
| `AlertDialog` + parts                                                                                     | Modal that demands confirmation             |
| `Drawer` + parts                                                                                          | Bottom-slide modal (mobile-feeling)         |
| `Sheet` + parts                                                                                           | Side-slide modal                            |
| `Popover`, `PopoverTrigger`, `PopoverContent`                                                             | Floating panel anchored to a trigger        |
| `Tooltip`, `TooltipProvider`, `TooltipTrigger`, `TooltipContent`                                          | Hover hint                                  |
| `HoverCard` + parts                                                                                       | Tooltip-with-rich-content                   |
| `ContextMenu`, `Menubar`, `DropdownMenu`, `NavigationMenu` (each with full part set)                      | Menu surfaces                                |

```tsx
import {
  Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription,
  Button,
} from '@otfdashkit/ui'

<Dialog>
  <DialogTrigger asChild>
    <Button>Open</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogTitle>Are you sure?</DialogTitle>
    <DialogDescription>This can't be undone.</DialogDescription>
  </DialogContent>
</Dialog>
```

## Data display

| Component                                                          | What it is                                              |
| ------------------------------------------------------------------ | ------------------------------------------------------- |
| `Avatar`, `AvatarImage`, `AvatarFallback`                          | User pic with initial fallback                          |
| `Badge`                                                            | Inline label                                            |
| `Alert`, `AlertTitle`, `AlertDescription`                          | Inline status                                           |
| `Progress`                                                          | Linear progress bar                                     |
| `Spinner`                                                           | Indeterminate                                            |
| `Table` + parts (`TableHeader`, `TableRow`, `TableHead`, `TableCell`, `TableBody`, `TableCaption`) | Plain HTML table primitives |
| `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`                   | Tab interface                                           |
| `Pagination` + parts                                                | Page navigation                                         |
| `Calendar`                                                          | Wraps react-day-picker                                  |
| `Chart` + recharts re-exports                                       | Bar, Line, Area, Pie chart wrappers                     |
| `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselNext`, `CarouselPrevious` | Embla-based carousel                          |
| `LogoCarousel`                                                      | Auto-scrolling logo strip                               |
| `Marquee`                                                           | Continuous-scroll text/elements                         |

## Specialty

| Component                                              | What it is                                                                |
| ------------------------------------------------------ | ------------------------------------------------------------------------- |
| `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` | Collapsible list                                              |
| `Collapsible` + parts                                   | Single-section collapse                                                   |
| `CodeBlock`                                              | Syntax-highlighted code (used heavily in docs)                            |
| `QrCode`                                                 | Renders a QR for any string                                                |
| `Comparison`                                             | Before/after slider                                                       |
| `Rating`                                                 | Star rating (controlled or read-only)                                     |
| `Command`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem` | Spotlight-style palette base (use `CommandBar` from advanced for the wrapped pattern) |

## See also

- [Composite](/docs/components/ui/composite) — finished patterns built on these primitives
- [Blocks](/docs/components/ui/blocks) — full-section product blocks
- [Advanced](/docs/components/ui/advanced) — Kanban, Gantt, Rich Editor, Command Bar