@otfdashkit/ui 0.1.1 → 0.1.3

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Dave Soni
+Copyright (c) 2026 Dave Kurian
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,8 +1,7 @@
 <h1 align="center">@otfdashkit/ui</h1>
 
 <p align="center">
-  Production-quality React component library &mdash; 98 primitives + blocks + layouts + charts.<br/>
-  Radix UI under the hood, Tailwind v4 on top, AI-coding-tool-native by design.
+  137 React components for builders shipping production apps — Radix under the hood, Tailwind v4 on top, AI-agent-readable by design.
 </p>
 
 <p align="center">
@@ -19,13 +18,22 @@
 
 ---
 
-## Live demo
+## What you get
 
-Two production apps, same component library, two completely different products:
+- **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`](https://www.npmjs.com/package/@otfdashkit/tokens) — swap palette by changing one attribute on `<html>`
 
-- **[saas.otf-kit.dev](https://saas.otf-kit.dev/)** &mdash; Linear-style SaaS dashboard
-- **[fitness-preview.otf-kit.dev](https://fitness-preview.otf-kit.dev/)** &mdash; Apple-Fitness-style mobile-first wellness app
-- **[ui.otf-kit.dev](https://ui.otf-kit.dev/)** &mdash; full Storybook (every component, every variant, every state)
+137 components in [`src/`](src/). Full catalog at the Storybook below.
+
+## Live demos
+
+- **[ui.otf-kit.dev](https://ui.otf-kit.dev/)** — full Storybook: every component, every variant, every state
+- **[saas.otf-kit.dev](https://saas.otf-kit.dev/)** — production SaaS app built end-to-end on this library
+- **[fitness-preview.otf-kit.dev](https://fitness-preview.otf-kit.dev/)** — same component language, different theme
 
 ## Install
 
@@ -56,57 +64,36 @@ export default function SignInCard() {
 }
 ```
 
-## What's included
-
-- **98 primitives** &mdash; 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, &hellip; (full list in [`src/primitives/`](https://github.com/otf-kit/sdk/tree/main/packages/ui/src/primitives))
-- **App-shell layouts** &mdash; AppShell, Sidebar, NavigationMenu, CommandPalette
-- **Blocks** &mdash; DataGrid, DataTable, Banner, Breadcrumb, EmptyState, Hotkeys, IconBadge, LoadingOverlay, Persona, PropertyList, Stat, Stepper, StructuredList, Timeline, Toaster
-- **Charts** &mdash; BarChart, LineChart, AreaChart, BarList, Sparkline, Heatmap, ActivityHeatmap (recharts under the hood)
-- **17 themes** out of the box from [`@otfdashkit/tokens`](https://www.npmjs.com/package/@otfdashkit/tokens)
-
 ## Theming
 
-Pick a theme by setting an attribute &mdash; tokens cascade to every component:
-
 ```html
 <html data-theme="ocean-teal" class="dark">
 ```
 
-Or write `localStorage('otf-theme')` and the floating theme picker (in the SaaS demo) updates live.
+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`.
 
-## AI-coding-tool-native
+## Works with
 
-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.
+Every component ships structured JSDoc and tested prompts. These agents generate correct usage on the first try:
 
-```ts
-import { Button } from '@otfdashkit/ui'
+- **Claude Code**, **Cursor**, **Lovable**, **Bolt**, **Copilot**
 
-// 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`](https://www.npmjs.com/package/@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.
+Pair with [`@otfdashkit/eslint-plugin-otf-design`](https://www.npmjs.com/package/@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.
 
-## Live demos + Storybook
+## Related packages
 
-- **Web Storybook**: https://ui.otf-kit.dev (every component, every variant)
-- **SaaS dashboard**: [saas.otf-kit.dev](https://saas.otf-kit.dev/) ([source](https://github.com/otf-kit/saas-dashboard))
-- **Fitness app**: [fitness-preview.otf-kit.dev](https://fitness-preview.otf-kit.dev/) ([source](https://github.com/otf-kit/fitness-kit))
+- [`@otfdashkit/ui-native`](https://www.npmjs.com/package/@otfdashkit/ui-native) — mobile counterpart, same component API
+- [`@otfdashkit/tokens`](https://www.npmjs.com/package/@otfdashkit/tokens) — design tokens (CSS vars + Tamagui config)
+- [`@otfdashkit/cli`](https://www.npmjs.com/package/@otfdashkit/cli) — heavy-peer component installer (Skia, Reanimated, MMKV)
 
-## Related packages
+## Community
 
-- [`@otfdashkit/ui-native`](https://www.npmjs.com/package/@otfdashkit/ui-native) &mdash; mobile counterpart, same component API, Tamagui under the hood
-- [`@otfdashkit/tokens`](https://www.npmjs.com/package/@otfdashkit/tokens) &mdash; the design tokens this package consumes
-- [`@otfdashkit/eslint-plugin-otf-design`](https://www.npmjs.com/package/@otfdashkit/eslint-plugin-otf-design) &mdash; design-system lint rules
+Questions, bugs, feature requests: **[discord.gg/gpXyu7SqNZ](https://discord.gg/gpXyu7SqNZ)**.
 
 ## Status
 
-`v0.1.x` &mdash; alpha. APIs may change before `1.0`. Pin exact versions if you ship to production.
+`v0.1.x` — alpha. APIs may change before `1.0`. Pin exact versions in production.
 
 ## License
 
-MIT &copy; otfdashkit
+MIT. You own the source. Eject any time. Copyright &copy; otfdashkit.