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 |
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 |
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) |