Components Web (@otfdashkit/ui) 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.
Component What it is Key parts ButtonClick target with size + variant slots variant: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'InputSingle-line text input All standard <input> props TextareaMulti-line text input LabelAccessible form label Pairs with htmlFor Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessagereact-hook-form-shaped wrappers Bring your own resolver CheckboxSingle check Controlled or uncontrolled Radio (RadioGroup + RadioGroupItem)One-of-many SwitchToggle Controlled checked + onCheckedChange SliderRange slider value, defaultValue, min, max, stepToggle, ToggleGroupPress-state button(s) Single or multiple selection InputOtp, InputOtpSlot, InputOtpSeparatorOne-time-passcode input Auto-focuses next slot on type Select, SelectTrigger, SelectValue, SelectContent, SelectItemNative-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 > Component What it is Card, CardHeader, CardTitle, CardContent, CardFooterStandard card scaffolding AspectRatioLock content to a ratio (e.g. 16/9, 1/1) SeparatorHorizontal or vertical line ScrollAreaCustom-styled scrollbar Resizable (ResizablePanelGroup, ResizablePanel, ResizableHandle)Draggable splitters SkeletonLoading placeholder TextureCardCard with subtle grain texture (premium feel)
Component What it is Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogCloseModal AlertDialog + partsModal that demands confirmation Drawer + partsBottom-slide modal (mobile-feeling) Sheet + partsSide-slide modal Popover, PopoverTrigger, PopoverContentFloating panel anchored to a trigger Tooltip, TooltipProvider, TooltipTrigger, TooltipContentHover hint HoverCard + partsTooltip-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 > Component What it is Avatar, AvatarImage, AvatarFallbackUser pic with initial fallback BadgeInline label Alert, AlertTitle, AlertDescriptionInline status ProgressLinear progress bar SpinnerIndeterminate Table + parts (TableHeader, TableRow, TableHead, TableCell, TableBody, TableCaption)Plain HTML table primitives Tabs, TabsList, TabsTrigger, TabsContentTab interface Pagination + partsPage navigation CalendarWraps react-day-picker Chart + recharts re-exportsBar, Line, Area, Pie chart wrappers Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPreviousEmbla-based carousel LogoCarouselAuto-scrolling logo strip MarqueeContinuous-scroll text/elements
Component What it is Accordion, AccordionItem, AccordionTrigger, AccordionContentCollapsible list Collapsible + partsSingle-section collapse CodeBlockSyntax-highlighted code (used heavily in docs) QrCodeRenders a QR for any string ComparisonBefore/after slider RatingStar rating (controlled or read-only) Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItemSpotlight-style palette base (use CommandBar from advanced for the wrapped pattern)
Composite — finished patterns built on these primitivesBlocks — full-section product blocksAdvanced — Kanban, Gantt, Rich Editor, Command Bar 