@otfdashkit/ui

v0.1.2

Published

4 days ago

OTF UI — production-quality React component library. 98 primitives + blocks + layouts + charts on Radix + Tailwind v4. Cross-platform parity API with @otfdashkit/ui-native.

0High
0Medium
0Low

dave-otf

otfdashkit ui react react-19 components design-system radix tailwind tailwind-v4 shadcn headless accessible

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 (⌘K everywhere)
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/tokens

Quick 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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme