@otfdashkit/ui 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +112 -0
  2. package/dist/index.js +96 -1801
  3. package/dist/index.mjs +40 -1745
  4. package/package.json +23 -5
package/README.md ADDED
@@ -0,0 +1,112 @@
1
+ <h1 align="center">@otfdashkit/ui</h1>
2
+
3
+ <p align="center">
4
+ Production-quality React component library &mdash; 98 primitives + blocks + layouts + charts.<br/>
5
+ Radix UI under the hood, Tailwind v4 on top, AI-coding-tool-native by design.
6
+ </p>
7
+
8
+ <p align="center">
9
+ <a href="https://www.npmjs.com/package/@otfdashkit/ui" target="_blank">
10
+ <img src="https://img.shields.io/npm/v/@otfdashkit/ui?style=flat-square&color=000" alt="npm version">
11
+ </a>
12
+ <a href="https://www.npmjs.com/package/@otfdashkit/ui" target="_blank">
13
+ <img src="https://img.shields.io/npm/dm/@otfdashkit/ui?style=flat-square&color=000" alt="npm downloads">
14
+ </a>
15
+ <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square" alt="MIT License">
16
+ <img src="https://img.shields.io/badge/React-19-000?style=flat-square" alt="React 19">
17
+ <img src="https://img.shields.io/badge/Tailwind-v4-000?style=flat-square" alt="Tailwind v4">
18
+ </p>
19
+
20
+ ---
21
+
22
+ ## Live demo
23
+
24
+ Two production apps, same component library, two completely different products:
25
+
26
+ - **[saas.otf-kit.dev](https://saas.otf-kit.dev/)** &mdash; Linear-style SaaS dashboard
27
+ - **[fitness-preview.otf-kit.dev](https://fitness-preview.otf-kit.dev/)** &mdash; Apple-Fitness-style mobile-first wellness app
28
+ - **[ui.otf-kit.dev](https://ui.otf-kit.dev/)** &mdash; full Storybook (every component, every variant, every state)
29
+
30
+ ## Install
31
+
32
+ ```bash
33
+ pnpm add @otfdashkit/ui @otfdashkit/tokens
34
+ # or: npm install @otfdashkit/ui @otfdashkit/tokens
35
+ # or: bun add @otfdashkit/ui @otfdashkit/tokens
36
+ ```
37
+
38
+ ## Quick start
39
+
40
+ ```tsx
41
+ // app/layout.tsx (Next.js) or src/main.tsx (Vite)
42
+ import '@otfdashkit/tokens/web.css'
43
+ import '@otfdashkit/ui/styles'
44
+ ```
45
+
46
+ ```tsx
47
+ import { Button, Card, Input } from '@otfdashkit/ui'
48
+
49
+ export default function SignInCard() {
50
+ return (
51
+ <Card>
52
+ <Input placeholder="Email" />
53
+ <Button variant="primary" size="lg">Continue</Button>
54
+ </Card>
55
+ )
56
+ }
57
+ ```
58
+
59
+ ## What's included
60
+
61
+ - **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))
62
+ - **App-shell layouts** &mdash; AppShell, Sidebar, NavigationMenu, CommandPalette
63
+ - **Blocks** &mdash; DataGrid, DataTable, Banner, Breadcrumb, EmptyState, Hotkeys, IconBadge, LoadingOverlay, Persona, PropertyList, Stat, Stepper, StructuredList, Timeline, Toaster
64
+ - **Charts** &mdash; BarChart, LineChart, AreaChart, BarList, Sparkline, Heatmap, ActivityHeatmap (recharts under the hood)
65
+ - **17 themes** out of the box from [`@otfdashkit/tokens`](https://www.npmjs.com/package/@otfdashkit/tokens)
66
+
67
+ ## Theming
68
+
69
+ Pick a theme by setting an attribute &mdash; tokens cascade to every component:
70
+
71
+ ```html
72
+ <html data-theme="ocean-teal" class="dark">
73
+ ```
74
+
75
+ Or write `localStorage('otf-theme')` and the floating theme picker (in the SaaS demo) updates live.
76
+
77
+ ## AI-coding-tool-native
78
+
79
+ 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.
80
+
81
+ ```ts
82
+ import { Button } from '@otfdashkit/ui'
83
+
84
+ // JSDoc on Button:
85
+ // variant: 'primary' | 'secondary' | 'destructive' | 'ghost' | 'outline'
86
+ // size: 'sm' | 'md' | 'lg'
87
+ // See ai/prompts/add-button.md for tested usage patterns.
88
+ ```
89
+
90
+ ## Lint your design system
91
+
92
+ 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.
93
+
94
+ ## Live demos + Storybook
95
+
96
+ - **Web Storybook**: https://ui.otf-kit.dev (every component, every variant)
97
+ - **SaaS dashboard**: [saas.otf-kit.dev](https://saas.otf-kit.dev/) ([source](https://github.com/otf-kit/saas-dashboard))
98
+ - **Fitness app**: [fitness-preview.otf-kit.dev](https://fitness-preview.otf-kit.dev/) ([source](https://github.com/otf-kit/fitness-kit))
99
+
100
+ ## Related packages
101
+
102
+ - [`@otfdashkit/ui-native`](https://www.npmjs.com/package/@otfdashkit/ui-native) &mdash; mobile counterpart, same component API, Tamagui under the hood
103
+ - [`@otfdashkit/tokens`](https://www.npmjs.com/package/@otfdashkit/tokens) &mdash; the design tokens this package consumes
104
+ - [`@otfdashkit/eslint-plugin-otf-design`](https://www.npmjs.com/package/@otfdashkit/eslint-plugin-otf-design) &mdash; design-system lint rules
105
+
106
+ ## Status
107
+
108
+ `v0.1.x` &mdash; alpha. APIs may change before `1.0`. Pin exact versions if you ship to production.
109
+
110
+ ## License
111
+
112
+ MIT &copy; otfdashkit