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
Production-quality React component library — 98 primitives + blocks + layouts + charts.
Radix UI under the hood, Tailwind v4 on top, AI-coding-tool-native by design.
Live demo
Two production apps, same component library, two completely different products:
- saas.otf-kit.dev — Linear-style SaaS dashboard
- fitness-preview.otf-kit.dev — Apple-Fitness-style mobile-first wellness app
- ui.otf-kit.dev — full Storybook (every component, every variant, every state)
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>
)
}What's included
- 98 primitives — Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Button, Calendar, Card, Carousel, Chart, 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 list in
src/primitives/) - App-shell layouts — AppShell, Sidebar, NavigationMenu, CommandPalette
- 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)
- 17 themes out of the box from
@otfdashkit/tokens
Theming
Pick a theme by setting an attribute — tokens cascade to every component:
<html data-theme="ocean-teal" class="dark">Or write localStorage('otf-theme') and the floating theme picker (in the SaaS demo) updates live.
AI-coding-tool-native
Every component ships with structured JSDoc and tested prompts. Cursor, Claude Code, Copilot, and Lovable all generate correct usage on the first try without bespoke prompting.
import { Button } from '@otfdashkit/ui'
// JSDoc on Button:
// variant: 'primary' | 'secondary' | 'destructive' | 'ghost' | 'outline'
// size: 'sm' | 'md' | 'lg'
// See ai/prompts/add-button.md for tested usage patterns.Lint your design system
Pair with @otfdashkit/eslint-plugin-otf-design to reject hex literals and default Tailwind palette classes (gray-500, blue-600, etc.) at lint time. Tokens or it doesn't ship.
Live demos + Storybook
- Web Storybook: https://ui.otf-kit.dev (every component, every variant)
- SaaS dashboard: saas.otf-kit.dev (source)
- Fitness app: fitness-preview.otf-kit.dev (source)
Related packages
@otfdashkit/ui-native— mobile counterpart, same component API, Tamagui under the hood@otfdashkit/tokens— the design tokens this package consumes@otfdashkit/eslint-plugin-otf-design— design-system lint rules
Status
v0.1.x — alpha. APIs may change before 1.0. Pin exact versions if you ship to production.
License
MIT © otfdashkit