Package Exports
- @otfdashkit/ui
- @otfdashkit/ui/styles
- @otfdashkit/ui/themes/base
- @otfdashkit/ui/themes/glass
- @otfdashkit/ui/themes/linear
- @otfdashkit/ui/themes/midnight
- @otfdashkit/ui/themes/minimal
Readme
@otfdashkit/ui
137 React components for builders shipping production apps — Radix under the hood, Tailwind v4 on top, AI-agent-readable by design.
What you get
- Primitives — Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Button, Calendar, Card, Carousel, Checkbox, Collapsible, Command, ContextMenu, Dialog, Drawer, DropdownMenu, Form, HoverCard, Input, InputOtp, Label, Menubar, NavigationMenu, Pagination, Popover, Progress, Radio, Resizable, ScrollArea, Select, Separator, Sheet, Skeleton, Slider, Sonner, Spinner, Switch, Table, Tabs, Textarea, Toast, Toggle, Tooltip — full Radix-backed set
- App-shell layouts — AppShell, Sidebar, NavigationMenu, CommandPalette (
⌘Keverywhere) - Blocks — DataGrid, DataTable, Banner, Breadcrumb, EmptyState, Hotkeys, IconBadge, LoadingOverlay, Persona, PropertyList, Stat, Stepper, StructuredList, Timeline, Toaster
- Charts — BarChart, LineChart, AreaChart, BarList, Sparkline, Heatmap, ActivityHeatmap (recharts under the hood, token-driven colors)
- Advanced — Tiptap editor, ImageCrop, file uploaders, marquees, shiki-powered code blocks, video player
- 17 themes out of the box from
@otfdashkit/tokens— swap palette by changing one attribute on<html>
137 components in src/. Full catalog at the Storybook below.
Live demos
- ui.otf-kit.dev — full Storybook: every component, every variant, every state
- saas.otf-kit.dev — production SaaS app built end-to-end on this library
- fitness-preview.otf-kit.dev — same component language, different theme
Install
pnpm add @otfdashkit/ui @otfdashkit/tokens
# or: npm install @otfdashkit/ui @otfdashkit/tokens
# or: bun add @otfdashkit/ui @otfdashkit/tokensQuick start
// app/layout.tsx (Next.js) or src/main.tsx (Vite)
import '@otfdashkit/tokens/web.css'
import '@otfdashkit/ui/styles'import { Button, Card, Input } from '@otfdashkit/ui'
export default function SignInCard() {
return (
<Card>
<Input placeholder="Email" />
<Button variant="primary" size="lg">Continue</Button>
</Card>
)
}Theming
<html data-theme="ocean-teal" class="dark">Tokens cascade to every component. Built-in themes: mono, ocean-teal, warm-amber, rose-coral, lavender, glacier, forest, obsidian, solar, orchid, indigo, cosmic-night, soft-pop, neo-brutalism, vintage-paper, modern-minimal, bubblegum.
Works with
Every component ships structured JSDoc and tested prompts. These agents generate correct usage on the first try:
- Claude Code, Cursor, Lovable, Bolt, Copilot
Pair with @otfdashkit/eslint-plugin-otf-design to reject hex literals and default Tailwind palette classes (gray-500, blue-600, …) at lint time. Tokens or it doesn't ship.
Related packages
@otfdashkit/ui-native— mobile counterpart, same component API@otfdashkit/tokens— design tokens (CSS vars + Tamagui config)@otfdashkit/cli— heavy-peer component installer (Skia, Reanimated, MMKV)
Community
Questions, bugs, feature requests: discord.gg/gpXyu7SqNZ.
Status
v0.1.x — alpha. APIs may change before 1.0. Pin exact versions in production.
License
MIT. You own the source. Eject any time. Copyright © otfdashkit.