{ "version": 1, "intro": "Pick components by what the product has to do, not by what looks nice. Each playbook lists the usual needs of a domain, the opendraft components and blocks that serve each one, and how well they fit: ready (use as is), adapt (works with the caveat given) or gap (nothing fits yet; build it from primitives and follow the domain principles).", "fit": { "ready": "Use as is.", "adapt": "Works with the caveat in `gap`.", "gap": "Nothing fits yet; build from primitives and follow the principles." }, "domains": [ { "id": "security", "title": "Security and compliance", "short": "Security", "summary": "Security operations, threat detection, access control and audit products. Used by analysts under pressure: dense data, fast triage, irreversible actions.", "signals": [ "security", "soc", "siem", "threat", "incident response", "vulnerability", "edr", "iam", "access control", "audit log", "compliance", "soc 2", "firewall", "fraud", "zero trust", "pentest" ], "principles": [ "Never show severity by color alone. Pair every severity color with a text label (Critical, High, Medium, Low) and use the same scale everywhere.", "Show times as absolute UTC in `font-mono` with a relative hint (for example `14:02:09Z · 3 min ago`). Analysts compare timestamps across systems. `timeline` renders `time` in mono and takes an ISO `timestamp`.", "Make destructive or far-reaching actions (isolate a host, revoke a session, delete a key) require a confirmation that names the consequence, and show who did it and when afterward. Do not offer 'Always allow' (`tool-approval`'s optional `onAlwaysAllow`) for these.", "Mask secrets by default (tokens, keys, hashes). opendraft has no masked input, so render the masked value yourself, add an explicit reveal button and a `copy-button`, and never log or echo the value.", "Favor dense tables and a `command-palette` (Cmd/Ctrl+K) for jumping to an entity. Default these products to the dark theme (add the `dark` class), but keep both themes working.", "Every state change should leave an audit trail the user can see. Plan for an audit-log screen from the start. Record who and when in your backend; the UI components only display it.", "Show what the system knows, not what it concludes: label automated or AI verdicts as such and link the evidence. Do not state or imply that the product makes anyone compliant with a standard." ], "playbook": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/use-cases/security.md", "kit": { "name": "kit-security", "install": "npx shadcn@latest add @opendraft/kit-security", "components": [ "button", "card", "input", "label", "select", "dialog", "badge", "tabs", "field", "page-header", "theme-toggle", "sonner", "table", "timeline", "code-block", "file-diff", "stepper", "copy-button", "approval-card", "tool-approval", "alert", "settings-page", "checkbox", "switch", "repeater-field", "date-range-picker", "command-palette", "stat", "progress", "analytics-dashboard", "auth-screen", "otp-input", "agent-workspace", "citations" ] }, "needs": [ { "need": "Triage a stream of alerts", "fit": "adapt", "notes": "`table` is virtualized (pass `rowHeight` and `height` or `maxHeight`), sortable, and has `selectable` with `onSelectionChange(ids)` and `getRowId`. Render severity and status as `badge` (with `dot`) in a column `cell`. Build the bulk bar yourself: when `ids.length > 0` show `Button`s (Acknowledge, Close, Assign) above the table. Filter your own data with `tabs` (status), `select` (severity) and `input` (search) and pass the filtered rows in.", "gap": "`filter-table` is NOT for this: its rows are fixed task rows {task, date, status todo|progress|done, owner}. `selection-actions` is NOT a bulk bar: it is an AI text-rewrite bar over a passage. There is no four-level severity component (use `badge`: Critical to `destructive`, High and Medium to `warning`, Low to `secondary`, always with the word) and no saved-filter control. On phones the table scrolls sideways; there is no card mode.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Investigate an incident: timeline of events and evidence", "fit": "ready", "notes": "`timeline` is the event feed: per item `time` (mono), ISO `timestamp`, `title`, `description`, `meta` (actor or source), `status` (default, success, warning, destructive, current, upcoming; markers are never color only) and expandable `children` for raw evidence. Use `align=\"right-time\"` for a time column, `collapsible` with `max` for long lists, and pass events newest first yourself (`newestFirst` only changes the label). `code-block` shows a raw event or command, `file-diff` a config change, `stepper` (horizontal or vertical) the response stages.", "gap": null, "components": [ { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "code-block", "title": "Code Block", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/code-block.md", "install": "npx shadcn@latest add @opendraft/code-block" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "file-diff", "title": "File Diff", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/file-diff.md", "install": "npx shadcn@latest add @opendraft/file-diff" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "copy-button", "title": "Copy Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/copy-button.md", "install": "npx shadcn@latest add @opendraft/copy-button" } ] }, { "need": "Confirm and run response actions", "fit": "adapt", "notes": "`approval-card` takes a `title`, body `children` and `onApprove`, `onRequestChanges`, `onReject` (the last two render only when passed), a controlled `status` and a `result` slot where you put 'Approved by X at 14:02:09Z'. Use `tool-approval` when an AI agent proposes an action: it lists `parameters` and has allow once and deny. For the dangerous ones, build a `dialog` with an `input` the user types the host name into, and keep the confirm `Button` disabled until it matches (the type-to-confirm in `settings-page`'s danger zone does this). `sonner` reports the result.", "gap": "No built-in typed-confirmation or two-person approval component: assemble it from `dialog` + `input` + `button`. Who approved and when comes from your backend.", "components": [ { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" }, { "slug": "tool-approval", "title": "Tool Approval", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tool-approval.md", "install": "npx shadcn@latest add @opendraft/tool-approval" }, { "slug": "dialog", "title": "Dialog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dialog.md", "install": "npx shadcn@latest add @opendraft/dialog" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "sonner", "title": "Toast", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/sonner.md", "install": "npx shadcn@latest add @opendraft/sonner" } ] }, { "need": "Manage users, roles and permissions", "fit": "adapt", "notes": "`settings-page` with `sections={[\"team\"]}` gives a member list, invite (`onInvite`) and role change. For long user lists use `table` with `selectable`. A small permission matrix can be a `table` whose column `cell` renders a `checkbox` per role and permission. `repeater-field` edits rule lists such as allowed IP ranges.", "gap": "`settings-page` roles are fixed to owner, admin, member and viewer. No permission-matrix component: build it from `table` + `checkbox`; it will not collapse well on phones.", "components": [ { "slug": "settings-page", "title": "Settings Page", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/settings-page.md", "install": "npx shadcn@latest add @opendraft/settings-page" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "switch", "title": "Switch", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/switch.md", "install": "npx shadcn@latest add @opendraft/switch" }, { "slug": "repeater-field", "title": "Repeater Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/repeater-field.md", "install": "npx shadcn@latest add @opendraft/repeater-field" } ] }, { "need": "Search and review an audit log", "fit": "adapt", "notes": "`table` with sortable columns, `onEndReached` plus `loading` for paging, and mono cells for IDs and times. Filters are your own `date-range-picker`, `select` and `input`. Show a change with `file-diff` (lines typed added, removed, context) and one entity's history with `timeline`.", "gap": "`date-range-picker` values are calendar dates (YYYY-MM-DD) with no time of day, so narrow by time with your own fields. `diff-table` is NOT usable here: it is a fixed 3-column {id, dept, email} proposed-edit widget with keep or drop and Apply. `records-table` is NOT usable: it is an AI spreadsheet with fixed {name, tags, last, strength, website} rows. `filter-table` is task-shaped.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "date-range-picker", "title": "Date Range Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-range-picker.md", "install": "npx shadcn@latest add @opendraft/date-range-picker" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "file-diff", "title": "File Diff", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/file-diff.md", "install": "npx shadcn@latest add @opendraft/file-diff" }, { "slug": "command-palette", "title": "Command Palette", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/command-palette.md", "install": "npx shadcn@latest add @opendraft/command-palette" } ] }, { "need": "Show security posture and compliance coverage", "fit": "adapt", "notes": "`stat` and `StatGroup` for headline numbers, with `delta` and `goodWhen=\"down\"` for counts where fewer is better. `progress` for control coverage: for coverage where low is bad, set `invert` with `tone=\"auto\"` so a low value turns warning or destructive. `analytics-dashboard` can show findings: relabel through `labels` (including `columns`), supply `metrics`, per-metric `series`, `rows` and `channels` (share bars, usable for a severity breakdown) and set `valueColumn`. Pass `fill={false}` inside a scrolling page.", "gap": "`analytics-dashboard` ranges are fixed at 7d, 30d and 90d and its table columns are fixed to name, visitors, conversion and duration (relabel or replace the last with `valueColumn`). No gauge or risk-score ring.", "components": [ { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "analytics-dashboard", "title": "Analytics Dashboard", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/analytics-dashboard.md", "install": "npx shadcn@latest add @opendraft/analytics-dashboard" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" } ] }, { "need": "Sign in with SSO and MFA", "fit": "adapt", "notes": "`auth-screen` handles email and password, remember me, forgot password and provider buttons (`providers`, `onProvider`). `onSubmit` may throw to show an error. After it succeeds, show your own second screen with `otp-input` (`length`, `pattern`, `onComplete`, `invalid`) inside a `field`, and an `alert` for lockout or error states.", "gap": "`auth-screen` has no built-in MFA step, passkey or SSO-by-domain flow; the code step is a screen you build and the provider supplies the verification.", "components": [ { "slug": "auth-screen", "title": "Auth Screen", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/auth-screen.md", "install": "npx shadcn@latest add @opendraft/auth-screen" }, { "slug": "otp-input", "title": "OTP Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/otp-input.md", "install": "npx shadcn@latest add @opendraft/otp-input" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" } ] }, { "need": "Manage API keys and secrets", "fit": "adapt", "notes": "List keys in a `table` with created, last used and a `badge` for status. Reveal a new key once in a `dialog` with a `copy-button` and an `alert` that it will not be shown again. Revoke with a type-to-confirm `dialog`.", "gap": "No masked or reveal input; use `input type=\"password\"` and your own show button.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "dialog", "title": "Dialog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dialog.md", "install": "npx shadcn@latest add @opendraft/dialog" }, { "slug": "copy-button", "title": "Copy Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/copy-button.md", "install": "npx shadcn@latest add @opendraft/copy-button" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" } ] }, { "need": "Show active incidents and degraded feeds", "fit": "ready", "notes": "`alert` has variants default, info, success, warning and destructive, a `banner` mode for full-width notices, an `AlertAction` slot for a button and optional `dismissible`.", "gap": null, "components": [ { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" } ] }, { "need": "Ask an AI analyst to summarize or investigate", "fit": "ready", "notes": "`agent-workspace` takes your `conversations`, `messages`, `tasks` and an async `onSend` that returns the reply (thinking rows, tool steps, streamed `answer` tokens, `sources`, `followUps`). Show evidence with `citations` and gate any action behind `approval-card` or `tool-approval`.", "gap": null, "components": [ { "slug": "agent-workspace", "title": "Agent Workspace", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/agent-workspace.md", "install": "npx shadcn@latest add @opendraft/agent-workspace" }, { "slug": "citations", "title": "Citations", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/citations.md", "install": "npx shadcn@latest add @opendraft/citations" }, { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" }, { "slug": "tool-approval", "title": "Tool Approval", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tool-approval.md", "install": "npx shadcn@latest add @opendraft/tool-approval" } ] }, { "need": "Show assets or attack paths on a map or graph", "fit": "gap", "notes": "Nothing in opendraft draws a graph or a map. `flowchart` is a Trigger and If/Else workflow canvas with condition chips, not a network or attack-path graph.", "gap": "No network graph or geographic map. Use a graph or map library (see integrations) and keep the entity list in a `table` beside it.", "components": [] } ], "screens": [ { "name": "Security operations overview", "compose": [ "page-header", "alert", "stat", "analytics-dashboard", "table" ] }, { "name": "Alert queue", "compose": [ "page-header", "tabs", "input", "select", "table", "badge", "button", "command-palette" ] }, { "name": "Incident detail", "compose": [ "page-header", "badge", "tabs", "timeline", "stepper", "code-block", "approval-card", "copy-button" ] }, { "name": "Access management", "compose": [ "page-header", "settings-page", "table", "checkbox", "dialog" ] }, { "name": "Audit log", "compose": [ "page-header", "date-range-picker", "select", "input", "table", "file-diff" ] } ], "integrations": [ { "for": "Network or attack-path graph", "options": [ "React Flow", "Cytoscape.js" ], "note": "Draw nodes and edges with our tokens for color and type; keep the severity text labels." }, { "for": "Geographic threat or asset map", "options": [ "MapLibre GL JS", "deck.gl" ], "note": "Style markers with status tokens and always give each marker a text label for assistive technology." }, { "for": "Event volume and trend charts", "options": [ "Recharts", "uPlot" ], "note": "uPlot copes with very large series; Recharts is quicker to theme. The chart inside analytics-dashboard is fixed to its own metrics." }, { "for": "Single sign-on and MFA", "options": [ "Clerk", "Auth0", "WorkOS" ], "note": "Put the provider's flow behind the auth-screen block (onSubmit and onProvider) and use otp-input for codes." } ] }, { "id": "it-infrastructure", "title": "IT, DevOps and infrastructure", "short": "IT and DevOps", "summary": "Monitoring, incident management, deployments, logs and internal tools for engineers and IT teams.", "signals": [ "devops", "sre", "infrastructure", "monitoring", "observability", "uptime", "status page", "deployment", "ci/cd", "pipeline", "logs", "kubernetes", "cloud", "helpdesk", "it service", "on-call", "incident", "internal tool", "admin panel" ], "principles": [ "Status needs a word and a shape, not just a color: Operational, Degraded, Down, Maintenance. `status-indicator` already uses exactly this vocabulary (plus Unknown) with a distinct shape per state; keep one vocabulary across the product.", "Show times in UTC with `font-mono`, and let the user switch to local time in one place (a single setting or toggle that every screen reads; `settings-page` has a timezone select in its profile section).", "Numbers that change should use `tabular-nums` so columns don't jitter; use `animated-number` sparingly on dashboards, never in tables or logs.", "Long-running work (deploys, migrations) shows progress, current step and a way to cancel. Never leave a spinner with no step. Cancel is a `Button` you add; none of the progress components includes one.", "Provide a copy button next to every ID, command, hash and URL.", "Treat logs and code as data: monospaced, wrap toggle, selectable, searchable. `code-block` has a `wrap` prop and line numbers; search and filtering are yours to build.", "Never put real secrets in props that end up in client bundles or logs; show masked values and fetch reveals on demand." ], "playbook": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/use-cases/it-infrastructure.md", "kit": { "name": "kit-it-infrastructure", "install": "npx shadcn@latest add @opendraft/kit-it-infrastructure", "components": [ "button", "card", "input", "label", "select", "dialog", "badge", "tabs", "field", "page-header", "theme-toggle", "sonner", "status-indicator", "stat", "progress", "alert", "site-header", "timeline", "table", "stepper", "checkbox", "avatar", "code-block", "copy-button", "analytics-dashboard", "insight-cards", "date-range-picker", "todo-list", "file-diff", "approval-card", "repeater-field", "switch", "command-palette", "kbd", "settings-page", "auth-screen", "agent-workspace", "tool-approval", "citations" ] }, "needs": [ { "need": "Service health overview", "fit": "ready", "notes": "`StatusIndicator` (`status` operational, degraded, down, maintenance, unknown; optional `pulse`) next to each service name, and `UptimeBar` for the 90-day bars: pass `segments` (one `{status, label}` per day), `uptime` text and `name` for the accessible summary. `stat` tiles for headline numbers, `progress` for quota use, `alert` (info or warning, `banner`) for planned maintenance.", "gap": null, "components": [ { "slug": "status-indicator", "title": "Status Indicator", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/status-indicator.md", "install": "npx shadcn@latest add @opendraft/status-indicator" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" } ] }, { "need": "Public status page", "fit": "ready", "notes": "`alert` banner for the current incident, `StatusIndicator` and `UptimeBar` per component, and `timeline` for past incident updates (newest first, `collapsible` with `max`).", "gap": null, "components": [ { "slug": "site-header", "title": "Site Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/site-header.md", "install": "npx shadcn@latest add @opendraft/site-header" }, { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "status-indicator", "title": "Status Indicator", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/status-indicator.md", "install": "npx shadcn@latest add @opendraft/status-indicator" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" } ] }, { "need": "Incident management and on-call", "fit": "adapt", "notes": "Incident list in `table` (severity and status as `badge` cells, `tabs` for Open, Mitigated, Resolved). Incident updates in `timeline` (`status` warning, destructive, current, success; expandable `children` for notes). Lifecycle stages (Investigating, Identified, Monitoring, Resolved) in `stepper`. Runbook steps as `checkbox` rows. `todo-list` is a read-only display of an agent's task plan with no check-off, so it does not fit a human runbook.", "gap": "No on-call schedule or rota view and no paging or acknowledge control; build the rota as a `table` with `avatar` and `badge`.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" }, { "slug": "avatar", "title": "Avatar", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/avatar.md", "install": "npx shadcn@latest add @opendraft/avatar" } ] }, { "need": "Browse and search logs", "fit": "adapt", "notes": "Use the virtualized `table` with fixed `rowHeight`, mono cells, a level `badge` column, `onEndReached` and `loading` for paging, and `input`, `select` and `tabs` above it for search and level filters. `code-block` (`showLineNumbers`, `highlightLines`, `wrap`, `maxHeight`, `copyable`, `status=\"streaming\"`) shows one entry's full payload or a stack trace. `code-panel` is not suited: it is a small sample-shaped card capped at about 420px wide.", "gap": "No log viewer. There is no follow or live-tail mode, so you append rows to `data` and manage scroll position yourself; no match highlighting; columns hide into a sideways scroll on phones.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "code-block", "title": "Code Block", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/code-block.md", "install": "npx shadcn@latest add @opendraft/code-block" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "copy-button", "title": "Copy Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/copy-button.md", "install": "npx shadcn@latest add @opendraft/copy-button" } ] }, { "need": "Metrics dashboards", "fit": "adapt", "notes": "`analytics-dashboard` gives KPI cards with deltas, a per-metric trend chart, a ranked table and a share breakdown; relabel it through `labels` and feed it `data` per range. `InsightChart` is exported from the `insight-cards` file: it plots several lines (`lines` of `{id, values, tone}`), an optional dashed `threshold`, hover cursor and `tooltip`, which suits a latency or error-rate chart with an alert threshold. `date-range-picker` takes YYYY-MM-DD dates.", "gap": "`analytics-dashboard` ranges are fixed at 7d, 30d and 90d and its table columns are name, visitors, conversion and duration (swap the last for `valueColumn`). `InsightChart` has no axes, zoom or legend; it needs your own wrapper (it is also driven by controlled `index` and `onIndexChange`). For real time-series work use a chart library.", "components": [ { "slug": "analytics-dashboard", "title": "Analytics Dashboard", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/analytics-dashboard.md", "install": "npx shadcn@latest add @opendraft/analytics-dashboard" }, { "slug": "insight-cards", "title": "Insight Cards", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/insight-cards.md", "install": "npx shadcn@latest add @opendraft/insight-cards" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "date-range-picker", "title": "Date Range Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-range-picker.md", "install": "npx shadcn@latest add @opendraft/date-range-picker" } ] }, { "need": "Deployments and pipelines", "fit": "adapt", "notes": "Stages in a `stepper` (use `description` for the commit, duration or environment). `todo-list` can show live step progress for a running deploy (`items` with `status` pending, in-progress, completed, cancelled, per-item `progress` and `detail`), but it is styled as an agent plan. Deploy history in `timeline`. Gate production with `approval-card`; show the change with `file-diff`. Add your own Cancel `Button`.", "gap": "No pipeline or dependency graph. `flowchart` is NOT a status graph: it is an editable Trigger and If/Else workflow canvas with draggable cards and condition chips. `task-rows` is payment-shaped (label, amount, details) and does not fit.", "components": [ { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "todo-list", "title": "Todo List", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/todo-list.md", "install": "npx shadcn@latest add @opendraft/todo-list" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "file-diff", "title": "File Diff", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/file-diff.md", "install": "npx shadcn@latest add @opendraft/file-diff" }, { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" } ] }, { "need": "Configuration, environment variables and secrets", "fit": "adapt", "notes": "`repeater-field` (`value`, `renderRow`, `createItem`, `min`, `max`) for key and value rows, with an `input` pair per row. Show a config change before saving with `file-diff`. Use `dialog` to confirm changes to production.", "gap": "No masked key-value editor. Use `input type=\"password\"` plus your own show button for values.", "components": [ { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "repeater-field", "title": "Repeater Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/repeater-field.md", "install": "npx shadcn@latest add @opendraft/repeater-field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "copy-button", "title": "Copy Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/copy-button.md", "install": "npx shadcn@latest add @opendraft/copy-button" }, { "slug": "switch", "title": "Switch", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/switch.md", "install": "npx shadcn@latest add @opendraft/switch" }, { "slug": "dialog", "title": "Dialog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dialog.md", "install": "npx shadcn@latest add @opendraft/dialog" }, { "slug": "file-diff", "title": "File Diff", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/file-diff.md", "install": "npx shadcn@latest add @opendraft/file-diff" } ] }, { "need": "Inventory of servers, services or assets", "fit": "ready", "notes": "Virtualized `table` for thousands of rows: sortable, resizable and reorderable columns, `selectable` with `onSelectionChange`, inline `editable` cells with `onCellEdit`. Show a bulk bar of `Button`s when rows are selected. Filter your own data. `records-table` is NOT a general grid: it is an AI spreadsheet with fixed {name, tags, last, strength, website} rows.", "gap": null, "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "status-indicator", "title": "Status Indicator", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/status-indicator.md", "install": "npx shadcn@latest add @opendraft/status-indicator" }, { "slug": "command-palette", "title": "Command Palette", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/command-palette.md", "install": "npx shadcn@latest add @opendraft/command-palette" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" } ] }, { "need": "Command or terminal-style tools", "fit": "gap", "notes": "`command-palette` runs actions (items with `onSelect`, groups, hints and keywords). `code-block` can show command output, appended as it streams (`status=\"streaming\"`). `agent-screen` is NOT a terminal: it is a card that views an agent's remote screen image or video.", "gap": "No terminal emulator (no PTY, ANSI colors or input line). Embed one such as xterm.js if users need a real shell.", "components": [ { "slug": "command-palette", "title": "Command Palette", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/command-palette.md", "install": "npx shadcn@latest add @opendraft/command-palette" }, { "slug": "code-block", "title": "Code Block", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/code-block.md", "install": "npx shadcn@latest add @opendraft/code-block" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "kbd", "title": "Kbd", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/kbd.md", "install": "npx shadcn@latest add @opendraft/kbd" } ] }, { "need": "Team, access and settings", "fit": "ready", "notes": "Pass the real workspace name, members and billing; `sections` chooses which tabs show. Team roles are fixed to owner, admin, member and viewer.", "gap": null, "components": [ { "slug": "settings-page", "title": "Settings Page", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/settings-page.md", "install": "npx shadcn@latest add @opendraft/settings-page" }, { "slug": "auth-screen", "title": "Auth Screen", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/auth-screen.md", "install": "npx shadcn@latest add @opendraft/auth-screen" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" } ] }, { "need": "AI assistant for operations", "fit": "ready", "notes": "Supply `conversations`, `messages` and an `onSend` that returns the reply. Ask for approval (`approval-card` or `tool-approval`) before any action that changes production.", "gap": null, "components": [ { "slug": "agent-workspace", "title": "Agent Workspace", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/agent-workspace.md", "install": "npx shadcn@latest add @opendraft/agent-workspace" }, { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" }, { "slug": "tool-approval", "title": "Tool Approval", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tool-approval.md", "install": "npx shadcn@latest add @opendraft/tool-approval" }, { "slug": "citations", "title": "Citations", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/citations.md", "install": "npx shadcn@latest add @opendraft/citations" } ] } ], "screens": [ { "name": "Status overview", "compose": [ "page-header", "alert", "stat", "status-indicator", "progress" ] }, { "name": "Incident list and detail", "compose": [ "page-header", "table", "tabs", "badge", "stepper", "timeline", "checkbox" ] }, { "name": "Deployments", "compose": [ "page-header", "stepper", "todo-list", "timeline", "file-diff", "approval-card" ] }, { "name": "Logs", "compose": [ "page-header", "input", "select", "tabs", "table", "code-block" ] }, { "name": "Public status page", "compose": [ "site-header", "alert", "status-indicator", "timeline" ] }, { "name": "Settings and access", "compose": [ "settings-page" ] } ], "integrations": [ { "for": "Metrics and time-series dashboards", "options": [ "Recharts", "uPlot", "Apache ECharts" ], "note": "Wrap the chart so colors come from CSS variables, and show a table fallback for accessibility." }, { "for": "Log search at scale", "options": [ "OpenSearch", "Loki", "Elasticsearch" ], "note": "The Table is already virtualized; for millions of lines the filtering and paging belong server-side (feed it with onEndReached)." }, { "for": "Pipeline and dependency graphs", "options": [ "React Flow", "Dagre layout" ], "note": "Use stepper or timeline for linear pipelines and a graph library when stages branch or users must pan and zoom." }, { "for": "Terminal emulator", "options": [ "xterm.js" ], "note": "opendraft has no terminal; theme xterm.js with the code font and background tokens." }, { "for": "Live updates", "options": [ "Server-sent events", "WebSockets", "Ably" ], "note": "Update rows in place and highlight what changed without moving the layout under the cursor." } ] }, { "id": "aviation", "title": "Aviation and travel operations", "short": "Aviation", "summary": "Airline and airport operations, flight information, booking and check-in, crew and maintenance tools. Safety-critical context: clarity and correctness beat flourish.", "signals": [ "aviation", "airline", "airport", "flight", "aircraft", "pilot", "crew", "boarding", "check-in", "mro", "maintenance", "notam", "metar", "air traffic", "charter", "fbo", "ground handling" ], "principles": [ "State times with an explicit zone. Use 24-hour time, mark UTC as `Z`, and show the airport's local time beside it. Never leave a time ambiguous. `date-picker` has a 24-hour time field (`time`, `hourCycle={24}`) but no time-zone support, so store the zone yourself and format with `Intl.DateTimeFormat` and a `timeZone`.", "Flight status is always a word first (On time, Delayed, Boarding, Departed, Cancelled) with a color second (`badge` with `dot`). Show the reason and the new time for any delay.", "Use IATA or ICAO codes in `font-mono` with the full name on hover or beneath, for example `LIS` and Lisbon.", "On safety-critical screens (maintenance sign-off, checklists, weather) avoid decorative motion (skip `text-scramble` and `animated-number`), show who signed and when, and require an explicit confirm. Prefer `approval-card` over a quiet toggle. These screens record a sign-off; they do not replace your approved maintenance or operational records system.", "Design for tablets, gloves and bright light: large touch targets, high contrast, no hover-only information.", "A live board updates in place without shifting the layout under a user's cursor. Highlight what changed, then settle. No component does the highlight for you." ], "playbook": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/use-cases/aviation.md", "kit": { "name": "kit-aviation", "install": "npx shadcn@latest add @opendraft/kit-aviation", "components": [ "button", "card", "input", "label", "select", "dialog", "badge", "tabs", "field", "page-header", "theme-toggle", "sonner", "table", "alert", "text-scramble", "timeline", "stepper", "stat", "progress", "copy-button", "date-picker", "date-range-picker", "quantity-stepper", "radio-group", "command-palette", "repeater-field", "checkbox", "order-confirmation", "ticket-pass", "qr-code", "tooltip", "avatar", "textarea", "approval-card", "dropzone", "analytics-dashboard", "status-indicator", "site-header" ] }, "needs": [ { "need": "Departures and arrivals board", "fit": "adapt", "notes": "`table` is virtualized (set `rowHeight` and `height`) with a sortable time column, mono code and flight-number cells, and a status `badge` (`dot`) in a column `cell`. `tabs` switch Departures and Arrivals. `text-scramble` can resolve a changed gate or time to its new text. `alert` for a disruption banner.", "gap": "No split-flap display. No built-in highlight when a row changes. On phones the table scrolls sideways (it does not reflow); there is no card mode, so build a `card` list for small screens.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "text-scramble", "title": "Text Scramble", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/text-scramble.md", "install": "npx shadcn@latest add @opendraft/text-scramble" } ] }, { "need": "Flight detail and itinerary", "fit": "gap", "notes": "`detail-page` is NOT this: it is an event-ticket purchase page (hero image, tiers with quantity and capacity, running total, waitlist, schedule and FAQ tabs). Compose instead: `page-header` with a status `badge`; `stat` tiles for scheduled and estimated times, gate and aircraft; `progress` (label and `valueLabel`) for flight progress; and the legs as a `timeline` (`time`, ISO `timestamp`, `meta` for terminal or gate, `status` current or upcoming) or a vertical `stepper` whose `description` carries 'local time · airport'. `alert` for delay reasons.", "gap": "No ready-made flight detail page and no route or flight-path map.", "components": [ { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "card", "title": "Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/card.md", "install": "npx shadcn@latest add @opendraft/card" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "copy-button", "title": "Copy Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/copy-button.md", "install": "npx shadcn@latest add @opendraft/copy-button" } ] }, { "need": "Search for a flight", "fit": "adapt", "notes": "Form built from `field` / `FieldGroup`: origin and destination, one date with `date-picker` or an outbound and return range with `date-range-picker` (YYYY-MM-DD, no time of day), passengers with `quantity-stepper`, cabin with `radio-group` or `select`. For an airport picker, a controlled `command-palette` (`open`, `onOpenChange`, items with IATA codes in `keywords`, `onSelect` sets the field) is a workable hack. Render results as a `table` with a select `Button` in a `cell`.", "gap": "No airport or route picker and no fare comparison grid. `catalog` is NOT a flight list: its items are events {title, host, location, category, date, price, capacity, remaining}, with no origin, destination or times.", "components": [ { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "date-picker", "title": "Date Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-picker.md", "install": "npx shadcn@latest add @opendraft/date-picker" }, { "slug": "date-range-picker", "title": "Date Range Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-range-picker.md", "install": "npx shadcn@latest add @opendraft/date-range-picker" }, { "slug": "quantity-stepper", "title": "Quantity Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/quantity-stepper.md", "install": "npx shadcn@latest add @opendraft/quantity-stepper" }, { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" }, { "slug": "command-palette", "title": "Command Palette", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/command-palette.md", "install": "npx shadcn@latest add @opendraft/command-palette" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Passenger details and payment", "fit": "gap", "notes": "`checkout` is event-booking shaped: fixed fields (name, email, phone, an optional attendee, delivery by email or desk, pay by card or later) and a cart of items with quantity, fees and discount codes. It cannot collect per-passenger details such as date of birth or travel documents. Build a `stepper` wizard with one `FieldSet` per passenger (`repeater-field` for several, or a loop), `date-picker` for dates of birth, `select` for title and nationality, `checkbox` for consents. Take payment with your provider's hosted fields.", "gap": "No passenger form and no payment step that fits a flight booking; do not push passenger data through `checkout`.", "components": [ { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "date-picker", "title": "Date Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-picker.md", "install": "npx shadcn@latest add @opendraft/date-picker" }, { "slug": "repeater-field", "title": "Repeater Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/repeater-field.md", "install": "npx shadcn@latest add @opendraft/repeater-field" }, { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" } ] }, { "need": "Booking confirmation", "fit": "adapt", "notes": "`order-confirmation` can be relabelled as a booking confirmation through `labels` (title, order number, buttons) and `order` (lines with price, `tickets` with `fields` and a `code`). It shows one `ticket-pass` per ticket.", "gap": "It is ticket-shaped with a fixed 3-step stepper (`labels.steps` renames the three steps, you cannot add or remove one), a stat row for date, tickets and total, and a QR code per ticket.", "components": [ { "slug": "order-confirmation", "title": "Order Confirmation", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/order-confirmation.md", "install": "npx shadcn@latest add @opendraft/order-confirmation" }, { "slug": "ticket-pass", "title": "Ticket Pass", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/ticket-pass.md", "install": "npx shadcn@latest add @opendraft/ticket-pass" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" } ] }, { "need": "Boarding pass", "fit": "adapt", "notes": "`ticket-pass` takes `title`, `eyebrow`, free-form `fields` (Gate, Seat, Group, Boards at, Terminal), `code`, `status` (valid, used, expired, void), `dark`, `tone` and an `actions` slot. The QR drawn is real and encodes `code`.", "gap": "It draws only a QR code. Airline boarding passes use a PDF417, Aztec or QR code carrying data formatted and issued by the airline's system; encode only what your airline system gives you, and use a barcode library for other symbologies. Treat this as a display of the pass, not the credential.", "components": [ { "slug": "ticket-pass", "title": "Ticket Pass", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/ticket-pass.md", "install": "npx shadcn@latest add @opendraft/ticket-pass" }, { "slug": "qr-code", "title": "QR Code", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/qr-code.md", "install": "npx shadcn@latest add @opendraft/qr-code" } ] }, { "need": "Seat selection", "fit": "gap", "notes": "Nothing renders a seat map. Build a grid of `button`s (with `aria-pressed` and a text seat label such as 14A) and mark taken, extra-legroom and selected states with text as well as color, with a `badge` legend and `tooltip` for price. `radio-group` fits the choice among a few options, not a cabin grid.", "gap": "No seat map component.", "components": [ { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "tooltip", "title": "Tooltip", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tooltip.md", "install": "npx shadcn@latest add @opendraft/tooltip" }, { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" } ] }, { "need": "Crew and roster scheduling", "fit": "gap", "notes": "A `table` (crew rows, a column per day with a duty `badge` in each `cell`) lists a roster. `timeline` shows one person's duties for a day in order, with `meta` for the airport. `date-range-picker` chooses the period.", "gap": "No scheduler, Gantt or calendar timeline, and no drag to reassign.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "date-range-picker", "title": "Date Range Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-range-picker.md", "install": "npx shadcn@latest add @opendraft/date-range-picker" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "avatar", "title": "Avatar", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/avatar.md", "install": "npx shadcn@latest add @opendraft/avatar" } ] }, { "need": "Maintenance logs and pre-flight checklists", "fit": "adapt", "notes": "`todo-list` is NOT a checklist: it is a read-only display of an agent's task plan with no way to tick items. Use `checkbox` rows with a `field` for the finding, `textarea` for notes and `dropzone` (with `capture`) for photos. Sign off with `approval-card` (`title`, body `children`, `onApprove`; its `result` slot can show 'Signed by X at 08:14Z'). Show the history in `timeline` and a sortable `table`. `records-table` is NOT usable: it is an AI spreadsheet with fixed {name, tags, last, strength, website} rows.", "gap": "No signature or credential step; who signed and when must come from your authenticated backend and be written by it.", "components": [ { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "textarea", "title": "Textarea", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/textarea.md", "install": "npx shadcn@latest add @opendraft/textarea" }, { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "dropzone", "title": "Dropzone", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dropzone.md", "install": "npx shadcn@latest add @opendraft/dropzone" } ] }, { "need": "Disruption, weather and NOTAM notices", "fit": "ready", "notes": "`alert` has info, warning and destructive variants, a `banner` mode and an `AlertAction` slot (for example a View affected flights button). Pass bulletin text as supplied by your data source, with its issue and validity times in UTC, and link to the source.", "gap": null, "components": [ { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" } ] }, { "need": "Operations control overview", "fit": "adapt", "notes": "On-time performance and disruption counts in `StatGroup` tiles (`delta` with `goodWhen`). `StatusIndicator` for airport or system status. `progress` for stand or gate utilisation. `analytics-dashboard` can be relabelled (`labels`, `valueColumn`, formatters) for flights per hour.", "gap": "`analytics-dashboard` ranges are fixed at 7d, 30d and 90d and its table columns are name, visitors, conversion and duration. No map.", "components": [ { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "analytics-dashboard", "title": "Analytics Dashboard", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/analytics-dashboard.md", "install": "npx shadcn@latest add @opendraft/analytics-dashboard" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "status-indicator", "title": "Status Indicator", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/status-indicator.md", "install": "npx shadcn@latest add @opendraft/status-indicator" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "command-palette", "title": "Command Palette", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/command-palette.md", "install": "npx shadcn@latest add @opendraft/command-palette" } ] } ], "screens": [ { "name": "Departures board", "compose": [ "site-header", "alert", "tabs", "table", "badge" ] }, { "name": "Flight detail", "compose": [ "page-header", "stat", "progress", "timeline", "badge", "alert" ] }, { "name": "Search and booking", "compose": [ "stepper", "field", "date-picker", "date-range-picker", "quantity-stepper", "table", "order-confirmation" ] }, { "name": "Boarding pass", "compose": [ "site-header", "ticket-pass", "qr-code" ] }, { "name": "Maintenance sign-off", "compose": [ "page-header", "checkbox", "field", "approval-card", "table", "timeline" ] }, { "name": "Operations overview", "compose": [ "page-header", "alert", "stat", "analytics-dashboard", "table" ] } ], "integrations": [ { "for": "Flight path and airport maps", "options": [ "MapLibre GL JS", "deck.gl", "Mapbox GL JS" ], "note": "Great-circle arcs and tracks are a map-library job; keep times and codes in the table beside it." }, { "for": "Flight data", "options": [ "FlightAware AeroAPI", "OpenSky Network", "AviationStack" ], "note": "Normalize to UTC and show local airport time beside it." }, { "for": "Time zones", "options": [ "Temporal API", "Luxon", "date-fns-tz" ], "note": "date-picker has no time-zone support; keep the zone as a separate field and convert with one of these." }, { "for": "Barcodes for passes", "options": [ "bwip-js" ], "note": "qr-code only draws QR. bwip-js can render PDF417 and Aztec; scanning is a separate job, for example with zxing-js." }, { "for": "Crew and maintenance scheduling", "options": [ "FullCalendar", "DHTMLX Gantt", "Bryntum" ], "note": "opendraft has no scheduler; embed one and theme it with the CSS variables." } ] }, { "id": "logistics", "title": "Logistics, supply chain and fleet", "short": "Logistics", "summary": "Shipment tracking, dispatch, warehouse and fleet products for operators, drivers and customers who need to know where things are and when they'll arrive.", "signals": [ "logistics", "shipping", "shipment", "freight", "carrier", "courier", "delivery", "last mile", "fleet", "driver", "dispatch", "warehouse", "inventory", "supply chain", "tracking", "3pl", "customs", "proof of delivery" ], "principles": [ "Every shipment shows three things at a glance: status (as a word), where it is, and when it will arrive (an ETA with a confidence or a delay reason). opendraft has no ETA-confidence component; compose `stat` (value, `hint`) with a `badge`.", "Tracking IDs, container numbers and SKUs go in `font-mono` with a `copy-button`.", "Exceptions come first: delayed, held and failed deliveries sort to the top (sort your data; `tabs` for Exceptions first) and carry the reason and the next action.", "Show dates and times in the location's own time zone, and say which zone. `date-picker` has an HH:MM field but no time zone, so keep the zone in a separate `select` and format with `Intl.DateTimeFormat` and `timeZone`.", "Operators work in bulk: lists need row selection with a bulk action bar (`table` with `selectable` and `onSelectionChange`, plus `Button`s you render), and filters that survive a reload.", "Driver and warehouse screens are used one-handed on a phone: large targets, one primary action per screen, works on a poor connection. `table` scrolls sideways on phones and has no card mode, so use stacked `card`s there." ], "playbook": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/use-cases/logistics.md", "kit": { "name": "kit-logistics", "install": "npx shadcn@latest add @opendraft/kit-logistics", "components": [ "button", "card", "input", "label", "select", "dialog", "badge", "tabs", "field", "page-header", "theme-toggle", "sonner", "site-header", "stepper", "timeline", "progress", "copy-button", "stat", "alert", "table", "date-range-picker", "avatar", "date-picker", "repeater-field", "quantity-stepper", "switch", "order-confirmation", "status-indicator", "analytics-dashboard", "dropzone", "checkbox", "qr-code", "radio-group", "tooltip", "insight-cards" ] }, "needs": [ { "need": "Track one shipment (customer-facing)", "fit": "gap", "notes": "`detail-page` is NOT this: it is an event-ticket purchase page (tiers, quantity, total, waitlist). Compose instead: `site-header`, a `card` with the tracking ID plus `copy-button` and a status `badge`; `stepper` for milestones with `description` carrying 'time zone · place' (for example 'CET · Rotterdam hub'); `progress` (with `label` and `valueLabel`) for the journey; `stat` for ETA and carrier; `alert` for a delay or exception. A `timeline` (`time`, ISO `timestamp`, `meta` for the location, `status`) is the better fit for the full scan history.", "gap": "No ready-made tracking page, no ETA-confidence component, no route map.", "components": [ { "slug": "site-header", "title": "Site Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/site-header.md", "install": "npx shadcn@latest add @opendraft/site-header" }, { "slug": "card", "title": "Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/card.md", "install": "npx shadcn@latest add @opendraft/card" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "copy-button", "title": "Copy Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/copy-button.md", "install": "npx shadcn@latest add @opendraft/copy-button" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" } ] }, { "need": "Manage a list of shipments or orders", "fit": "adapt", "notes": "`table`: virtualized (set `rowHeight` and `height` or `maxHeight`), sortable, `selectable` with `onSelectionChange(ids)` and `getRowId`, status `badge` and a mono ID with `copy-button` in column `cell`s, `onEndReached` and `loading` for paging. `tabs` for Exceptions, In transit, Delivered (filter your own data). Show a bulk bar of `Button`s while `ids.length > 0`.", "gap": "Not served by `filter-table` (fixed task rows {task, date, status todo|progress|done, owner}) or `selection-actions` (an AI text-rewrite bar over a passage). No saved filters. On phones the table scrolls sideways; there is no card mode.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "date-range-picker", "title": "Date Range Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-range-picker.md", "install": "npx shadcn@latest add @opendraft/date-range-picker" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "copy-button", "title": "Copy Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/copy-button.md", "install": "npx shadcn@latest add @opendraft/copy-button" } ] }, { "need": "Dispatch board", "fit": "gap", "notes": "`crm-pipeline` is a sales board: deals with company, contact, USD value, owner and close date, hard-coded USD formatting, and fixed 'Add deal' and 'Value (USD)' copy with no label props. Relabelling is not possible. Build columns yourself: a `card` per job with `badge`, `avatar` for the driver and a `select` to move it between stages; add drag with a drag-and-drop library. For a compact version use `tabs` per stage over a `table`.", "gap": "No generic kanban or board.", "components": [ { "slug": "card", "title": "Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/card.md", "install": "npx shadcn@latest add @opendraft/card" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "avatar", "title": "Avatar", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/avatar.md", "install": "npx shadcn@latest add @opendraft/avatar" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" } ] }, { "need": "Create a shipment or booking", "fit": "adapt", "notes": "Wizard with `stepper`; `FieldGroup` / `FieldSet` for addresses; packages as rows in `repeater-field` (weight, size, quantity with `quantity-stepper`). Pickup window with `date-picker` using `time` and `hourCycle={24}`. Finish with `order-confirmation` relabelled as a booking confirmation (`labels`, `order.lines`, `order.tickets` with `fields` and a `code`).", "gap": "`date-picker` has no time zone: add a `select` for the zone and store it with the value. `order-confirmation` is ticket-shaped with a fixed 3-step stepper (rename only) and a QR per ticket. `checkout` is event-booking shaped (name, email, phone, attendee, card) and does not fit. No address autocomplete.", "components": [ { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "date-picker", "title": "Date Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-picker.md", "install": "npx shadcn@latest add @opendraft/date-picker" }, { "slug": "repeater-field", "title": "Repeater Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/repeater-field.md", "install": "npx shadcn@latest add @opendraft/repeater-field" }, { "slug": "quantity-stepper", "title": "Quantity Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/quantity-stepper.md", "install": "npx shadcn@latest add @opendraft/quantity-stepper" }, { "slug": "switch", "title": "Switch", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/switch.md", "install": "npx shadcn@latest add @opendraft/switch" }, { "slug": "order-confirmation", "title": "Order Confirmation", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/order-confirmation.md", "install": "npx shadcn@latest add @opendraft/order-confirmation" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" } ] }, { "need": "Fleet and driver overview", "fit": "adapt", "notes": "`StatGroup` for utilization and on-time rate (`delta`, `goodWhen`). Driver and vehicle list in `table` with `avatar` and `StatusIndicator` (operational, degraded, down, maintenance) cells. `progress` for hours or fuel. `analytics-dashboard` works if the shape is KPIs, a trend per metric, a ranked list and a share breakdown; relabel via `labels`, `valueColumn` and the format props.", "gap": "No live map of vehicle positions. `analytics-dashboard` ranges are fixed at 7d, 30d and 90d.", "components": [ { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "status-indicator", "title": "Status Indicator", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/status-indicator.md", "install": "npx shadcn@latest add @opendraft/status-indicator" }, { "slug": "avatar", "title": "Avatar", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/avatar.md", "install": "npx shadcn@latest add @opendraft/avatar" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "analytics-dashboard", "title": "Analytics Dashboard", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/analytics-dashboard.md", "install": "npx shadcn@latest add @opendraft/analytics-dashboard" } ] }, { "need": "Warehouse inventory and capacity", "fit": "adapt", "notes": "`table` with `editable` columns and `onCellEdit` for counts (`editable` is ignored on a column that sets `cell`). Zones as `progress`: the default `tone=\"auto\"` measures consumption, so a nearly full zone turns warning then destructive; for stock remaining set `invert`. A hardware scanner that types like a keyboard can fill an `input`. `records-table` is NOT usable: it is an AI spreadsheet with fixed {name, tags, last, strength, website} rows.", "gap": "No camera barcode scan input and no heat map of locations.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" } ] }, { "need": "Proof of delivery", "fit": "adapt", "notes": "Recipient name in `field` and `input`; a failure reason in `select`; photos with `dropzone` (`capture=\"environment\"`, `accept=\"image/*\"`, `maxSize`, `maxFiles`, a `files` list with `progress`; it has no upload logic, you upload in `onFiles`). `qr-code` can show a handover code the recipient presents.", "gap": "No signature pad. `qr-code` only generates codes; it does not scan.", "components": [ { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "dropzone", "title": "Dropzone", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dropzone.md", "install": "npx shadcn@latest add @opendraft/dropzone" }, { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "qr-code", "title": "QR Code", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/qr-code.md", "install": "npx shadcn@latest add @opendraft/qr-code" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" } ] }, { "need": "Rates, quotes and invoicing", "fit": "gap", "notes": "Compose: rate options in a `table` (carrier, service, transit time, price in mono, a select `Button` in a `cell`) or `radio-group` cards, totals in `stat`, invoices in `table` with a status `badge`. `checkout` is NOT a quote flow: it is an event-booking checkout with fixed contact and payment fields.", "gap": "No rate-comparison table and no quote or invoice component.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "card", "title": "Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/card.md", "install": "npx shadcn@latest add @opendraft/card" } ] }, { "need": "ETA with confidence or delay reason", "fit": "gap", "notes": "Show the ETA in `stat` (`value`), the confidence or window in its `hint` (for example 'Likely 16:00 to 18:00 CET'), a `badge` for On time, At risk or Delayed, and an `alert` with the reason for a delay.", "gap": "No ETA-confidence primitive.", "components": [ { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "tooltip", "title": "Tooltip", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tooltip.md", "install": "npx shadcn@latest add @opendraft/tooltip" } ] }, { "need": "Operations analytics", "fit": "adapt", "notes": "Relabel `analytics-dashboard` (shipments, on-time rate, cost per delivery) through `labels`, `data` per range, the format props and `valueColumn` for cost. `InsightChart`, exported from the `insight-cards` file, plots several lines with a `threshold` and hover tooltip.", "gap": "Range tabs are fixed at 7d, 30d and 90d (so no `date-range-picker` link), and the table columns are page-analytics shaped (name, visitors, conversion, duration). `InsightChart` has no axes.", "components": [ { "slug": "analytics-dashboard", "title": "Analytics Dashboard", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/analytics-dashboard.md", "install": "npx shadcn@latest add @opendraft/analytics-dashboard" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "insight-cards", "title": "Insight Cards", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/insight-cards.md", "install": "npx shadcn@latest add @opendraft/insight-cards" } ] } ], "screens": [ { "name": "Public tracking page", "compose": [ "site-header", "card", "stat", "stepper", "timeline", "progress", "badge", "copy-button", "alert" ] }, { "name": "Shipments list", "compose": [ "page-header", "tabs", "input", "select", "date-range-picker", "table", "button" ] }, { "name": "Dispatch board", "compose": [ "page-header", "tabs", "card", "select", "avatar", "badge" ] }, { "name": "Create shipment", "compose": [ "page-header", "stepper", "field", "date-picker", "select", "repeater-field", "order-confirmation" ] }, { "name": "Operations overview", "compose": [ "page-header", "alert", "stat", "analytics-dashboard" ] } ], "integrations": [ { "for": "Live fleet and route map", "options": [ "MapLibre GL JS", "Google Maps Platform", "HERE" ], "note": "Use a map library for positions and routes; keep ETA and status in opendraft components." }, { "for": "Carrier and tracking data", "options": [ "Shippo", "EasyPost", "project44" ], "note": "Map each carrier's status codes to one status vocabulary before it reaches the UI." }, { "for": "Barcode scanning", "options": [ "zxing-js", "Dynamsoft", "Scandit" ], "note": "Scanning is a device capability; opendraft's qr-code only generates codes." }, { "for": "Signature capture", "options": [ "signature_pad", "react-signature-canvas" ], "note": "Pair with dropzone for photos to make proof of delivery." }, { "for": "Drag and drop for a dispatch board", "options": [ "dnd-kit" ], "note": "opendraft has no board component; build columns from card and add dragging with a library." }, { "for": "Time zones", "options": [ "Temporal API", "Luxon", "date-fns-tz" ], "note": "date-picker has no time-zone support; keep the zone as its own field." } ] }, { "id": "healthcare", "title": "Healthcare and patient care", "short": "Healthcare", "summary": "Clinical and patient-facing health products: EHR views, scheduling, telehealth and patient portals. Clinicians work under time pressure with safety-critical data; patients need calm, plain-language screens.", "signals": [ "healthcare", "health", "clinical", "ehr", "emr", "patient", "patient portal", "telehealth", "telemedicine", "appointment", "clinic", "hospital", "medication", "prescription", "lab results", "care plan", "pharmacy", "triage" ], "principles": [ "Show patient identity on every clinical screen: full name, date of birth and an identifier in `font-mono`, in a header that stays pinned (wrap it in your own `sticky top-0 bg-background` container; `page-header` is not sticky by itself). Wrong-patient errors are the failure to design against.", "Always print units and reference ranges beside a measurement (`5.4 mmol/L, ref 3.9 to 5.6`), and never round or reformat a value without saying so. Do not rely on color alone to mark an abnormal or critical value; pair it with a text flag such as High, Low or Critical.", "Critical values and allergy warnings stay visible until a named user acknowledges them. Never auto-dismiss a clinical alert or put one in a toast. Use a persistent `alert` (it only gets a close button if you pass `dismissible`, so don't) with an acknowledge `button` in `AlertAction`, and have your backend record who acknowledged it and when.", "Privacy by default: mask identifiers and sensitive fields until revealed, keep reveals logged, and avoid showing patient names in browser titles, notifications and URLs.", "Write patient-facing copy in plain language at a low reading level, explain medical terms in place, and say what happens next. Lead with the answer (`Your results are normal`), not the data.", "Confirm irreversible or high-risk actions (sign an order, discharge, cancel a procedure) in a `dialog` that names the patient and the consequence. Where your rules require it, keep an audit trail of who viewed or changed a record.", "opendraft is presentation only. It does not check doses, interactions or reference ranges and it makes no clinical-safety or privacy-law guarantee. Every value, flag and warning must come from your system of record, and you remain responsible for clinical validation.", "State the time zone wherever a time is shown or chosen (`date-picker` has an HH:MM field but no time-zone support), and show when a result was last updated." ], "playbook": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/use-cases/healthcare.md", "kit": { "name": "kit-healthcare", "install": "npx shadcn@latest add @opendraft/kit-healthcare", "components": [ "button", "card", "input", "label", "select", "dialog", "badge", "tabs", "field", "page-header", "theme-toggle", "sonner", "avatar", "stat", "alert", "copy-button", "table", "status-indicator", "date-range-picker", "insight-cards", "stepper", "date-picker", "radio-group", "order-confirmation", "ticket-pass", "repeater-field", "approval-card", "tooltip", "textarea", "checkbox", "dropzone", "question-card", "timeline", "todo-list", "progress", "accordion", "chat-app", "message", "message-bubble", "message-scroller", "prompt-input", "animated-sidebar", "auth-screen", "otp-input", "settings-page", "site-header", "empty-state" ] }, "needs": [ { "need": "Patient banner and chart overview", "fit": "adapt", "notes": "`page-header` (eyebrow, title, description, actions slots) with `avatar` and `badge` for name, age and flags; `stat` tiles for latest vitals (value string with units, `hint` for the reference range or time taken, `delta` with `goodWhen` for trend arrows that also announce the direction in text); `tabs` for Summary, Orders, Notes and Results; a persistent `alert` for allergies; `copy-button` for the identifier.", "gap": "No patient-banner component and `page-header` is not sticky: wrap the banner in your own sticky container so it never scrolls away.", "components": [ { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "avatar", "title": "Avatar", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/avatar.md", "install": "npx shadcn@latest add @opendraft/avatar" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "copy-button", "title": "Copy Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/copy-button.md", "install": "npx shadcn@latest add @opendraft/copy-button" } ] }, { "need": "Lab results and vitals with abnormal flags", "fit": "adapt", "notes": "`table` needs a fixed `rowHeight` and a `height` or `maxHeight`, is virtualized, sortable, and scrolls sideways on phones, so keep it to test, value with unit, range, flag and date. Render the value and a text-labelled `badge` (High, Low, Critical) in the `cell` renderer. `status-indicator` can pair a shape with a word if you override `label` and `tone` (its built-in words are system-health ones such as Operational). `stat` for the latest reading. `date-range-picker` filters the period. For a trend line, `insight-cards` also exports `InsightChart`, a small SVG line chart (several lines, optional fill and grid, hover tooltip).", "gap": "No real chart suite. `InsightChart` has no axes or tick labels, only one dashed threshold line (no shaded reference-range band), a pointer-only tooltip (not keyboard reachable) and a fixed plot height, so it is not a sparkline either. `analytics-dashboard` has a metric chart but its ranges are fixed at 7, 30 and 90 days. Always show the values in a `table` beside any chart; use a charting library for bands and axes.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "status-indicator", "title": "Status Indicator", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/status-indicator.md", "install": "npx shadcn@latest add @opendraft/status-indicator" }, { "slug": "date-range-picker", "title": "Date Range Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-range-picker.md", "install": "npx shadcn@latest add @opendraft/date-range-picker" }, { "slug": "insight-cards", "title": "Insight Cards", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/insight-cards.md", "install": "npx shadcn@latest add @opendraft/insight-cards" } ] }, { "need": "Critical-value and safety alerts", "fit": "ready", "notes": "`alert` is persistent by default and has info, success, warning and destructive variants, a `banner` mode and an `AlertAction` slot: put an Acknowledge `button` in it and call your backend with the user and time. Use `dialog` when the acknowledgement needs a reason. `approval-card` can also gate an action but its resolved badge always reads Approved or Rejected (it cannot say Acknowledged), so prefer `alert` plus `button`. Do not use `sonner` for clinical alerts.", "gap": null, "components": [ { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "dialog", "title": "Dialog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dialog.md", "install": "npx shadcn@latest add @opendraft/dialog" }, { "slug": "status-indicator", "title": "Status Indicator", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/status-indicator.md", "install": "npx shadcn@latest add @opendraft/status-indicator" } ] }, { "need": "Appointment booking and scheduling", "fit": "adapt", "notes": "`stepper` (steps accept a `description`, e.g. the chosen clinician and time) for reason, clinician, time and confirm. `date-picker` picks a day: use `min`, `max` and `isDateDisabled` to grey out days with no availability. Time slots are a `radio-group` you style yourself. For the confirmation, `order-confirmation` works if you relabel it (`labels.steps`, `title`, `tickets`, `ticketsHeading`, `admitOne`) and put the visit details in the `fields` of one ticket whose `code` is an opaque booking reference for check-in; you need the `onAddToCalendar` callback.", "gap": "No calendar, week view or slot grid, and `date-picker` has no time-zone support (its optional HH:MM field is a plain local time, so print the zone in text). `order-confirmation` is ticket-shaped: it always prints the email sentence, a Total in money format (a free visit shows 0.00), an order summary of priced lines and a QR ticket. For free visits compose a `ticket-pass`, a `stat` row and `button`s instead. Clinic staff schedules need a scheduler library.", "components": [ { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "date-picker", "title": "Date Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-picker.md", "install": "npx shadcn@latest add @opendraft/date-picker" }, { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "order-confirmation", "title": "Order Confirmation", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/order-confirmation.md", "install": "npx shadcn@latest add @opendraft/order-confirmation" }, { "slug": "ticket-pass", "title": "Ticket Pass", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/ticket-pass.md", "install": "npx shadcn@latest add @opendraft/ticket-pass" } ] }, { "need": "Medication list and orders", "fit": "adapt", "notes": "Active medications in a `table` (dose, route, frequency columns and a status `badge`); `repeater-field` edits multi-line prescriptions, each row built with `field`, `input` and `select` in `renderRow`. Confirm signing in a `dialog` that names the patient and drug. `approval-card` can wrap an order summary with `approveLabel` set to the action, but its resolved badge always says Approved, so use it only where that wording is acceptable.", "gap": "No drug-interaction or dose-check UI, and no medication-specific component; interaction warnings come from your clinical decision support service and are shown with a persistent `alert`.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "dialog", "title": "Dialog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dialog.md", "install": "npx shadcn@latest add @opendraft/dialog" }, { "slug": "repeater-field", "title": "Repeater Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/repeater-field.md", "install": "npx shadcn@latest add @opendraft/repeater-field" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" } ] }, { "need": "Telehealth visit", "fit": "gap", "notes": "Controls (mute, camera, leave) are icon `button`s with `tooltip`s, a waiting-room state is a `badge`, connection quality is a `status-indicator` with a label override, and a connection warning is an `alert`. `avatar` fills a tile when the camera is off.", "gap": "No video surface, tile grid or device check; embed a video SDK and lay out the tiles yourself. For an in-visit text chat compose `message`, `message-bubble` and `prompt-input` (leave `models` empty).", "components": [ { "slug": "avatar", "title": "Avatar", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/avatar.md", "install": "npx shadcn@latest add @opendraft/avatar" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "status-indicator", "title": "Status Indicator", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/status-indicator.md", "install": "npx shadcn@latest add @opendraft/status-indicator" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "tooltip", "title": "Tooltip", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tooltip.md", "install": "npx shadcn@latest add @opendraft/tooltip" } ] }, { "need": "Patient intake forms and consent", "fit": "adapt", "notes": "`stepper` (with step `description`) splits a long form into short steps; `field` and `FieldGroup` give labels, hints and inline errors; `repeater-field` for medications and allergies; `dropzone` accepts insurance card and ID images with `accept`, `maxSize` and `capture=\"environment\"` to open the phone camera (it has no upload logic, you pass `files` and progress). `question-card` suits a short screening questionnaire: one question at a time, single choice auto-advances, `onSubmitted` returns the answers by index.", "gap": "No signature pad and no rich text editor. For date of birth use three `input`/`select` fields: `date-picker` only has previous and next month buttons, so going back decades is slow. `question-card` always shows a Skip action and a free-text 'Something else' option and has no scoring or branching.", "components": [ { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "textarea", "title": "Textarea", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/textarea.md", "install": "npx shadcn@latest add @opendraft/textarea" }, { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" }, { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "dropzone", "title": "Dropzone", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dropzone.md", "install": "npx shadcn@latest add @opendraft/dropzone" }, { "slug": "repeater-field", "title": "Repeater Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/repeater-field.md", "install": "npx shadcn@latest add @opendraft/repeater-field" }, { "slug": "question-card", "title": "Question Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/question-card.md", "install": "npx shadcn@latest add @opendraft/question-card" } ] }, { "need": "Care plan and visit history", "fit": "adapt", "notes": "`timeline` is a strong fit for encounters and events: statuses (success, warning, destructive, current, upcoming) never rely on color alone, mono timestamps, an `items` array, expandable detail for notes or attachments, and collapsible long lists. `progress` with `label` and `valueLabel` for goals (`3 of 5 sessions`). `todo-list` shows plan items with status and optional per-item progress.", "gap": "`todo-list` is a read-only live plan display (it has no toggle callback). For tasks the patient ticks off, use `checkbox` rows.", "components": [ { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "todo-list", "title": "Todo List", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/todo-list.md", "install": "npx shadcn@latest add @opendraft/todo-list" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "accordion", "title": "Accordion", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/accordion.md", "install": "npx shadcn@latest add @opendraft/accordion" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" } ] }, { "need": "Secure messaging with the care team", "fit": "adapt", "notes": "`message` rows (`from` is `user` or `assistant`, mapped to patient and clinician) with `avatar`, a header for name and time, and a footer for 'Read 14:02' text; `message-bubble` variants; `message-scroller` for the transcript; `prompt-input` as the composer (omit `models` to hide the model picker). `chat-app` is the shell with a folding sidebar, and the thread list is built with `animated-sidebar`. Keep an `alert` visible saying messages are not for emergencies.", "gap": "No attachment preview, read-receipt logic, thread list data model or clinician routing (only the slots to render them); only two sides (`user`/`assistant`). Keep the thread data on your own secure backend.", "components": [ { "slug": "chat-app", "title": "Chat App", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/chat-app.md", "install": "npx shadcn@latest add @opendraft/chat-app" }, { "slug": "message", "title": "Message", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/message.md", "install": "npx shadcn@latest add @opendraft/message" }, { "slug": "message-bubble", "title": "Message Bubble", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/message-bubble.md", "install": "npx shadcn@latest add @opendraft/message-bubble" }, { "slug": "message-scroller", "title": "Message Scroller", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/message-scroller.md", "install": "npx shadcn@latest add @opendraft/message-scroller" }, { "slug": "prompt-input", "title": "Prompt Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/prompt-input.md", "install": "npx shadcn@latest add @opendraft/prompt-input" }, { "slug": "avatar", "title": "Avatar", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/avatar.md", "install": "npx shadcn@latest add @opendraft/avatar" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "animated-sidebar", "title": "Sidebar", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/animated-sidebar.md", "install": "npx shadcn@latest add @opendraft/animated-sidebar" } ] }, { "need": "Sign in with MFA and a proxy or caregiver", "fit": "adapt", "notes": "`auth-screen` handles email and password (and optional provider buttons); after its `onSubmit` resolves, show your own step with `otp-input` (`onComplete`, `invalid`) inside `field` and `button`. Caregiver access can use the `team` section of `settings-page` (members with an invite by email and a role).", "gap": "`auth-screen` has no MFA step and `otp-input` has no resend timer; compose them. `settings-page` roles are fixed to owner, admin, member and viewer (viewer is the nearest to a read-only proxy), and the section has no consent scope or expiry, so build those with `switch`, `date-picker` and a `table`.", "components": [ { "slug": "auth-screen", "title": "Auth Screen", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/auth-screen.md", "install": "npx shadcn@latest add @opendraft/auth-screen" }, { "slug": "otp-input", "title": "OTP Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/otp-input.md", "install": "npx shadcn@latest add @opendraft/otp-input" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "settings-page", "title": "Settings Page", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/settings-page.md", "install": "npx shadcn@latest add @opendraft/settings-page" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" } ] } ], "screens": [ { "name": "Patient chart", "compose": [ "page-header", "alert", "stat", "tabs", "table", "timeline", "badge" ] }, { "name": "Results review", "compose": [ "page-header", "date-range-picker", "table", "badge", "alert", "button", "insight-cards" ] }, { "name": "Book an appointment", "compose": [ "site-header", "stepper", "date-picker", "radio-group", "select", "field", "order-confirmation" ] }, { "name": "Patient portal home", "compose": [ "site-header", "stat", "timeline", "empty-state", "button" ] }, { "name": "Intake and consent", "compose": [ "page-header", "stepper", "field", "input", "radio-group", "checkbox", "dropzone", "question-card" ] } ], "integrations": [ { "for": "Clinical data exchange (patients, observations, medications)", "options": [ "HL7 FHIR (SMART on FHIR)", "Epic FHIR APIs", "Medplum" ], "note": "opendraft is presentation only; map FHIR resources to the props of `table`, `stat` and `timeline` in a thin adapter and keep PHI out of client logs." }, { "for": "Telehealth video", "options": [ "Twilio Video", "Daily", "Zoom Video SDK" ], "note": "The SDK renders the video; use opendraft buttons, badges and `alert` for controls, waiting-room state and connection warnings around it." }, { "for": "Vitals and lab trend charts", "options": [ "Recharts", "visx", "Apache ECharts" ], "note": "Only a basic line chart ships (`InsightChart` in `insight-cards`: no axes, one dashed threshold, pointer-only tooltip). For axes, a shaded reference-range band and keyboard access use a charting library styled with the `--blue-*` and semantic tokens, with a text legend and a `table` of the values." }, { "for": "Scheduling and calendar", "options": [ "FullCalendar", "react-big-calendar", "Cal.com" ], "note": "No calendar or week view ships. Use one of these for clinician schedules; keep opendraft `date-picker` and `radio-group` for the patient-facing booking path." }, { "for": "Consent signatures and identity verification", "options": [ "react-signature-canvas", "DocuSign", "Persona" ], "note": "No signature pad is included; capture the signature as an image and store it with a timestamp and the consent text version." } ] }, { "id": "fintech", "title": "Fintech and banking", "short": "Fintech", "summary": "Banking, payments, trading, personal finance and lending products. Money moves, so precision, clear fees and honest balances matter more than delight; many actions cannot be undone.", "signals": [ "fintech", "banking", "bank", "payments", "payment", "transfer", "card", "neobank", "trading", "brokerage", "portfolio", "personal finance", "budget", "lending", "loan", "mortgage", "invoice", "crypto" ], "principles": [ "Format money with the locale and ISO 4217 currency (`Intl.NumberFormat`), show the currency on every amount that might be ambiguous, align figures right in `tabular-nums` and keep minor units. Never compute with floating point; use integer minor units or a decimal library.", "Treat transfers, payouts and trades as irreversible: show a review step with payee, amount, fee, rate and arrival time, then confirm. Require step-up authentication (a one-time code or biometric) before a high-risk action.", "Show every fee, rate and the final total before the user commits, not after. If the amount can change (FX, market orders), say so and show when the quote expires.", "Be honest about balance: label Available versus Pending versus Current, show `as of` time, and mark data that is delayed. Never show an optimistic balance as if it had settled.", "Never use red and green alone for gain and loss; add a sign and an arrow or word (`+2.4%`, `Down`). `stat`'s `delta` does this (arrow plus a screen-reader word) and `goodWhen` says which direction is good news, so a falling expense reads as good. Do not use red for a number that is merely negative in an accounting sense when it is not an error.", "Keep an audit trail the user can see (activity, statements, who approved what) and mask account and card numbers by default, showing only the last four digits with an explicit reveal and `copy-button`.", "opendraft is presentation only: it does not move money, price orders or check balances, and nothing here is a compliance or regulatory guarantee. Show regulatory disclosures and risk warnings your jurisdiction requires as plain text next to the action, and take quotes, balances and fees only from your backend." ], "playbook": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/use-cases/fintech.md", "kit": { "name": "kit-fintech", "install": "npx shadcn@latest add @opendraft/kit-fintech", "components": [ "button", "card", "input", "label", "select", "dialog", "badge", "tabs", "field", "page-header", "theme-toggle", "sonner", "stat", "animated-number", "table", "date-range-picker", "copy-button", "stepper", "otp-input", "timeline", "alert", "radio-group", "analytics-dashboard", "insight-cards", "slider", "quantity-stepper", "progress", "repeater-field", "dropzone", "status-indicator", "switch", "settings-page" ] }, "needs": [ { "need": "Account overview and balances", "fit": "ready", "notes": "`stat` tiles for each account: `value` and `hint` accept ReactNode, so pass a pre-formatted string and an `as of` hint; `delta` gives a signed change with an arrow. `animated-number` takes a plain number and an `Intl.NumberFormat` `format` (for example currency), so use it only for a hero balance and convert from minor units for display only; never inside tables.", "gap": null, "components": [ { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "animated-number", "title": "Animated Number", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/animated-number.md", "install": "npx shadcn@latest add @opendraft/animated-number" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" } ] }, { "need": "Transaction history and search", "fit": "adapt", "notes": "`table` is virtualized (fixed `rowHeight`, `height` or `maxHeight`), sortable, can load more with `onEndReached` and `loading`, and scrolls sideways on phones, so keep Description, Amount and Date as the core columns. Right-align the amount in a `cell` renderer; status `badge` (Pending, Posted, Failed). `selectable` with `onSelectionChange` (ids) and `getRowId` lets people pick rows; an Export `button` runs your own CSV export. `copy-button` for a reference id.", "gap": "No built-in search or filter bar: add `input`, `select` and `date-range-picker` yourself and pass the filtered rows to `table`. `filter-table` is a demo task table with fixed columns (task, date, status todo/progress/done, owner), and `selection-actions` is an AI text-rewrite bar, so neither is for transactions.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "date-range-picker", "title": "Date Range Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-range-picker.md", "install": "npx shadcn@latest add @opendraft/date-range-picker" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "copy-button", "title": "Copy Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/copy-button.md", "install": "npx shadcn@latest add @opendraft/copy-button" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Send money / transfer with review and step-up auth", "fit": "adapt", "notes": "`stepper` flow (payee, amount, review, verify, done; `description` can carry the chosen payee). Review step is a plain list or `stat`/`StatGroup` of payee, amount, fee, rate and arrival, then a confirm `button` (optionally in a `dialog`). `otp-input` for step-up (`onComplete`, `invalid`). Receipt: `alert` success, `stat`s, a `copy-button` for the reference and a `timeline` of the transfer status (initiated, processing, arrives).", "gap": "No review or receipt component. `order-confirmation` is ticket-shaped (QR tickets, qty by price lines, email sentence) and `approval-card` ends with an Approved badge, so neither suits a transfer. `otp-input` has no resend timer or lockout; those are yours.", "components": [ { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "otp-input", "title": "OTP Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/otp-input.md", "install": "npx shadcn@latest add @opendraft/otp-input" }, { "slug": "dialog", "title": "Dialog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dialog.md", "install": "npx shadcn@latest add @opendraft/dialog" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "copy-button", "title": "Copy Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/copy-button.md", "install": "npx shadcn@latest add @opendraft/copy-button" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Card checkout and payment methods", "fit": "gap", "notes": "The `checkout` block is built for ticket and booking purchases: details step is name, email, phone, an 'I'm booking for someone else' attendee and a delivery choice (digital pass by email or collect at front desk), payment is card or pay later, and the confirmation prints a ticket pass per item. Most of this copy is fixed. Build a payment form from `field`, `input` and `radio-group` (saved methods as radio cards), a `stepper`, and mount your provider's hosted fields for the card.", "gap": "`checkout` does not fit bank or card products and its card form cannot be lifted out of the block. Compose from primitives.", "components": [ { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Portfolio, positions and market data", "fit": "adapt", "notes": "Holdings in a `table` with a signed change cell (sign, arrow or word, not color alone). `analytics-dashboard` can be relabelled for portfolio value: KPI metrics take `Intl` `format` (currency), the chart is a single-series line with hover tooltip and metric tabs, the `channels` share bar can show asset allocation, `labels.ranges` can read 1W, 1M, 3M, and `valueColumn`/`formatVisitors`/`formatConversion` repurpose table columns (quantity, weight, value). `insight-cards` also exports `InsightChart` (line, fill, threshold, tooltip).", "gap": "No price chart (candlestick, crosshair, axes, ranges beyond 7/30/90 days), no order book and no live ticker; use a charting library and keep numbers in tabular figures. `analytics-dashboard` rows are shaped name, visitors, conversion (0-1) and value, so the mapping is a relabel.", "components": [ { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "analytics-dashboard", "title": "Analytics Dashboard", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/analytics-dashboard.md", "install": "npx shadcn@latest add @opendraft/analytics-dashboard" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "insight-cards", "title": "Insight Cards", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/insight-cards.md", "install": "npx shadcn@latest add @opendraft/insight-cards" } ] }, { "need": "Place a trade or order", "fit": "adapt", "notes": "`tabs` for Buy and Sell (label them in words); `quantity-stepper` for whole units (`min`, `max`, `step`) or `input` for fractional ones; `slider` with `marks` and `formatValue` for a percent of balance; an order preview in a `dialog` with `stat`s for estimated cost, fees and quote time, and a confirm button. An `alert` for market-closed or price-moved warnings.", "gap": "No market-depth or order-ticket component; the estimated price must come from your pricing service and show when it was quoted.", "components": [ { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "slider", "title": "Slider", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/slider.md", "install": "npx shadcn@latest add @opendraft/slider" }, { "slug": "quantity-stepper", "title": "Quantity Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/quantity-stepper.md", "install": "npx shadcn@latest add @opendraft/quantity-stepper" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "dialog", "title": "Dialog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dialog.md", "install": "npx shadcn@latest add @opendraft/dialog" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" } ] }, { "need": "Spending insights and budgets", "fit": "adapt", "notes": "`progress` with `tone=\"auto\"` measures consumption by default (a fuller bar turns warning, then destructive), which suits category budgets; set `label` and `valueLabel` (`$320 of $400`). `stat` for totals with `delta` and `goodWhen=\"down\"` for spend. `analytics-dashboard` (relabelled) gives KPI cards, a monthly line chart and a stacked share bar for category breakdown.", "gap": "No donut chart and no cash-flow (Sankey) chart; the category breakdown is a single stacked horizontal bar with five tones. `analytics-dashboard` ranges are fixed at 7, 30 and 90 day tabs (relabel them).", "components": [ { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "analytics-dashboard", "title": "Analytics Dashboard", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/analytics-dashboard.md", "install": "npx shadcn@latest add @opendraft/analytics-dashboard" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" } ] }, { "need": "Loan or credit application", "fit": "adapt", "notes": "`slider` for amount and term (`formatValue`, `marks`), a live repayment summary in `stat`s, `repeater-field` for income sources or existing debts, `dropzone` for income documents, and an `alert` plus `timeline` for 'application received' and next steps.", "gap": "No amortization schedule with built-in calculations; compute it server-side and render it with `table`. `order-confirmation` is ticket-shaped, so it is not used for the submitted state.", "components": [ { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "slider", "title": "Slider", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/slider.md", "install": "npx shadcn@latest add @opendraft/slider" }, { "slug": "repeater-field", "title": "Repeater Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/repeater-field.md", "install": "npx shadcn@latest add @opendraft/repeater-field" }, { "slug": "dropzone", "title": "Dropzone", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dropzone.md", "install": "npx shadcn@latest add @opendraft/dropzone" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" } ] }, { "need": "KYC and identity verification", "fit": "adapt", "notes": "`stepper` (with `description`) for the checks; `dropzone` with `accept`, `maxSize` and `capture=\"environment\"` takes an ID photo straight from the phone camera as a file; `otp-input` for phone or email codes. Show each check with a `status-indicator` using `label` and `tone` overrides (Pending, Verified, Needs attention) or a `badge`.", "gap": "`capture` only opens the device camera for a still image: there is no live camera preview, document frame overlay or liveness check. Use your identity provider's SDK for those.", "components": [ { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "dropzone", "title": "Dropzone", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dropzone.md", "install": "npx shadcn@latest add @opendraft/dropzone" }, { "slug": "otp-input", "title": "OTP Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/otp-input.md", "install": "npx shadcn@latest add @opendraft/otp-input" }, { "slug": "status-indicator", "title": "Status Indicator", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/status-indicator.md", "install": "npx shadcn@latest add @opendraft/status-indicator" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" } ] }, { "need": "Security, limits and audit trail", "fit": "adapt", "notes": "Card freeze and alert preferences as `switch` rows, limits with `field` or `slider`, login and device history in a `table` or `timeline` (mono timestamps, status markers), and a type-to-confirm `dialog` for closing an account. `settings-page` can supply the grouped switch rows (its `notifications` groups) and a type-to-confirm danger zone (`dangerLabels`, `sections`).", "gap": "`settings-page` sections are fixed to profile, notifications, team and billing and the danger-zone confirmation requires typing the `workspaceName`; there is no security, devices or limits section, so compose those from the primitives.", "components": [ { "slug": "switch", "title": "Switch", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/switch.md", "install": "npx shadcn@latest add @opendraft/switch" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "slider", "title": "Slider", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/slider.md", "install": "npx shadcn@latest add @opendraft/slider" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "dialog", "title": "Dialog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dialog.md", "install": "npx shadcn@latest add @opendraft/dialog" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "settings-page", "title": "Settings Page", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/settings-page.md", "install": "npx shadcn@latest add @opendraft/settings-page" } ] } ], "screens": [ { "name": "Accounts overview", "compose": [ "page-header", "stat", "tabs", "table", "alert" ] }, { "name": "Transactions", "compose": [ "page-header", "date-range-picker", "input", "select", "table", "badge", "button" ] }, { "name": "Send money", "compose": [ "page-header", "stepper", "field", "select", "input", "otp-input", "dialog", "stat", "timeline", "copy-button", "alert" ] }, { "name": "Portfolio", "compose": [ "page-header", "stat", "analytics-dashboard", "table" ] }, { "name": "Security and limits", "compose": [ "page-header", "switch", "field", "table", "timeline", "dialog", "alert" ] } ], "integrations": [ { "for": "Payments and card acceptance", "options": [ "Stripe Elements", "Adyen Drop-in", "Braintree" ], "note": "Mount the provider's hosted fields inside your own payment form (built from `field` and `radio-group`) so card data never touches your app; send your backend a token only." }, { "for": "Bank account linking and open banking data", "options": [ "Plaid Link", "TrueLayer", "MX" ], "note": "These open their own modal; surround it with an opendraft `dialog` that explains what is shared and wait for the result before updating balances." }, { "for": "Money math and currency formatting", "options": [ "Intl.NumberFormat", "dinero.js", "decimal.js" ], "note": "Pass already formatted strings to `stat` and to `table` cell renderers; keep amounts in integer minor units in your data layer." }, { "for": "Price and performance charts", "options": [ "TradingView Lightweight Charts", "Recharts", "visx" ], "note": "Only a basic line chart ships (`InsightChart` in `insight-cards`, and the chart inside `analytics-dashboard`). For price charts with axes, crosshair or candlesticks, theme a library with design tokens and add a text value readout so gain and loss do not rely on color." }, { "for": "Identity verification and fraud signals", "options": [ "Persona", "Onfido", "Sumsub" ], "note": "Use their SDK for document and liveness capture and show the outcome with `status-indicator` and `alert`." } ] }, { "id": "ecommerce", "title": "E-commerce and marketplaces", "short": "E-commerce", "summary": "Storefronts, marketplaces and seller dashboards. Shoppers need honest prices and stock and a fast path to pay; sellers need to manage orders and inventory in bulk.", "signals": [ "ecommerce", "e-commerce", "store", "storefront", "shop", "marketplace", "cart", "checkout", "product", "catalog", "inventory", "orders", "seller", "merchant", "retail", "returns", "wishlist", "discount" ], "principles": [ "Be honest about price and availability: show the total with tax, shipping and fees before checkout, strike through a compare-at price only when it is real, and show stock states in words (In stock, Only 3 left, Sold out) from live data. `progress` with `tone=\"auto\"` and `invert` can show remaining stock, but pair it with the words.", "Persist the cart across sessions and devices, never silently change a quantity or price, and if something changed since the user added it, say what changed (an `alert`) and let them decide.", "Show trust signals where the decision happens: delivery date, return window, secure payment note, ratings with the review count and who can leave a review. Do not invent urgency such as fake countdowns or invented stock numbers.", "Offer guest checkout and fast payment options; ask for the fewest fields, validate inline and keep the order summary visible while the user fills the form.", "State returns, refunds and shipping costs in plain words before purchase, and give the order status and the next step on every order screen.", "Make sold-out and error states useful: offer a back-in-stock notification or similar items, keep filters on a no-results page and keep the user's progress when a payment fails.", "Check which opendraft blocks fit before using them: `catalog`, `detail-page`, `checkout` and `order-confirmation` are built for dated, seat-limited, ticketed things (classes, tours, events). For physical goods compose the screens from primitives; the playbook below says which." ], "playbook": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/use-cases/ecommerce.md", "kit": { "name": "kit-ecommerce", "install": "npx shadcn@latest add @opendraft/kit-ecommerce", "components": [ "button", "card", "input", "label", "select", "dialog", "badge", "tabs", "field", "page-header", "theme-toggle", "sonner", "switch", "empty-state", "skeleton", "catalog", "detail-page", "checkout", "order-confirmation", "ticket-pass", "accordion", "radio-group", "quantity-stepper", "progress", "stat", "avatar", "textarea", "drawer", "alert", "separator", "stepper", "checkbox", "timeline", "copy-button", "dropzone", "analytics-dashboard", "table", "repeater-field", "date-range-picker", "site-header" ] }, "needs": [ { "need": "Browse, search and filter products", "fit": "gap", "notes": "Build the grid from `card` tiles: `input` for search (filter your own data; `search-list` takes plain strings only), `select` for sort, `tabs` or `badge` buttons for category chips, `switch` for in stock only, `skeleton` while loading, `empty-state` (with `live`) for no results and a Clear filters action that keeps the other filters.", "gap": "`catalog` is not for retail products. Every item requires `host`, an ISO `date` (rendered as a date block on each card, and `sort=date` uses it), `capacity` and `remaining` (rendered as 'n of capacity places left' and 'Selling fast'), and it has no brand, variant, rating or compare-at price field and no multi-facet filters (size, color). Use it only for the classes and events in the bookable-things need below.", "components": [ { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "switch", "title": "Switch", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/switch.md", "install": "npx shadcn@latest add @opendraft/switch" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "card", "title": "Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/card.md", "install": "npx shadcn@latest add @opendraft/card" }, { "slug": "empty-state", "title": "Empty State", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/empty-state.md", "install": "npx shadcn@latest add @opendraft/empty-state" }, { "slug": "skeleton", "title": "Skeleton", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/skeleton.md", "install": "npx shadcn@latest add @opendraft/skeleton" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Sell bookable things: classes, tours, workshops, tickets", "fit": "ready", "notes": "This is what the blocks are built for. `catalog` (search, category chips, sort, price buckets, availability switch, grid or compact list, ISO `currency`) lists items shaped title, host, location, category, date, price, capacity, remaining. `detail-page` shows media, key facts, About, Schedule and FAQ tabs, tiers with quantity, running total, checkout and waitlist (`onWaitlist`, relabel to Notify me via `labels`). `checkout` takes `items`, `fees`, `currency`, `discountCodes` and an async `onPay` that gets masked card data (last four only). `order-confirmation` and `ticket-pass` give the receipt and QR passes. Map `DetailCheckout` ({tierId, quantity}) to `CheckoutItem`s yourself.", "gap": null, "components": [ { "slug": "catalog", "title": "Catalog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/catalog.md", "install": "npx shadcn@latest add @opendraft/catalog" }, { "slug": "detail-page", "title": "Detail Page", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/detail-page.md", "install": "npx shadcn@latest add @opendraft/detail-page" }, { "slug": "checkout", "title": "Checkout", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkout.md", "install": "npx shadcn@latest add @opendraft/checkout" }, { "slug": "order-confirmation", "title": "Order Confirmation", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/order-confirmation.md", "install": "npx shadcn@latest add @opendraft/order-confirmation" }, { "slug": "ticket-pass", "title": "Ticket Pass", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/ticket-pass.md", "install": "npx shadcn@latest add @opendraft/ticket-pass" } ] }, { "need": "Product detail with variants and purchase panel", "fit": "gap", "notes": "Compose: `tabs` or `accordion` for description, specs, shipping and returns; `radio-group` styled as size chips or swatches for variants (disable out-of-stock options); `quantity-stepper` with `max` set to stock; a `badge` for In stock or Sold out; `progress` with `tone=\"auto\"` and `invert` (the value is what remains) for a low-stock bar, noting that `invert` does nothing unless `tone=\"auto\"` (the default tone is brand); a primary `button` plus a Notify me action when sold out.", "gap": "`detail-page` is an event-ticket page, not a product page: it requires `date` and a `host`, its options are 'tiers' with seats `capacity` and `remaining`, and its tabs are About, Schedule and FAQ. It has no image gallery or zoom, no color swatches, and no rating or review list. No opendraft component is a gallery either: build a thumbnail row and main image yourself.", "components": [ { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "accordion", "title": "Accordion", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/accordion.md", "install": "npx shadcn@latest add @opendraft/accordion" }, { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" }, { "slug": "quantity-stepper", "title": "Quantity Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/quantity-stepper.md", "install": "npx shadcn@latest add @opendraft/quantity-stepper" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" } ] }, { "need": "Ratings and reviews", "fit": "gap", "notes": "No rating, star or review component ships. Draw stars from lucide `Star` icons inside an element with an `aria-label` such as '4.6 out of 5, 128 reviews' (keep a text value, not icons alone). A rating distribution is a stack of `progress` rows (`label` '5 stars', `valueLabel` the count); reviews are your own list with `avatar`, a 'Verified purchase' `badge` only when you can verify it, and `accordion` for long text; a review form uses `textarea` and `button`.", "gap": "No star input, rating summary or review list component; show only reviews you can verify.", "components": [ { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "avatar", "title": "Avatar", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/avatar.md", "install": "npx shadcn@latest add @opendraft/avatar" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "accordion", "title": "Accordion", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/accordion.md", "install": "npx shadcn@latest add @opendraft/accordion" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "textarea", "title": "Textarea", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/textarea.md", "install": "npx shadcn@latest add @opendraft/textarea" } ] }, { "need": "Shopping cart and mini-cart", "fit": "adapt", "notes": "A cart in a `drawer` (side sheet, closes on Esc or backdrop; you supply the header, since it has no title slot) with `quantity-stepper` lines (`max` = stock), a subtotal and a checkout `button`; `empty-state` when empty; `alert` when a price or availability changed; `sonner` for 'added to cart' feedback.", "gap": "No cart component: build the line list yourself and persist the cart on your backend. `checkout` has a quantity-stepper order summary but only inside its ticket flow.", "components": [ { "slug": "drawer", "title": "Drawer", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/drawer.md", "install": "npx shadcn@latest add @opendraft/drawer" }, { "slug": "quantity-stepper", "title": "Quantity Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/quantity-stepper.md", "install": "npx shadcn@latest add @opendraft/quantity-stepper" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "empty-state", "title": "Empty State", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/empty-state.md", "install": "npx shadcn@latest add @opendraft/empty-state" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "separator", "title": "Separator", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/separator.md", "install": "npx shadcn@latest add @opendraft/separator" }, { "slug": "sonner", "title": "Toast", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/sonner.md", "install": "npx shadcn@latest add @opendraft/sonner" } ] }, { "need": "Checkout (guest or account) and payment for physical goods", "fit": "gap", "notes": "Build with `stepper` (shipping, delivery, payment, review; steps take a `description`), `field` with `FieldGroup` for the address (use `select` for country), `radio-group` for shipping methods (price and arrival date in each option), `checkbox` for billing same as shipping, an order summary list with totals, a discount code `input`, and your payment provider's hosted fields and wallet buttons.", "gap": "The `checkout` block cannot do this: its details step is Full name, Email, Phone and an 'I'm booking for someone else' attendee, then a delivery choice of 'Digital pass by email' or 'Collect at the front desk' (hard-coded, not in `labels`), payment is card or 'Pay later (within 3 days)', and the confirmation step prints a QR ticket pass per item. There is no shipping address form, shipping-method picker, billing address or wallet-button slot. Its `fees` list adds flat extra charges only, so shipping rates and tax need your own summary.", "components": [ { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" }, { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" }, { "slug": "quantity-stepper", "title": "Quantity Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/quantity-stepper.md", "install": "npx shadcn@latest add @opendraft/quantity-stepper" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Order confirmation and tracking", "fit": "adapt", "notes": "`timeline` is a ready tracking view: statuses success, current and upcoming for Placed, Packed, Shipped and Delivered, `timestamp` and `time`, `meta` for the carrier or location, expandable detail for scan events, and a loading state. `stepper` (steps accept `description` for an estimated date) for the coarse stages; `copy-button` for the tracking number; `alert` for a delay. Order totals in `stat`s and your own line list.", "gap": "`order-confirmation` is ticket-shaped: it always prints 'A confirmation was sent to' with the email, a Tickets stat, a 'Your tickets' section with a QR pass per ticket (an empty list leaves a bare heading), a priced line list, and a stepper that is always fully completed (Details, Payment, Confirmation), with no shipping status. Use it only for tickets and bookings.", "components": [ { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "copy-button", "title": "Copy Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/copy-button.md", "install": "npx shadcn@latest add @opendraft/copy-button" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Returns and refunds", "fit": "adapt", "notes": "A `stepper` flow: choose items (`checkbox`), reason (`select`), notes (`textarea`), photos with `dropzone` (`accept`, `maxFiles`, `capture`), then refund or exchange (`radio-group`) and a review step; show the return deadline in an `alert`.", "gap": "No printable return-label view; render it from your carrier's PDF.", "components": [ { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" }, { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" }, { "slug": "textarea", "title": "Textarea", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/textarea.md", "install": "npx shadcn@latest add @opendraft/textarea" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "dropzone", "title": "Dropzone", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dropzone.md", "install": "npx shadcn@latest add @opendraft/dropzone" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Seller dashboard: sales and performance", "fit": "adapt", "notes": "Relabel `analytics-dashboard` for revenue, orders and conversion: metrics have `Intl` `format` and a delta vs the previous period, there is a single-series line chart with hover tooltip and metric tabs, a sortable table (name, visitors, conversion 0-1, and a custom `valueColumn` for revenue; `formatVisitors` and `formatConversion` change the other cells), and a stacked share bar in `channels`.", "gap": "The range tabs are fixed to 7d, 30d and 90d (only their text can change) and are not driven by `date-range-picker`; the chart is one series with no comparison overlay; table columns are page-analytics shaped; only one stacked bar for breakdowns, no donut.", "components": [ { "slug": "analytics-dashboard", "title": "Analytics Dashboard", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/analytics-dashboard.md", "install": "npx shadcn@latest add @opendraft/analytics-dashboard" }, { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" } ] }, { "need": "Seller order and inventory management", "fit": "adapt", "notes": "`table` with `selectable`, `onSelectionChange` (ids) and `getRowId`, sorting, a fixed `rowHeight`, and a status `badge` in a `cell`; `tabs` for New, To ship and Returns (each filters the rows you pass); when ids are selected show your own bulk bar of `button`s (Print labels, Mark shipped). A `progress` bar in a stock cell with `tone=\"auto\"` and `invert`.", "gap": "No built-in bulk-action bar or filter chips: `selection-actions` is an AI text-rewrite bar, `filter-table` is a demo task table (task, date, status todo/progress/done, owner) and `records-table` is a demo record grid (name, tags, strength), so none of them fits orders. Columns scroll sideways on phones.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" } ] }, { "need": "Create and edit a product listing", "fit": "adapt", "notes": "`field` and `FieldGroup`, `repeater-field` for variants and prices (rows built in `renderRow`), `dropzone` for photos (`multiple`, `accept`, `maxFiles`, file list with progress and `onRemove`), `switch` for published, `stepper` to split a long form.", "gap": "No rich text editor for descriptions and no image reordering or cropping.", "components": [ { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "textarea", "title": "Textarea", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/textarea.md", "install": "npx shadcn@latest add @opendraft/textarea" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "repeater-field", "title": "Repeater Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/repeater-field.md", "install": "npx shadcn@latest add @opendraft/repeater-field" }, { "slug": "dropzone", "title": "Dropzone", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dropzone.md", "install": "npx shadcn@latest add @opendraft/dropzone" }, { "slug": "switch", "title": "Switch", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/switch.md", "install": "npx shadcn@latest add @opendraft/switch" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" } ] }, { "need": "Promotions and discount codes", "fit": "ready", "notes": "A `table` of codes (sortable, status `badge`), a `dialog` with a `field` form to create one, `date-range-picker` for the validity window and `switch` to enable it.", "gap": null, "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "dialog", "title": "Dialog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dialog.md", "install": "npx shadcn@latest add @opendraft/dialog" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "date-range-picker", "title": "Date Range Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-range-picker.md", "install": "npx shadcn@latest add @opendraft/date-range-picker" }, { "slug": "switch", "title": "Switch", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/switch.md", "install": "npx shadcn@latest add @opendraft/switch" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] } ], "screens": [ { "name": "Shop and category", "compose": [ "site-header", "input", "select", "tabs", "switch", "card", "badge", "skeleton", "empty-state" ] }, { "name": "Product page", "compose": [ "site-header", "tabs", "accordion", "radio-group", "quantity-stepper", "badge", "progress", "button" ] }, { "name": "Cart", "compose": [ "drawer", "quantity-stepper", "button", "separator", "empty-state", "alert" ] }, { "name": "Checkout", "compose": [ "site-header", "stepper", "field", "input", "select", "radio-group", "checkbox", "alert", "button" ] }, { "name": "Order status", "compose": [ "page-header", "stat", "timeline", "copy-button", "badge", "button" ] }, { "name": "Book a class or event", "compose": [ "site-header", "catalog", "detail-page", "checkout", "order-confirmation" ] }, { "name": "Seller orders", "compose": [ "page-header", "tabs", "input", "table", "badge", "button" ] }, { "name": "Seller overview", "compose": [ "page-header", "analytics-dashboard" ] } ], "integrations": [ { "for": "Commerce backend and product data", "options": [ "Shopify Storefront API", "Medusa", "commercetools" ], "note": "Map products, carts and orders to your own `card`, `table` and `timeline` data in an adapter; map to the props of `catalog`, `detail-page` and `checkout` only for dated, seat-limited items. Keep the cart on the server so it persists across devices." }, { "for": "Payments, wallets and tax", "options": [ "Stripe", "Adyen", "PayPal" ], "note": "Mount the provider's hosted card fields and wallet buttons inside your own payment step; send your backend a token only. Tax should come from the provider so the total shown is the total charged." }, { "for": "Product search and filtering", "options": [ "Algolia", "Typesense", "Meilisearch" ], "note": "Drive your own `input`, `select` and chip controls from the search results; faceted filters such as size and color are not built in. For event-style items, results can feed `catalog` through its `items` prop." }, { "for": "Shipping rates and tracking", "options": [ "Shippo", "EasyPost", "AfterShip" ], "note": "Show their rates as `radio-group` options in your checkout and their tracking events in a `timeline`." }, { "for": "Reviews and ratings", "options": [ "Yotpo", "Judge.me", "Trustpilot" ], "note": "No rating or review component ships; draw stars from icons with a text value and count, and avoid displaying reviews you cannot verify." } ] }, { "id": "education", "title": "Education and learning", "short": "Education", "summary": "Learning platforms, courses, classrooms and student information systems. Learners need to know where they are and what is next; instructors need to see a whole class at a glance and act in bulk.", "signals": [ "education", "learning", "lms", "course", "courses", "classroom", "student", "teacher", "instructor", "school", "university", "lesson", "quiz", "assignment", "grades", "gradebook", "enrollment", "edtech" ], "principles": [ "Make progress visible everywhere: where the learner is in the course, what is done, what is next and how long it takes. Use `progress` (`label` and `valueLabel`, e.g. `3 of 8 lessons`) and always offer a clear Continue action. Keep the default brand tone, or `success` at 100%: `tone=\"auto\"` treats a full bar as bad.", "Accessibility first: sufficient contrast, full keyboard use, captions and transcripts for media, readable text sizes, no time limits that cannot be extended, and no meaning by color alone. Learners often use shared, older or assistive devices.", "Give low-pressure feedback: say what was right and what to try next, avoid red-X shaming, let learners retry, and show a grade only when the instructor chooses to release it. Celebrate completion without confetti that cannot be turned off.", "Separate instructor and learner views: the same course shows authoring, grading and class analytics to instructors, and only the learner's own work and progress to students. Never expose other students' names or grades.", "Be offline-tolerant: save drafts and answers locally as the learner types, show a visible Saved or Not saved state, and queue submissions with a clear status when the connection drops.", "Protect minors' data: avoid public profiles by default, show only what a guardian or teacher needs, and put sensitive records behind explicit access. Where your rules require it, keep consent and access records; opendraft makes no compliance guarantee." ], "playbook": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/use-cases/education.md", "kit": { "name": "kit-education", "install": "npx shadcn@latest add @opendraft/kit-education", "components": [ "button", "card", "input", "label", "select", "dialog", "badge", "tabs", "field", "page-header", "theme-toggle", "sonner", "catalog", "detail-page", "checkout", "stat", "progress", "empty-state", "accordion", "animated-sidebar", "stepper", "code-block", "skeleton", "alert", "radio-group", "checkbox", "textarea", "question-card", "dropzone", "timeline", "table", "slider", "drawer", "analytics-dashboard", "date-picker", "chat-app", "message", "message-bubble", "message-scroller", "prompt-input", "streaming-response", "citations", "avatar", "site-header" ] }, "needs": [ { "need": "Course catalog and enrollment", "fit": "adapt", "notes": "Works for cohort or scheduled courses. `catalog`: `host` is the instructor (set `labels.hostLabel` to 'Taught by'), `date` the start date, `capacity` and `remaining` the seats, `category` the subject, `priceRanges` and `currency` for fees (price 0 shows the free label). `detail-page`: tiers are enrolment options (full price, concession), the Schedule tab is the week-by-week outline, key facts for length and level, FAQ, `onWaitlist` for full cohorts; relabel with `labels`. `checkout` for paid enrolment.", "gap": "Item shape is event-shaped: `host`, `date`, `capacity` and `remaining` are required and the date block and seats are always shown, so self-paced courses with no start date or seat limit don't fit (use `card`, `input`, `select` and `badge`). No prerequisite or level filters. `checkout` has fixed copy (booking for someone else, digital pass or desk collection, a QR ticket on confirmation); free enrolment can skip it and call your API from `onCheckout`.", "components": [ { "slug": "catalog", "title": "Catalog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/catalog.md", "install": "npx shadcn@latest add @opendraft/catalog" }, { "slug": "detail-page", "title": "Detail Page", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/detail-page.md", "install": "npx shadcn@latest add @opendraft/detail-page" }, { "slug": "checkout", "title": "Checkout", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkout.md", "install": "npx shadcn@latest add @opendraft/checkout" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" } ] }, { "need": "Learner dashboard: courses in progress", "fit": "ready", "notes": "One `card` per course with `progress` (`label` is the course, `valueLabel` '3 of 8 lessons') and a Continue `button`; `stat` for streak or time spent; `tabs` for In progress and Completed; `empty-state` for a new learner. Don't set `tone=\"auto\"` on completion bars: it reads a full bar as bad.", "gap": null, "components": [ { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "card", "title": "Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/card.md", "install": "npx shadcn@latest add @opendraft/card" }, { "slug": "empty-state", "title": "Empty State", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/empty-state.md", "install": "npx shadcn@latest add @opendraft/empty-state" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Lesson and module navigation", "fit": "adapt", "notes": "Modules in an `accordion` with lesson rows inside, or an `animated-sidebar` menu (menu buttons with `isActive`, `disabled` for locked lessons, a `badge` slot, sub-menus, a mobile sheet). A vertical `stepper` (steps take a `description` such as the duration) shows a linear path with a check on finished lessons. `progress` for the module.", "gap": "`stepper` is linear: only completed steps are clickable, there is no locked or skipped state and no jump to any lesson, so use it for a short path, not a full syllabus. `sidebar-nav` is an AI chat sidebar (workspace switcher, searchable chats), not course navigation. No table-of-contents component with per-lesson completion: build the rows with a Check icon.", "components": [ { "slug": "accordion", "title": "Accordion", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/accordion.md", "install": "npx shadcn@latest add @opendraft/accordion" }, { "slug": "animated-sidebar", "title": "Sidebar", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/animated-sidebar.md", "install": "npx shadcn@latest add @opendraft/animated-sidebar" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Video and reading lesson content", "fit": "gap", "notes": "Transcript, notes and resources can sit in `tabs` beside the player; `accordion` for chapters; `code-block` (code, language, line highlights, copy, line numbers) for programming lessons; `skeleton` while content loads.", "gap": "No video or audio player (captions, speed, resume), no PDF or slide viewer; embed one and keep the transcript beside it.", "components": [ { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "accordion", "title": "Accordion", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/accordion.md", "install": "npx shadcn@latest add @opendraft/accordion" }, { "slug": "code-block", "title": "Code Block", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/code-block.md", "install": "npx shadcn@latest add @opendraft/code-block" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "skeleton", "title": "Skeleton", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/skeleton.md", "install": "npx shadcn@latest add @opendraft/skeleton" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" } ] }, { "need": "Quizzes and assessments", "fit": "gap", "notes": "Compose a quiz: `radio-group` and `checkbox` for answers, `textarea` for short answers, `progress` with `label` '4 of 10', a `dialog` that confirms submit and names unanswered questions, and an `alert` for time remaining. Keep scoring and explanations in your code and show them with `badge` and `alert`. `question-card` suits ungraded warm-up questions or polls.", "gap": "`question-card` is survey-shaped, not a quiz: questions are `{q, type, options}` strings with no correct answer, single choice auto-advances so answers cannot be reviewed first, there is always a Skip button and a free-text 'Something else' option, and it returns answers by index with no scoring or feedback. No timer with accessibility extensions, no question-bank authoring.", "components": [ { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" }, { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" }, { "slug": "textarea", "title": "Textarea", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/textarea.md", "install": "npx shadcn@latest add @opendraft/textarea" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "dialog", "title": "Dialog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dialog.md", "install": "npx shadcn@latest add @opendraft/dialog" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "question-card", "title": "Question Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/question-card.md", "install": "npx shadcn@latest add @opendraft/question-card" } ] }, { "need": "Assignment submission and files", "fit": "ready", "notes": "`dropzone` for uploads (`accept`, `maxSize`, `maxFiles`, a `files` list with progress and per-file error; you handle the upload), a status `badge` (Not started, Submitted, Late, Graded), `timeline` for submission history, and an `alert` for the deadline.", "gap": null, "components": [ { "slug": "dropzone", "title": "Dropzone", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dropzone.md", "install": "npx shadcn@latest add @opendraft/dropzone" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "textarea", "title": "Textarea", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/textarea.md", "install": "npx shadcn@latest add @opendraft/textarea" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Gradebook and feedback (instructor)", "fit": "adapt", "notes": "`table` is the grid: virtualized (fixed `rowHeight`, `height`), sticky header, sortable, resizable and reorderable columns, `selectable` with `onSelectionChange` (ids) and `getRowId`, and `editable` columns with `onCellEdit` for inline score entry (plain text input, so validate the number yourself). Show your own bulk bar of `button`s over the selection. Open feedback in a `drawer` with `textarea` and a `slider` per rubric criterion (`marks`, `formatValue`). Scrolls sideways on phones.", "gap": "No rubric component and no sticky first column. `filter-table` is a demo task table, `records-table` a demo record grid and `selection-actions` an AI text-rewrite bar, so none of them is a gradebook.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "textarea", "title": "Textarea", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/textarea.md", "install": "npx shadcn@latest add @opendraft/textarea" }, { "slug": "slider", "title": "Slider", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/slider.md", "install": "npx shadcn@latest add @opendraft/slider" }, { "slug": "drawer", "title": "Drawer", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/drawer.md", "install": "npx shadcn@latest add @opendraft/drawer" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" } ] }, { "need": "Class and cohort analytics", "fit": "adapt", "notes": "Relabel `analytics-dashboard`: KPI cards with delta (completion, average score), one metric line chart with tabs, a sortable table per assignment (name, learners via `formatVisitors`, completion 0-1 via `formatConversion`, or a `valueColumn`), and the `channels` stacked bar can show grade bands. `progress` per assignment.", "gap": "Ranges are fixed to three tabs (7d, 30d, 90d; relabel to week, month, term) and are not driven by `date-range-picker`. The chart is one series; no histogram and no per-student drill-down chart.", "components": [ { "slug": "analytics-dashboard", "title": "Analytics Dashboard", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/analytics-dashboard.md", "install": "npx shadcn@latest add @opendraft/analytics-dashboard" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" } ] }, { "need": "Timetable, deadlines and events", "fit": "gap", "notes": "`timeline` lists upcoming deadlines in order (`time`, `timestamp`, status current, upcoming or destructive for overdue, `meta` for the course) with `align=\"right-time\"` on wide screens; `table` for a sortable list; `alert` for due soon; `date-picker` (`min`, `max`, `isDateDisabled`) to set a reminder date.", "gap": "No calendar and no week-view timetable or month grid with events. `date-picker` and `date-range-picker` show a month grid for choosing dates only, with no event markers, and `date-picker` has no time-zone support.", "components": [ { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "date-picker", "title": "Date Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-picker.md", "install": "npx shadcn@latest add @opendraft/date-picker" } ] }, { "need": "Discussion and AI tutor", "fit": "adapt", "notes": "`message` rows (`from` is `user` or `assistant`) with `avatar`; `prompt-input` as the composer (omit `models`); `streaming-response` for tutor answers (status streaming, complete or error, copy, retry, up or down feedback, and a `sources` list); `citations` lets a tutor point to course material (`CitationItem` with title, domain, url); `message-scroller` follows streamed output. Label AI answers clearly.", "gap": "No threaded forum with replies, reactions or moderation, and no instructor review queue; only two message sides. Build those from `message` and `table`.", "components": [ { "slug": "chat-app", "title": "Chat App", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/chat-app.md", "install": "npx shadcn@latest add @opendraft/chat-app" }, { "slug": "message", "title": "Message", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/message.md", "install": "npx shadcn@latest add @opendraft/message" }, { "slug": "message-bubble", "title": "Message Bubble", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/message-bubble.md", "install": "npx shadcn@latest add @opendraft/message-bubble" }, { "slug": "message-scroller", "title": "Message Scroller", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/message-scroller.md", "install": "npx shadcn@latest add @opendraft/message-scroller" }, { "slug": "prompt-input", "title": "Prompt Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/prompt-input.md", "install": "npx shadcn@latest add @opendraft/prompt-input" }, { "slug": "streaming-response", "title": "Streaming Response", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/streaming-response.md", "install": "npx shadcn@latest add @opendraft/streaming-response" }, { "slug": "citations", "title": "Citations", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/citations.md", "install": "npx shadcn@latest add @opendraft/citations" }, { "slug": "avatar", "title": "Avatar", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/avatar.md", "install": "npx shadcn@latest add @opendraft/avatar" } ] } ], "screens": [ { "name": "Learner home", "compose": [ "site-header", "stat", "card", "progress", "tabs", "empty-state", "button" ] }, { "name": "Course catalog", "compose": [ "site-header", "catalog", "detail-page" ] }, { "name": "Lesson player", "compose": [ "page-header", "animated-sidebar", "accordion", "progress", "tabs", "button" ] }, { "name": "Quiz", "compose": [ "page-header", "progress", "radio-group", "checkbox", "textarea", "dialog", "alert", "button" ] }, { "name": "Assignment", "compose": [ "page-header", "alert", "textarea", "dropzone", "badge", "timeline", "button" ] }, { "name": "Deadlines", "compose": [ "page-header", "timeline", "badge", "alert" ] }, { "name": "Instructor gradebook", "compose": [ "page-header", "stat", "table", "badge", "button", "drawer", "slider", "textarea" ] } ], "integrations": [ { "for": "Video lessons with captions", "options": [ "Mux Player", "Video.js", "Vimeo Player API" ], "note": "No video player ships in opendraft; embed one with captions and playback speed, report progress back to update `progress`, and place the transcript in `tabs` beside it." }, { "for": "LMS interoperability and content standards", "options": [ "LTI 1.3", "xAPI", "SCORM Cloud" ], "note": "These sit in your backend; opendraft only renders the resulting course, grade and progress data, so map them into the props of `progress`, `table` and `stepper`." }, { "for": "Rostering and sign-in with school accounts", "options": [ "Clever", "ClassLink", "Google Workspace for Education" ], "note": "`auth-screen` takes a `providers` list for the provider buttons but always shows the email and password form; keep roles (student, teacher, guardian) in your own data so views can differ." }, { "for": "Offline sync and draft saving", "options": [ "Dexie (IndexedDB)", "TanStack Query persistence", "RxDB" ], "note": "Save answers and drafts locally and show a Saved or Queued state with `badge`; flush the queue on reconnect." }, { "for": "Calendar and timetable", "options": [ "FullCalendar", "react-big-calendar", "Schedule-X" ], "note": "No calendar component ships; use one of these for the week view and keep the opendraft `timeline` for a simple upcoming-deadlines list." } ] }, { "id": "energy-utilities", "title": "Energy, utilities and EV charging", "short": "Energy", "summary": "Grid operations, smart metering, solar and storage, EV charging networks, field service and customer billing for electricity, gas and water providers. Numbers carry units, time carries a zone, and some actions can hurt people or equipment.", "signals": [ "energy", "utility", "utilities", "grid", "smart meter", "metering", "scada", "outage", "solar", "battery storage", "ev charging", "ocpp", "kwh", "tariff", "demand response", "field service", "billing" ], "principles": [ "Always show the unit and the magnitude together, in `font-mono` with `tabular-nums`: `4.2 kW`, `18.6 MWh`, `230 V`. `stat` takes any node as `value`, so wrap the number and unit in a `font-mono` span. Do not auto-switch between W, kW and MW inside one column; pick one unit per column and say it in the header.", "Be honest about time series. Label the interval and aggregation (15-min average, hourly sum, daily peak), mark gaps and estimated reads as such instead of drawing a line through them, and never smooth data without saying so.", "Outage and alarm severity uses a fixed scale with a word and an icon, not color alone (for example Critical, Major, Minor, Advisory). Show start time, affected customers or assets, and estimated restoration time with its source.", "Switching, isolating or energizing equipment is guarded by interlocks: show the current state, the precondition that blocks the action, and require a confirmation that names the asset and consequence. Show who did it and when, and never allow a one-click remote switch.", "Show every timestamp with its zone, and show the asset's own local time beside the operator's. Grids span regions, and daylight saving shifts create 23- and 25-hour days; billing periods and tariffs must follow the meter's zone. `date-picker` and `date-range-picker` work on plain calendar dates (and an HH:MM time) with no zone support, so keep the zone in your own data and print it next to the value.", "Separate measured, estimated and forecast values visually and in text (solid, dashed, labeled). A billing or settlement figure always shows its status: actual, estimated or disputed." ], "playbook": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/use-cases/energy-utilities.md", "kit": { "name": "kit-energy-utilities", "install": "npx shadcn@latest add @opendraft/kit-energy-utilities", "components": [ "button", "card", "input", "label", "select", "dialog", "badge", "tabs", "field", "page-header", "theme-toggle", "sonner", "stat", "status-indicator", "alert", "progress", "insight-cards", "analytics-dashboard", "date-range-picker", "table", "copy-button", "timeline", "stepper", "otp-input", "slider", "switch", "checkbox", "approval-card", "dropzone", "radio-group", "site-header" ] }, "needs": [ { "need": "Grid and asset status overview", "fit": "adapt", "notes": "`stat` tiles for load, generation and frequency (unit inside `value`, `delta` with `goodWhen` for the change chip). `status-indicator` gives a shape plus a word; its five built-in statuses are operational, degraded, down, maintenance and unknown, and `label`, `tone` and `shape` override them for words like Energized or Islanded. `progress` with `tone=\"auto\"` shows headroom against a limit (a full bar turns warning, then destructive). `alert` for active network notices, `badge` for a text severity.", "gap": "`stat` has no threshold or limit marking (use `progress` beside it), and there is no single-line diagram or network topology view.", "components": [ { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "status-indicator", "title": "Status Indicator", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/status-indicator.md", "install": "npx shadcn@latest add @opendraft/status-indicator" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" } ] }, { "need": "Live and historical load, generation and consumption charts", "fit": "gap", "notes": "Two partial building blocks exist. `InsightChart` (exported by `insight-cards`) is a small SVG line chart: several lines, optional fill and grid, one dashed `threshold` line (a capacity limit), a hover cursor and a tooltip you fill with your own rows. It draws no axis labels or units, and it smooths lines through Catmull-Rom curves when a line has fewer than 24 points, so pass 24 or more real points to avoid drawn-in curves. `analytics-dashboard` charts one metric at a time (switch metrics with tabs) over fixed 7d, 30d and 90d tabs (relabel with `labels.ranges`, supply your own daily totals), with a table and a share bar underneath. Use a `table` as the text alternative.", "gap": "No real time-series chart: no axes with units, no two-axis view, no zoom, no gap rendering (missing reads cannot be left blank), no dashed forecast series and no intraday range under 7d. Use a charting library for interval data.", "components": [ { "slug": "insight-cards", "title": "Insight Cards", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/insight-cards.md", "install": "npx shadcn@latest add @opendraft/insight-cards" }, { "slug": "analytics-dashboard", "title": "Analytics Dashboard", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/analytics-dashboard.md", "install": "npx shadcn@latest add @opendraft/analytics-dashboard" }, { "slug": "date-range-picker", "title": "Date Range Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-range-picker.md", "install": "npx shadcn@latest add @opendraft/date-range-picker" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" } ] }, { "need": "Smart meter list and reads", "fit": "ready", "notes": "Virtualized `table` (needs a pixel `rowHeight`, plus `height` or `maxHeight`) with sortable columns, a meter ID in `font-mono` with `copy-button`, and read quality as a text `badge` (Actual, Estimated, Missing). `selectable` with `getRowId` and `onSelectionChange` (selected ids) lets you show a bulk bar of `button`s for bulk reads or commands. The table has no built-in filter, so add `tabs` or `select` and filter your own data. On phones it scrolls sideways or drops columns, so keep the first column to the meter ID.", "gap": null, "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "date-range-picker", "title": "Date Range Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-range-picker.md", "install": "npx shadcn@latest add @opendraft/date-range-picker" }, { "slug": "copy-button", "title": "Copy Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/copy-button.md", "install": "npx shadcn@latest add @opendraft/copy-button" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" } ] }, { "need": "Outage management and restoration tracking", "fit": "adapt", "notes": "Outage list in `table` with a severity `badge`; each outage's updates in `timeline` (`timestamp`, `status`, and `meta` for the author); restoration stages (reported, crew dispatched, repair, restored) in a vertical `stepper` where each step's `description` can carry the time and the estimated restoration source.", "gap": "No outage map and no affected-area polygon view. `stepper` only makes completed steps clickable.", "components": [ { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "status-indicator", "title": "Status Indicator", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/status-indicator.md", "install": "npx shadcn@latest add @opendraft/status-indicator" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" } ] }, { "need": "EV charging network and charge point status", "fit": "adapt", "notes": "Charge points in `table` with a `status-indicator` per connector (use `label`, `tone` and `shape` for Available, Charging, Faulted, Offline since the built-in kinds are service-status words). `progress` for session state of charge: set `tone=\"brand\"` because `tone=\"auto\"` with `invert` would paint a half-charged car as a warning. `stat` for uptime and energy delivered. Filter charger status with `tabs` or `select` over your own data.", "gap": "No station map. `filter-table` is a task table (rows are task, date, status todo|progress|done, owner) and cannot show chargers.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "status-indicator", "title": "Status Indicator", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/status-indicator.md", "install": "npx shadcn@latest add @opendraft/status-indicator" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" } ] }, { "need": "Start and monitor a charging session (driver)", "fit": "adapt", "notes": "Enter the charger code with `otp-input` (set `length` and `pattern=\"alphanumeric\"`), show `progress` (brand tone) for charge level, `stat` for kWh, cost and time remaining, and a clear stop `button`. Use `alert` for a faulted connector.", "gap": "No QR scanner (`qr-code` only renders codes, it cannot read them) and no payment-method selector built for tap-to-pay. `checkout` is an event-ticket flow and does not fit a session payment.", "components": [ { "slug": "otp-input", "title": "OTP Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/otp-input.md", "install": "npx shadcn@latest add @opendraft/otp-input" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "sonner", "title": "Toast", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/sonner.md", "install": "npx shadcn@latest add @opendraft/sonner" } ] }, { "need": "Solar and battery site dashboard", "fit": "adapt", "notes": "Production, consumption, export and battery level in `stat` and `progress` (`invert` so a low battery warns, and pass `valueLabel` such as `64%`). `slider` (with `label`, `formatValue`, `marks` and `onValueCommit` so you save on release) and `switch` for reserve level and backup mode. A day curve can use `InsightChart` from `insight-cards` with 24 or more points.", "gap": "No energy-flow diagram (solar to home to battery to grid) and no multi-axis time-series chart.", "components": [ { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "insight-cards", "title": "Insight Cards", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/insight-cards.md", "install": "npx shadcn@latest add @opendraft/insight-cards" }, { "slug": "slider", "title": "Slider", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/slider.md", "install": "npx shadcn@latest add @opendraft/slider" }, { "slug": "switch", "title": "Switch", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/switch.md", "install": "npx shadcn@latest add @opendraft/switch" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" } ] }, { "need": "Field service work orders and technician dispatch", "fit": "adapt", "notes": "Work orders in `table`; job detail composed from `page-header`, `tabs`, `stepper` and `timeline` (`detail-page` is an event-ticket purchase page and does not fit). Safety and completion checklist as `checkbox` rows with `progress`; `todo-list` is a read-only display of a plan, not a tickable list. Sign-off through `approval-card` (put a `textarea` for notes in its `children`); photo evidence through `dropzone`, whose `capture=\"environment\"` opens the phone camera.", "gap": "No scheduler or map-based dispatch board, no signature pad, and offline sync of work orders is your app's job.", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" }, { "slug": "dropzone", "title": "Dropzone", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dropzone.md", "install": "npx shadcn@latest add @opendraft/dropzone" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" } ] }, { "need": "Customer billing, usage and tariffs", "fit": "adapt", "notes": "Bill summary in `stat`, line items in `table`, budget used in `progress` (consumption tone), a statement period chosen with `date-range-picker`, bill status as a `badge` (Paid, Open, Disputed). Build the payment form from `field`, `input` and `radio-group`, with the provider's hosted card fields.", "gap": "`checkout` and `order-confirmation` are event-ticket shaped (attendee, front-desk delivery, ticket passes) and `settings-page` billing is a SaaS plan panel with a fixed Change plan button, so none fit a utility bill. No usage-versus-tariff-band chart and no bill document viewer; link to the PDF.", "components": [ { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "date-range-picker", "title": "Date Range Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-range-picker.md", "install": "npx shadcn@latest add @opendraft/date-range-picker" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" } ] }, { "need": "Demand response, switching and control actions", "fit": "adapt", "notes": "Build the typed-name confirmation yourself in a `dialog` with an `input` that must match the asset name before the confirm `button` enables. `approval-card` shows the parameters in its `children` with Approve, Request changes and Reject (`approveLabel` is relabelable) for one decision; `sonner` for the result; `timeline` for who did what and when; `table` for the pending requests.", "gap": "`approval-card` is a single decision with no approver identity, time or reason field, so two-person sign-off (two cards or two statuses) and the recorded actor come from your code. Interlock rules and permissions come from your control system.", "components": [ { "slug": "dialog", "title": "Dialog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dialog.md", "install": "npx shadcn@latest add @opendraft/dialog" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" }, { "slug": "switch", "title": "Switch", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/switch.md", "install": "npx shadcn@latest add @opendraft/switch" }, { "slug": "sonner", "title": "Toast", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/sonner.md", "install": "npx shadcn@latest add @opendraft/sonner" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" } ] } ], "screens": [ { "name": "Network operations overview", "compose": [ "page-header", "alert", "stat", "status-indicator", "progress", "table" ] }, { "name": "Outage detail", "compose": [ "page-header", "badge", "stepper", "timeline", "approval-card" ] }, { "name": "Charge point network", "compose": [ "page-header", "tabs", "table", "status-indicator", "stat" ] }, { "name": "Work order and field checklist", "compose": [ "page-header", "tabs", "checkbox", "progress", "dropzone", "approval-card" ] }, { "name": "Customer usage and bill", "compose": [ "site-header", "page-header", "stat", "progress", "date-range-picker", "table", "field", "button" ] } ], "integrations": [ { "for": "Time-series charts for load, generation and meter data", "options": [ "Recharts", "Apache ECharts", "uPlot" ], "note": "opendraft has no general time-series chart (only the small `InsightChart` line chart); theme the library with opendraft's color tokens, and use uPlot or ECharts when you plot tens of thousands of interval reads." }, { "for": "Maps of outages, substations, feeders and charge points", "options": [ "MapLibre GL JS", "Mapbox GL JS", "Leaflet" ], "note": "Put the map beside a `table` or `drawer` from opendraft and encode severity with shape and label as well as color, since map tiles change the contrast." }, { "for": "Live telemetry and charger status", "options": [ "MQTT over WebSockets", "OCPP gateway (for example SteVe)", "Server-Sent Events" ], "note": "Stream into `table` and `stat` and keep the last-update time visible; show a stale state when the feed drops rather than the last value as if it were current." }, { "for": "Time zones, daylight saving and interval math", "options": [ "Temporal API", "date-fns-tz", "Luxon" ], "note": "Do billing and interval aggregation in the meter's zone, and format with the zone abbreviation next to `font-mono` timestamps." }, { "for": "Payments for charging sessions and bills", "options": [ "Stripe", "Adyen" ], "note": "Build the payment form with `field` and `input` (opendraft's `checkout` is an event-ticket flow) and let the provider's hosted fields handle card data." }, { "for": "Barcode and QR scanning for meters, chargers and assets", "options": [ "html5-qrcode", "zxing-js", "Barcode Detection API" ], "note": "opendraft's `qr-code` only draws codes; add a scanner component and show a manual-entry `field` as the fallback." } ] }, { "id": "government-civic", "title": "Government and civic services", "short": "Government", "summary": "Public-sector portals for permits, licences, benefits, tax, records requests, case management and civic engagement. Used by everyone, including people in stress, on old phones and with assistive technology, so clarity and access come before polish.", "signals": [ "government", "public sector", "civic", "citizen", "permit", "licence", "benefits", "welfare", "tax", "council", "municipal", "case management", "foi", "records request", "immigration", "public service" ], "principles": [ "Write in plain language: short sentences, common words, one idea per paragraph, the action in the button label (`Apply for a parking permit`, not `Submit`). Explain any term of art the first time it appears.", "Design to a high accessibility bar (aim for WCAG 2.2 AA or better; in many places public bodies are legally required to): visible focus, 4.5:1 text contrast, full keyboard use, errors announced and linked to their fields (`field` wires the ids and ARIA), no information by color alone, and a tested screen reader path for every form. opendraft's components do not make a page compliant by themselves, so test the finished screen.", "Long forms must be save-and-resume: ask one thing per step, show the steps with a `stepper`, let people leave and return with a reference number, never lose entered data on an error, and offer a final review page before submission. Neither `stepper` nor `field` stores anything, so draft saving is your backend's job.", "Be transparent about status: every application shows its reference number in `font-mono` with a `copy-button`, the current stage in words, what happens next, the expected time, and who to contact. Never leave a person guessing.", "Support many languages and reading directions from the start: text can grow 30 to 40 percent, names and addresses are not a US shape, dates and numbers follow the locale, and the language switcher is always visible and labeled in its own language.", "No dark patterns: no pre-ticked consent, no countdown pressure on benefits, equal prominence for decline and accept. Ask only for data you need and explain why. Assume a poor connection and an old device: keep pages light, show upload progress, retry safely, and always offer a phone, paper or in-person alternative." ], "playbook": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/use-cases/government-civic.md", "kit": { "name": "kit-government-civic", "install": "npx shadcn@latest add @opendraft/kit-government-civic", "components": [ "button", "card", "input", "label", "select", "dialog", "badge", "tabs", "field", "page-header", "theme-toggle", "sonner", "stepper", "textarea", "radio-group", "checkbox", "date-picker", "repeater-field", "dropzone", "alert", "timeline", "copy-button", "auth-screen", "otp-input", "table", "approval-card", "stat", "drawer", "ticket-pass", "site-header", "search-list", "accordion", "empty-state", "analytics-dashboard", "date-range-picker", "progress" ] }, "needs": [ { "need": "Apply for a permit, licence or benefit (multi-step form)", "fit": "adapt", "notes": "`stepper` for stages (each step takes a `description`, and only completed steps are clickable), `field` for label, hint and linked error (`FieldSet` for a legend around radio groups), `repeater-field` for household members or prior addresses (`min`, `max`, `renderRow`, `createItem`). `date-picker` takes ISO dates with `min`, `max`, `locale` and `isDateDisabled`.", "gap": "No built-in save-and-resume or draft persistence (store drafts server side), no address lookup, and no check-your-answers page; build the review page from a plain definition list (`dl`) grouped by step, with a change link per group. `table` is virtualized and needs a fixed `rowHeight`, so it is a poor fit for a short summary.", "components": [ { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "textarea", "title": "Textarea", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/textarea.md", "install": "npx shadcn@latest add @opendraft/textarea" }, { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" }, { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "date-picker", "title": "Date Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-picker.md", "install": "npx shadcn@latest add @opendraft/date-picker" }, { "slug": "repeater-field", "title": "Repeater Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/repeater-field.md", "install": "npx shadcn@latest add @opendraft/repeater-field" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Upload supporting documents", "fit": "ready", "notes": "`dropzone` validates `accept`, `maxSize` and `maxFiles`, reports `onReject` reasons (file-too-large, file-invalid-type, too-many-files), opens the phone camera with `capture=\"environment\"`, and renders a file list from `files` with per-file `progress`, `error` and `onRemove`. Show accepted types and size in a `field` hint, and a `badge` for Uploaded or Needs attention. It has no upload logic: you run the upload and feed `progress` back. Always keep a plain file-input path working.", "gap": null, "components": [ { "slug": "dropzone", "title": "Dropzone", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dropzone.md", "install": "npx shadcn@latest add @opendraft/dropzone" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Application status and history tracking", "fit": "ready", "notes": "`stepper` (vertical, with `description` for the expected date) for the stage, `timeline` for dated events (received, in review, more information needed, decided; `timestamp`, `status`, `meta` for who), `badge` with words for status, `copy-button` for the reference number, `alert` when action is needed from the applicant. `detail-page` is an event-ticket purchase page, so compose the page from `page-header` and these parts.", "gap": null, "components": [ { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "copy-button", "title": "Copy Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/copy-button.md", "install": "npx shadcn@latest add @opendraft/copy-button" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" } ] }, { "need": "Sign in and verify identity", "fit": "adapt", "notes": "`auth-screen` is email and password with sign-in and sign-up tabs, a remember checkbox, a forgot-password callback, optional `providers` buttons (use one per identity provider) and a brand panel. `otp-input` for SMS or authenticator codes; add your own resend `button` and a non-SMS route.", "gap": "No digital identity (eID, login.gov style) hand-off flow, no knowledge-based verification and no built-in resend or lockout; wire your identity provider and show its error states in `alert`.", "components": [ { "slug": "auth-screen", "title": "Auth Screen", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/auth-screen.md", "install": "npx shadcn@latest add @opendraft/auth-screen" }, { "slug": "otp-input", "title": "OTP Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/otp-input.md", "install": "npx shadcn@latest add @opendraft/otp-input" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Case management for caseworkers", "fit": "adapt", "notes": "Case queue in `table` (`selectable` with `getRowId` and `onSelectionChange` for bulk assign buttons), filtered with `tabs` or `select` over your own data. The case file is composed from `page-header`, `tabs` for documents, notes and history, and `timeline` as the case history. Decisions go through `approval-card` (put a `textarea` for the reason in its `children`; it has Approve, Request changes and Reject but no reason field or decision log of its own). `drawer` for a quick preview.", "gap": "`filter-table` is a task table (todo, progress, done rows) and `selection-actions` is an AI text-rewrite bar, so neither fits a case queue. `detail-page` is an event-ticket page. No assignment board with SLA timers.", "components": [ { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "drawer", "title": "Drawer", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/drawer.md", "install": "npx shadcn@latest add @opendraft/drawer" }, { "slug": "textarea", "title": "Textarea", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/textarea.md", "install": "npx shadcn@latest add @opendraft/textarea" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Book an appointment or inspection slot", "fit": "gap", "notes": "`date-picker` (ISO value, optional `time` entry, `min`, `max`, `isDateDisabled` for closed days) plus a `radio-group` of times, with a booked slot's item `disabled`, covers a simple booking. `ticket-pass` makes a confirmation pass with a QR `code`, fields and a status (valid, used, expired, void).", "gap": "No calendar or availability grid showing open and booked slots, no reschedule or cancel view, and no time-zone support in `date-picker`. `order-confirmation` is ticket-shaped with a fixed three-step stepper.", "components": [ { "slug": "date-picker", "title": "Date Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-picker.md", "install": "npx shadcn@latest add @opendraft/date-picker" }, { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "ticket-pass", "title": "Ticket Pass", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/ticket-pass.md", "install": "npx shadcn@latest add @opendraft/ticket-pass" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Pay a fee, fine or tax", "fit": "gap", "notes": "Show amount, due date and what it is for in `stat` and a short line-item `table`. Build the payment form from `field`, `input` and `radio-group` with the provider's hosted card fields, and a receipt from `stat`, a `stepper` marked `complete` and a `copy-button` reference.", "gap": "`checkout` is an event-ticket flow (quantity steppers, attendee, front-desk delivery, pay later, ticket passes) and `order-confirmation` renders ticket passes, so neither fits a fine or tax. Add instalment-plan and concession options yourself.", "components": [ { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" } ] }, { "need": "Service notices, closures and emergency banners", "fit": "ready", "notes": "`alert` with `banner` for a full-width, dismissible (`dismissible`, `onDismiss`) notice at the top for service disruption or deadlines, with an `AlertAction` button; keep the same severity words across services. `site-header` for the page frame.", "gap": null, "components": [ { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "site-header", "title": "Site Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/site-header.md", "install": "npx shadcn@latest add @opendraft/site-header" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" } ] }, { "need": "Find a service, office or document (search and directory)", "fit": "adapt", "notes": "`search-list` filters a plain list of strings with a live result list and an empty message; `accordion` for FAQs; `empty-state` (`live`) for no results with a next step. For results that need a description or link, use `input` and filter your own data into a list.", "gap": "`search-list` takes strings only. No map or location finder. `catalog` is event shaped (date, price, capacity, places left) and not a service directory. `command-palette` is a keyboard action menu over in-memory items.", "components": [ { "slug": "search-list", "title": "Search List", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/search-list.md", "install": "npx shadcn@latest add @opendraft/search-list" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "accordion", "title": "Accordion", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/accordion.md", "install": "npx shadcn@latest add @opendraft/accordion" }, { "slug": "empty-state", "title": "Empty State", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/empty-state.md", "install": "npx shadcn@latest add @opendraft/empty-state" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" } ] }, { "need": "Civic data and public dashboards (budgets, performance, open data)", "fit": "adapt", "notes": "`analytics-dashboard` already pairs a chart with a sortable table: rows are `name`, `visitors` (a count), `conversion` (a 0 to 1 rate) and `duration` (seconds), or a custom `valueColumn` for money. Relabel it with `labels` and the format props for service volumes or spending, and its tabs are the fixed keys 7d, 30d and 90d (relabel with `labels.ranges`). The chart shows one metric at a time, so put the same numbers in the table as the accessible alternative.", "gap": "Only a single smoothed line chart (smoothing applies below 24 points), a share bar and a table: no bar or map chart, no fiscal-year ranges beyond 90 days of points, and the chart's data is only readable by hover, so keep the table.", "components": [ { "slug": "analytics-dashboard", "title": "Analytics Dashboard", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/analytics-dashboard.md", "install": "npx shadcn@latest add @opendraft/analytics-dashboard" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "date-range-picker", "title": "Date Range Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-range-picker.md", "install": "npx shadcn@latest add @opendraft/date-range-picker" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" } ] } ], "screens": [ { "name": "Service start page", "compose": [ "site-header", "alert", "page-header", "accordion", "button" ] }, { "name": "Multi-step application", "compose": [ "page-header", "stepper", "field", "repeater-field", "dropzone", "button" ] }, { "name": "Check your answers and submit", "compose": [ "page-header", "stepper", "checkbox", "alert", "button" ] }, { "name": "Application status", "compose": [ "site-header", "page-header", "stepper", "timeline", "badge", "copy-button", "alert" ] }, { "name": "Caseworker queue and case file", "compose": [ "page-header", "table", "tabs", "timeline", "approval-card", "textarea" ] } ], "integrations": [ { "for": "Translations and locale-aware formatting", "options": [ "next-intl", "react-i18next", "FormatJS (react-intl)" ], "note": "Keep all copy in message files, test with long German and Finnish strings, and set `dir` for right-to-left languages; check each opendraft component in RTL, since some spacing uses left and right classes." }, { "for": "Digital identity and sign-in", "options": [ "OpenID Connect provider (Keycloak, Auth0)", "Login.gov", "eIDAS-based national eID" ], "note": "Use `auth-screen`'s `providers` buttons for the identity provider hand-off and its email form as the fallback path, `otp-input` for codes, and show a clear error and recovery route when identity checks fail." }, { "for": "Accessibility testing", "options": [ "axe-core", "Pa11y", "NVDA and VoiceOver manual checks" ], "note": "Automated tools catch only part of the problems; test each form with a keyboard and a screen reader, and test at 200 percent zoom." }, { "for": "Address lookup and validation", "options": [ "Google Places", "Loqate", "National address register APIs" ], "note": "Offer manual entry in a `field` group as the fallback and never block submission when lookup fails." }, { "for": "Document storage and e-signature", "options": [ "S3-compatible storage with virus scanning", "DocuSign", "Adobe Sign" ], "note": "Pair with `dropzone` for intake (it has no upload logic); opendraft has no signature pad or PDF viewer, so use the provider's embedded signing and viewing." }, { "for": "Notifications by email, SMS and letter", "options": [ "GOV.UK Notify", "Twilio", "Postmark" ], "note": "Mirror each notification as a dated entry in `timeline` so a person can see what was sent without needing the message." } ] }, { "id": "manufacturing", "title": "Manufacturing and industrial operations", "short": "Manufacturing", "summary": "Manufacturing execution (MES), shop-floor terminals, quality control, maintenance and industrial IoT dashboards. Used by operators on a feet-and-gloves schedule and by engineers and managers reviewing lines, lots and downtime.", "signals": [ "manufacturing", "mes", "shop floor", "factory", "production line", "oee", "downtime", "quality control", "inspection", "cmms", "maintenance", "work order", "andon", "batch", "traceability" ], "principles": [ "Make state glanceable from across the room. Line, machine and order status uses large type, a word (Running, Idle, Down, Changeover) plus an icon, and high contrast; a wall display needs no reading beyond the status and one number.", "Design for gloves and noise: touch targets of at least 56 px on shop-floor terminals, generous spacing, no hover-only or drag-only actions, and confirmations that do not rely on sound alone. opendraft's largest button (`size=\"xl\"`) is 48 px tall and `checkbox`, `radio-group` and `switch` are 16 to 20 px, so enlarge them with classes or wrap each in a full-width 56 px row that carries the click.", "Every unit of product has traceability: lot, batch, serial, shift, operator and machine appear on the record, in `font-mono` with a `copy-button` and a scannable code, and corrections add a new entry rather than overwrite an old one.", "Rank alarms by priority, not arrival time: Critical (stop and act), Warning (act this shift), Info. Keep alarm text specific (what, where, what to do), require acknowledgement with a name and time, and avoid alarm floods by grouping repeats.", "Show shift and time context everywhere: the current shift, shift start, counts since shift start, and timestamps in the plant's local zone. Handovers between shifts need a visible notes and open-issues summary.", "Tolerate offline and flaky networks: queue entries locally, show an explicit Saved locally, Syncing and Synced state, never lose a count or a quality reading, and show how stale a displayed value is." ], "playbook": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/use-cases/manufacturing.md", "kit": { "name": "kit-manufacturing", "install": "npx shadcn@latest add @opendraft/kit-manufacturing", "components": [ "button", "card", "input", "label", "select", "dialog", "badge", "tabs", "field", "page-header", "theme-toggle", "sonner", "stat", "status-indicator", "alert", "progress", "animated-number", "stepper", "checkbox", "quantity-stepper", "approval-card", "radio-group", "textarea", "dropzone", "table", "timeline", "analytics-dashboard", "date-range-picker", "date-picker", "copy-button", "qr-code", "command-palette", "insight-cards", "slider", "switch", "empty-state" ] }, "needs": [ { "need": "Line and machine status wall display (andon)", "fit": "adapt", "notes": "`stat` tiles for output, target and OEE (`value` takes any node, so wrap the number in a large span or `animated-number`; `delta` with `goodWhen` for against-target), a `status-indicator` per machine (relabel with `label`, `tone`, `shape` for Running, Idle, Down, Changeover), `progress` (`size=\"lg\"`) for output against target, `alert` for stoppages.", "gap": "No large-format kiosk or full-screen display mode and no auto-rotating screen layout; build it with a scaled container. `stat` renders its value at a fixed `text-3xl`, so check it reads from across the room and enlarge the node you pass as `value`.", "components": [ { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "status-indicator", "title": "Status Indicator", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/status-indicator.md", "install": "npx shadcn@latest add @opendraft/status-indicator" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "animated-number", "title": "Animated Number", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/animated-number.md", "install": "npx shadcn@latest add @opendraft/animated-number" } ] }, { "need": "Production order execution on a terminal", "fit": "adapt", "notes": "Work instructions as a vertical `stepper` (each step has a `description` for the instruction text) or as `checkbox` rows. `todo-list` is a read-only plan display with no tick action, and `detail-page` is an event-ticket page, so neither fits. `quantity-stepper` (`min`, `max`, `step`, hold-to-repeat) for good and scrap counts, `progress` for count against order quantity, `approval-card` or a `dialog` to confirm completion.", "gap": "Controls are desktop sized (`button` tops out at 48 px, `quantity-stepper` has only `sm` and default), so set larger sizes through classes and verify 56 px targets. `stepper` only makes completed steps clickable. No barcode scan input or numeric keypad (use an `input` with `inputMode=\"numeric\"`).", "components": [ { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" }, { "slug": "quantity-stepper", "title": "Quantity Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/quantity-stepper.md", "install": "npx shadcn@latest add @opendraft/quantity-stepper" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "dialog", "title": "Dialog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dialog.md", "install": "npx shadcn@latest add @opendraft/dialog" } ] }, { "need": "Quality inspection and checklists", "fit": "adapt", "notes": "One `radio-group` (Pass, Fail, N/A) per inspection step inside a `field`, a measured value in `input`, notes in `textarea`, defect photos in `dropzone` (`capture=\"environment\"` opens the camera), sign-off in `approval-card`, and past inspections in `table`. `todo-list` is a read-only plan and `records-table` is a fixed contact-list grid (name, tags, last, strength), so neither fits.", "gap": "No statistical process control chart (X-bar, control limits; `InsightChart` in `insight-cards` draws only one dashed threshold) and no measurement-instrument input.", "components": [ { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" }, { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "textarea", "title": "Textarea", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/textarea.md", "install": "npx shadcn@latest add @opendraft/textarea" }, { "slug": "dropzone", "title": "Dropzone", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dropzone.md", "install": "npx shadcn@latest add @opendraft/dropzone" }, { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" } ] }, { "need": "Alarm and event management", "fit": "adapt", "notes": "Alarm list in `table` sorted by priority with a text `badge`; `selectable` with `getRowId` and `onSelectionChange` (selected ids) plus a bar of `button`s for bulk acknowledge (`selection-actions` is an AI text-rewrite bar, not a bulk bar); `tabs` for Active and Acknowledged; `timeline` for the event history; `alert` for the active critical banner.", "gap": "No alarm-shelving or suppression workflow and no audible alarm control; those are logic you build around `table`.", "components": [ { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "sonner", "title": "Toast", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/sonner.md", "install": "npx shadcn@latest add @opendraft/sonner" } ] }, { "need": "Downtime and OEE analysis", "fit": "adapt", "notes": "OEE, availability, performance and quality in `stat` and `progress`. `analytics-dashboard` can be relabelled for machines: each row is `name` (machine), `visitors` (a count, such as stops), `conversion` (a 0 to 1 rate, such as availability) and `duration` (seconds, such as downtime), with `valueColumn` for one custom number; the share bar can show downtime reasons by percent. The chart plots one metric at a time with no axes. `date-range-picker` for custom periods.", "gap": "No Pareto chart (the share bar has no cumulative line), no stacked shift-by-shift time-series chart, the chart smooths curves below 24 points, and the range tabs are fixed to the keys 7d, 30d and 90d (relabel them with `labels.ranges` and supply your own data per key).", "components": [ { "slug": "analytics-dashboard", "title": "Analytics Dashboard", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/analytics-dashboard.md", "install": "npx shadcn@latest add @opendraft/analytics-dashboard" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "date-range-picker", "title": "Date Range Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-range-picker.md", "install": "npx shadcn@latest add @opendraft/date-range-picker" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" } ] }, { "need": "Maintenance work orders and preventive schedules", "fit": "gap", "notes": "Work orders in `table` (status `badge`, due date from `date-picker` in ISO form), job page composed from `page-header`, `tabs`, `checkbox` rows and `stepper`, history in `timeline`, sign-off in `approval-card`. `detail-page` is an event-ticket page and `todo-list` is read-only, so they do not fit.", "gap": "No scheduler, calendar or Gantt for planned maintenance, no recurrence rules in `date-picker`, and no meter-based trigger view.", "components": [ { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "date-picker", "title": "Date Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-picker.md", "install": "npx shadcn@latest add @opendraft/date-picker" }, { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" }, { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" } ] }, { "need": "Lot, batch and serial traceability", "fit": "adapt", "notes": "Search a lot with an `input` that queries your API (`command-palette` filters only an in-memory `items` list, with no query callback, so it suits a small set), show genealogy rows in `table`, record history in `timeline`, ID in `font-mono` with `copy-button`, and a label preview with `qr-code`. `records-table` is a fixed contact-list grid and does not fit.", "gap": "No tree or graph view for forward and backward genealogy (`flowchart` is a two-card trigger and if-else canvas), and no barcode formats other than QR (Code 128, DataMatrix).", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "copy-button", "title": "Copy Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/copy-button.md", "install": "npx shadcn@latest add @opendraft/copy-button" }, { "slug": "qr-code", "title": "QR Code", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/qr-code.md", "install": "npx shadcn@latest add @opendraft/qr-code" }, { "slug": "command-palette", "title": "Command Palette", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/command-palette.md", "install": "npx shadcn@latest add @opendraft/command-palette" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" } ] }, { "need": "Equipment and sensor live data", "fit": "gap", "notes": "Current readings in `stat` and `table` with unit and last-update time; `progress` as a linear gauge against a limit. A short trend can use `InsightChart` from `insight-cards` (several lines and one dashed threshold, 24 or more points to avoid smoothing). `slider` (`onValueCommit`) and `switch` can drive setpoints, behind a `dialog` confirmation.", "gap": "No gauge or dial, no full time-series trend chart with axes and units, and no P&ID or floor-plan view. Writes to a PLC need your own interlocks and confirmation.", "components": [ { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "status-indicator", "title": "Status Indicator", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/status-indicator.md", "install": "npx shadcn@latest add @opendraft/status-indicator" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "insight-cards", "title": "Insight Cards", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/insight-cards.md", "install": "npx shadcn@latest add @opendraft/insight-cards" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "slider", "title": "Slider", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/slider.md", "install": "npx shadcn@latest add @opendraft/slider" }, { "slug": "switch", "title": "Switch", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/switch.md", "install": "npx shadcn@latest add @opendraft/switch" }, { "slug": "dialog", "title": "Dialog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dialog.md", "install": "npx shadcn@latest add @opendraft/dialog" } ] }, { "need": "Inventory, materials and shift handover", "fit": "adapt", "notes": "Stock levels as `progress` with `invert` so low stock warns (the bar measures what remains), counts with `quantity-stepper`, handover notes in `textarea` and posted to a `timeline`, open issues in `table`.", "gap": "No barcode scan input and no pick list or kanban board for material requests (`crm-pipeline` is a sales board with a USD value on every card).", "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "quantity-stepper", "title": "Quantity Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/quantity-stepper.md", "install": "npx shadcn@latest add @opendraft/quantity-stepper" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "textarea", "title": "Textarea", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/textarea.md", "install": "npx shadcn@latest add @opendraft/textarea" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "empty-state", "title": "Empty State", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/empty-state.md", "install": "npx shadcn@latest add @opendraft/empty-state" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" } ] } ], "screens": [ { "name": "Line status wall display", "compose": [ "stat", "status-indicator", "progress", "alert" ] }, { "name": "Operator work order terminal", "compose": [ "page-header", "stepper", "checkbox", "quantity-stepper", "progress", "approval-card" ] }, { "name": "Quality inspection", "compose": [ "page-header", "radio-group", "field", "dropzone", "approval-card" ] }, { "name": "Alarm console", "compose": [ "page-header", "alert", "tabs", "table", "button", "timeline" ] }, { "name": "Plant performance overview", "compose": [ "page-header", "stat", "analytics-dashboard", "table", "date-range-picker" ] } ], "integrations": [ { "for": "Machine and sensor data over industrial protocols", "options": [ "OPC UA", "MQTT with Sparkplug B", "Node-RED" ], "note": "Bridge to the browser through a gateway or WebSocket and show the timestamp from the source, not the browser's receive time, so stale data is obvious." }, { "for": "Time-series storage and trend charts", "options": [ "InfluxDB or TimescaleDB with Grafana", "Apache ECharts", "uPlot" ], "note": "Grafana panels can be embedded beside opendraft `stat` tiles; opendraft has no native time-series chart yet, so a library must draw trends." }, { "for": "Barcode and QR scanning on the floor", "options": [ "Hardware scanners that act as keyboards", "Zebra DataWedge", "zxing-js" ], "note": "Most scanners type into a focused field; keep one large focused `input` ready and show the scanned value back clearly. `qr-code` only renders codes." }, { "for": "ERP, MES and quality system connections", "options": [ "SAP", "Oracle NetSuite", "ISA-95 based middleware" ], "note": "Keep the order, lot and BOM data read through your API and write corrections as new records, which matches the audit trail the UI shows." }, { "for": "Offline-first data and sync on terminals", "options": [ "PowerSync", "RxDB", "Workbox with IndexedDB" ], "note": "Surface the Saved locally, Syncing and Synced state with a `badge` and use `sonner` only for failures that need action." }, { "for": "Label and document printing", "options": [ "Zebra Browser Print", "ZPL over a print server" ], "note": "Render the on-screen label with `qr-code` and `font-mono` text, then send the matching ZPL to the printer." } ] }, { "id": "hr-people", "title": "HR and people operations", "short": "HR and People", "summary": "HRIS, recruiting, onboarding, payroll, performance and time-off products used by employees, managers and HR teams. The data is personal and sensitive, so who can see what, and who changed what, is part of the design.", "signals": [ "human resources", "hris", "people ops", "recruiting", "applicant", "candidate", "onboarding", "offboarding", "payroll", "payslip", "performance review", "time off", "leave", "timesheet", "employee directory" ], "principles": [ "Make views permission-aware: show each person only the fields their role allows, and say so (`Visible to HR only`) rather than leaving a blank. Managers see their reports, employees see themselves, and a view-as preview helps admins check it.", "Mask sensitive data by default (salary, national ID, bank details, health and leave reasons, performance ratings) with an explicit reveal that is logged. Never put such values in URLs, toasts, page titles or exports without a clear warning.", "Approval flows show the whole chain: who requested, who must approve now, who is next, what was decided and when. Give every request a status word (Pending, Approved, Declined, Withdrawn) and always allow the requester to withdraw or edit before a decision.", "Use inclusive language and flexible data: do not require a binary gender field, allow preferred and legal names, support names that do not fit first and last, and keep pronouns optional. Dates, currencies and working weeks follow the person's country.", "Make changes auditable: every edit to pay, title, manager, status or personal data records who, when, old value and new value, visible in a history view. Keep effective dates separate from edit dates so retroactive changes are clear.", "Treat people-related decisions with care: show the reason and next step on rejections, avoid ranking people by a single score, label AI-generated summaries or suggestions as such, and keep a human decision-maker on hiring, pay and performance outcomes." ], "playbook": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/use-cases/hr-people.md", "kit": { "name": "kit-hr-people", "install": "npx shadcn@latest add @opendraft/kit-hr-people", "components": [ "button", "card", "input", "label", "select", "dialog", "badge", "tabs", "field", "page-header", "theme-toggle", "sonner", "table", "avatar", "command-palette", "drawer", "copy-button", "timeline", "date-range-picker", "textarea", "approval-card", "progress", "stat", "stepper", "dropzone", "checkbox", "radio-group", "alert", "accordion", "date-picker", "slider", "analytics-dashboard" ] }, "needs": [ { "need": "Employee directory and org chart", "fit": "adapt", "notes": "A searchable `table` whose name cell renders an `avatar`, role and location, filtered by an `input` over your data; a profile in a `drawer` (or its own page built from `page-header` and `tabs`); jump-to-person with `command-palette` (`label`, `group`, `hint`, `badge` per item, filtered in memory, so it suits a few thousand people at most). `search-list` takes plain strings only, so it cannot show avatars or roles.", "gap": "No org chart tree or reporting-line visualization. `detail-page` is an event-ticket purchase page, not a person profile.", "components": [ { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "avatar", "title": "Avatar", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/avatar.md", "install": "npx shadcn@latest add @opendraft/avatar" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "command-palette", "title": "Command Palette", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/command-palette.md", "install": "npx shadcn@latest add @opendraft/command-palette" }, { "slug": "drawer", "title": "Drawer", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/drawer.md", "install": "npx shadcn@latest add @opendraft/drawer" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" } ] }, { "need": "Employee profile with sensitive fields", "fit": "adapt", "notes": "Sections as `tabs`, editable details with `field` and `input`, a `badge` such as Visible to HR only, and a `dialog` that asks for confirmation before revealing masked values such as bank details. A `timeline` tab can show the change history.", "gap": "No masked-field control with reveal and audit hook; build it from `input`, a toggle `button` and your permission check. `settings-page` has fixed profile fields (name, email, bio, timezone) and a SaaS team and billing layout, and `detail-page` is an event-ticket page, so neither fits.", "components": [ { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "copy-button", "title": "Copy Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/copy-button.md", "install": "npx shadcn@latest add @opendraft/copy-button" }, { "slug": "dialog", "title": "Dialog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dialog.md", "install": "npx shadcn@latest add @opendraft/dialog" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" } ] }, { "need": "Time-off requests and approvals", "fit": "adapt", "notes": "Request with `date-range-picker` (ISO `{from, to}` dates, `min`, `max`, `presets`), balance in `stat` and `progress` (`valueLabel` such as 12 of 25 days), decision with `approval-card` (Approve, Request changes, Reject; put a `textarea` for a decision note in its `children`), approval chain in `timeline` using `current` and `upcoming` statuses, requests in `table`.", "gap": "No team calendar showing who is away and no half-day support. Do not mark public holidays or weekends with `isDateDisabled`: the range picker refuses any range that spans a disabled day, so people could not book leave across a holiday. Count working days in your own code and show the result next to the range.", "components": [ { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "date-range-picker", "title": "Date Range Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-range-picker.md", "install": "npx shadcn@latest add @opendraft/date-range-picker" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "textarea", "title": "Textarea", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/textarea.md", "install": "npx shadcn@latest add @opendraft/textarea" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" } ] }, { "need": "Recruiting pipeline and candidate review", "fit": "gap", "notes": "Build the board as a stage list instead: a clickable `StatGroup` (each `stat` takes `onClick` and `selected`) or `tabs` for the stages and counts, a `table` of candidates with `avatar` and `badge` cells and a stage `select` per row to move them, and a `drawer` for the candidate with `tabs`, `timeline` for activity, `textarea` for scorecard notes and `approval-card` for an offer decision. You decide which columns exist, so blind early-stage review is easy.", "gap": "`crm-pipeline` is a sales board and cannot be relabelled: it has no `labels` prop, hard-codes the Sales eyebrow, Pipeline title, an Add deal form (Company, Contact, Value in USD, Stage) and a Close date, shows a USD value on every card and a USD total in the header, and takes only `stages`, `deals` (company, contact, value, owner, due), `onMove`, `onAdd` and `onSelect`. Its drag and drop uses mouse drag events (a menu move exists for other input). No resume or PDF viewer.", "components": [ { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "avatar", "title": "Avatar", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/avatar.md", "install": "npx shadcn@latest add @opendraft/avatar" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "drawer", "title": "Drawer", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/drawer.md", "install": "npx shadcn@latest add @opendraft/drawer" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "textarea", "title": "Textarea", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/textarea.md", "install": "npx shadcn@latest add @opendraft/textarea" }, { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" }, { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" } ] }, { "need": "Job application form (candidate-facing)", "fit": "ready", "notes": "Steps in `stepper`, fields in `field`, resume upload in `dropzone` (`accept`, `maxSize`, and you run the upload), optional diversity questions as `radio-group` options that include Prefer not to say, an unticked consent `checkbox`, and a confirmation built from `alert` (success), a `stepper` marked `complete` and a `copy-button` reference. `order-confirmation` is ticket-shaped and does not fit.", "gap": null, "components": [ { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" }, { "slug": "textarea", "title": "Textarea", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/textarea.md", "install": "npx shadcn@latest add @opendraft/textarea" }, { "slug": "select", "title": "Select", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/select.md", "install": "npx shadcn@latest add @opendraft/select" }, { "slug": "dropzone", "title": "Dropzone", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dropzone.md", "install": "npx shadcn@latest add @opendraft/dropzone" }, { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" }, { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" }, { "slug": "button", "title": "Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/button.md", "install": "npx shadcn@latest add @opendraft/button" }, { "slug": "alert", "title": "Alert", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/alert.md", "install": "npx shadcn@latest add @opendraft/alert" }, { "slug": "copy-button", "title": "Copy Button", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/copy-button.md", "install": "npx shadcn@latest add @opendraft/copy-button" } ] }, { "need": "Onboarding and offboarding checklists", "fit": "adapt", "notes": "Tasks per owner (HR, IT, manager, employee) as `checkbox` rows with an owner `badge` and a due `date-picker`, grouped in an `accordion`, overall `progress` with a label, phases in `stepper`, sign-offs with `approval-card`, and completions posted to `timeline`.", "gap": "`todo-list` is a read-only display of an agent's plan (statuses are set by data, rows cannot be ticked) and `task-rows` plays a fixed failed, retry, done animation, so neither works as an interactive checklist; you hold the checked state.", "components": [ { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "checkbox", "title": "Checkbox", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/checkbox.md", "install": "npx shadcn@latest add @opendraft/checkbox" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "accordion", "title": "Accordion", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/accordion.md", "install": "npx shadcn@latest add @opendraft/accordion" }, { "slug": "dropzone", "title": "Dropzone", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dropzone.md", "install": "npx shadcn@latest add @opendraft/dropzone" }, { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "date-picker", "title": "Date Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-picker.md", "install": "npx shadcn@latest add @opendraft/date-picker" } ] }, { "need": "Payroll runs and payslips", "fit": "adapt", "notes": "Run stages in `stepper` (draft, review, approved, paid), differences against the last run as a `table` with old and new values in custom `cell` renderers (struck-through old, new beside it), final approval via `approval-card`, a `dialog` before submitting, and `dropzone` for imports. `diff-table` is a one-shot demo of an email-directory edit (rows of id, dept, email) and does not take payroll data.", "gap": "No payslip document viewer and no PDF viewer; link to a generated file. Calculation, tax and legal rules come from your payroll provider.", "components": [ { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "date-picker", "title": "Date Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-picker.md", "install": "npx shadcn@latest add @opendraft/date-picker" }, { "slug": "dialog", "title": "Dialog", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dialog.md", "install": "npx shadcn@latest add @opendraft/dialog" }, { "slug": "dropzone", "title": "Dropzone", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/dropzone.md", "install": "npx shadcn@latest add @opendraft/dropzone" } ] }, { "need": "Performance reviews and goals", "fit": "adapt", "notes": "Review cycle in `stepper`, rating with `radio-group` or a `slider` with text `marks` for each level, goals with `progress`, sections in `tabs`, manager sign-off via `approval-card`. `detail-page` is an event-ticket page and does not fit.", "gap": "No rich text editor for long-form feedback (`textarea` is plain) and no 9-box or calibration grid.", "components": [ { "slug": "page-header", "title": "Page Header", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/page-header.md", "install": "npx shadcn@latest add @opendraft/page-header" }, { "slug": "stepper", "title": "Stepper", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stepper.md", "install": "npx shadcn@latest add @opendraft/stepper" }, { "slug": "field", "title": "Field", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/field.md", "install": "npx shadcn@latest add @opendraft/field" }, { "slug": "textarea", "title": "Textarea", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/textarea.md", "install": "npx shadcn@latest add @opendraft/textarea" }, { "slug": "radio-group", "title": "Radio Group", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/radio-group.md", "install": "npx shadcn@latest add @opendraft/radio-group" }, { "slug": "slider", "title": "Slider", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/slider.md", "install": "npx shadcn@latest add @opendraft/slider" }, { "slug": "progress", "title": "Progress", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/progress.md", "install": "npx shadcn@latest add @opendraft/progress" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "approval-card", "title": "Approval Card", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/approval-card.md", "install": "npx shadcn@latest add @opendraft/approval-card" } ] }, { "need": "Audit history of changes", "fit": "ready", "notes": "`timeline` for who changed what (`timestamp`, `meta` for the actor, expandable `children` for the old and new value), and a searchable log in `table` (sortable, with `cell` renderers that show old and new values; virtualized for long histories). Filter by `date-range-picker`, `tabs` or an `input` over your own data, because `table` has no built-in filter. `diff-table` and `filter-table` do not fit: one is a fixed demo shape and the other lists task rows.", "gap": null, "components": [ { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "timeline", "title": "Timeline", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/timeline.md", "install": "npx shadcn@latest add @opendraft/timeline" }, { "slug": "date-range-picker", "title": "Date Range Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-range-picker.md", "install": "npx shadcn@latest add @opendraft/date-range-picker" }, { "slug": "tabs", "title": "Tabs", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/tabs.md", "install": "npx shadcn@latest add @opendraft/tabs" }, { "slug": "badge", "title": "Badge", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/badge.md", "install": "npx shadcn@latest add @opendraft/badge" }, { "slug": "input", "title": "Input", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/input.md", "install": "npx shadcn@latest add @opendraft/input" } ] }, { "need": "HR analytics (headcount, attrition, time to hire)", "fit": "adapt", "notes": "Relabel `analytics-dashboard` for headcount and attrition: metrics each carry a series per range, rows are `name` (department), `visitors` (a count such as headcount), `conversion` (a 0 to 1 rate such as retention) and `duration` (seconds, or use `valueColumn`), and the share bar suits composition. Apply minimum group sizes in your data so small teams cannot be identified.", "gap": "No general time-series, funnel or cohort chart; the chart is a single smoothed line without axes, and the range tabs are fixed to the keys 7d, 30d and 90d (relabel with `labels.ranges` and supply your own data under each key).", "components": [ { "slug": "analytics-dashboard", "title": "Analytics Dashboard", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/analytics-dashboard.md", "install": "npx shadcn@latest add @opendraft/analytics-dashboard" }, { "slug": "stat", "title": "Stat", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/stat.md", "install": "npx shadcn@latest add @opendraft/stat" }, { "slug": "table", "title": "Data Table", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/table.md", "install": "npx shadcn@latest add @opendraft/table" }, { "slug": "date-range-picker", "title": "Date Range Picker", "page": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms/date-range-picker.md", "install": "npx shadcn@latest add @opendraft/date-range-picker" } ] } ], "screens": [ { "name": "Employee directory", "compose": [ "page-header", "input", "table", "avatar", "badge", "command-palette", "drawer" ] }, { "name": "Employee profile", "compose": [ "page-header", "tabs", "field", "input", "badge", "dialog", "timeline" ] }, { "name": "Time off and approvals", "compose": [ "page-header", "stat", "progress", "date-range-picker", "table", "approval-card", "timeline" ] }, { "name": "Hiring pipeline", "compose": [ "page-header", "stat", "tabs", "table", "avatar", "select", "drawer", "approval-card" ] }, { "name": "New hire onboarding", "compose": [ "page-header", "progress", "checkbox", "accordion", "stepper", "dropzone" ] } ], "integrations": [ { "for": "Payroll, benefits and tax calculation", "options": [ "Gusto", "ADP", "Deel" ], "note": "Let the provider own the calculation and show its output in `table` and `stat`; never recompute pay in the browser." }, { "for": "Applicant tracking and job boards", "options": [ "Greenhouse", "Lever", "Ashby" ], "note": "Map their stages onto your own stage list (the `tabs` or `stat` filters of the hiring screen) and keep candidate notes in your own drawer rather than copying them." }, { "for": "Single sign-on, provisioning and directory sync", "options": [ "Okta", "Microsoft Entra ID", "SCIM" ], "note": "Use SCIM to create and remove accounts at hire and exit, and drive the onboarding checklist from the same events." }, { "for": "E-signature for contracts and policies", "options": [ "DocuSign", "Dropbox Sign", "Adobe Sign" ], "note": "opendraft has no signature pad or PDF viewer; embed the provider's signing view and record the result in `timeline`." }, { "for": "Calendars, holidays and working-time rules", "options": [ "Nager.Date", "Google Calendar API", "Microsoft Graph" ], "note": "Compute working days and holidays in your own code and show them beside the `date-range-picker`; do not disable holiday dates in the picker, because it rejects ranges that span disabled days. Sync approved leave to the team calendar." }, { "for": "Permissions and field-level access control", "options": [ "CASL", "Oso", "OpenFGA" ], "note": "Evaluate on the server and pass the allowed fields to the UI as props, so hidden data is never sent to the browser." } ] } ], "integrations": [ { "for": "Maps and routes", "options": [ "MapLibre GL JS", "Mapbox GL JS", "Google Maps Platform" ], "note": "MapLibre is open source and needs no vendor key. A themed opendraft map wrapper is on the roadmap." }, { "for": "Charts", "options": [ "Recharts", "uPlot", "Apache ECharts", "visx" ], "note": "Read colors from CSS variables so charts follow the theme and dark mode; always offer a table alternative." }, { "for": "Data tables beyond a few thousand rows or with grouping", "options": [ "TanStack Table", "AG Grid" ], "note": "opendraft's Table is virtualized and covers most needs; reach for these for pivoting, grouping and column pinning." }, { "for": "Forms and validation", "options": [ "React Hook Form", "Zod", "Valibot" ], "note": "Use the Field component for labels and errors, and let the schema produce the messages." }, { "for": "Rich text", "options": [ "Tiptap", "Lexical", "Plate" ], "note": "Style the editor surface with tokens and keep toolbars to the Button and Toggle patterns." }, { "for": "Flow and graph diagrams", "options": [ "React Flow", "Cytoscape.js" ], "note": "flowchart covers read-only flows; use these when users edit, pan and zoom." }, { "for": "Calendars and scheduling", "options": [ "FullCalendar", "react-big-calendar", "Schedule-X" ], "note": "Until opendraft has a scheduler, embed one and theme it with the CSS variables." }, { "for": "Payments", "options": [ "Stripe Elements", "Adyen Drop-in", "PayPal" ], "note": "Mount the provider's hosted card fields in the checkout block's card slot so card data never touches your code." }, { "for": "Authentication", "options": [ "Clerk", "Auth.js", "Supabase Auth", "WorkOS" ], "note": "Put the provider behind the auth-screen block; use otp-input for one-time codes." }, { "for": "Real-time updates", "options": [ "Server-sent events", "WebSockets", "Ably", "Pusher" ], "note": "Update rows in place and announce changes with an aria-live region." }, { "for": "Barcode and QR scanning", "options": [ "zxing-js", "Dynamsoft", "Scandit" ], "note": "qr-code only generates codes; scanning is a device capability." }, { "for": "Document viewing", "options": [ "PDF.js", "react-pdf" ], "note": "Show documents inside a dialog or drawer so the surrounding screen keeps the theme." } ], "crossDomainGaps": [ { "id": "map", "title": "Map and route view", "why": "Fleet, flights, outages, assets, stores and attack paths all need a location view. Recommended base: MapLibre GL." }, { "id": "scheduler", "title": "Scheduler, calendar and Gantt", "why": "Crew rosters, dispatch, appointments, timetables, shifts, maintenance windows and on-call." }, { "id": "time-series-chart", "title": "General time-series chart", "why": "Several series, zoom, thresholds and gaps: metrics, energy, markets, vitals, SPC." }, { "id": "bulk-action-bar", "title": "Bulk-action bar for selected table rows", "why": "Operators in logistics, security, HR and support act on many rows at once. Table gives selected IDs but there is no bar." }, { "id": "responsive-table", "title": "Table that becomes a card list on phones", "why": "Table scrolls sideways at 390px and hides columns; field, driver and patient screens need a mobile list." }, { "id": "signature-pad", "title": "Signature pad and photo capture", "why": "Proof of delivery, consent, field service and inspections." }, { "id": "rich-text", "title": "Rich text editor", "why": "Notes, case files, content and messages. Recommended base: Tiptap." }, { "id": "time-zone-aware-date-picker", "title": "Date and time picker with time zones", "why": "Aviation, logistics and scheduling must show and pick times in a named zone." }, { "id": "eta-confidence", "title": "ETA with confidence and staleness", "why": "Logistics, aviation and field service need to show how sure an estimate is." }, { "id": "detail-record-page", "title": "Generic record detail page", "why": "detail-page is shaped for buying a ticket; shipments, patients, cases, assets and employees need a record view with header facts, tabs and related items." }, { "id": "generic-board", "title": "Generic stage board", "why": "crm-pipeline's data is sales-shaped; dispatch, hiring, cases and production boards need a neutral one." }, { "id": "media-viewers", "title": "Video, PDF and document viewers", "why": "Education, healthcare, legal and HR content." }, { "id": "gauge", "title": "Gauge and risk-score ring", "why": "Security posture, vitals, utilization and energy." }, { "id": "interactive-checklist", "title": "Interactive checklist", "why": "todo-list only displays an agent's plan. Runbooks, maintenance, onboarding and care plans need tickable items with sign-off." }, { "id": "generic-data-table", "title": "Generic data table with filter bar and row actions", "why": "filter-table, records-table and diff-table are demo-shaped. Almost every domain needs a neutral table with filter chips and a bulk-action bar." }, { "id": "retail-commerce", "title": "Retail product grid, gallery, ratings and shipping checkout", "why": "catalog, detail-page and checkout are event-shaped, so ecommerce has no product card, image gallery, rating stars or shipping-address checkout." }, { "id": "mfa-step", "title": "Multi-factor step for auth-screen", "why": "Security, healthcare, fintech and government sign-in need a code step and a resend timer." }, { "id": "masked-secret-input", "title": "Masked secret input with reveal", "why": "API keys, tokens and sensitive personal fields." }, { "id": "permission-matrix", "title": "Permission matrix (roles by permissions)", "why": "Security, IT, HR and any admin product." }, { "id": "seat-map", "title": "Seat map", "why": "Aviation, venues and transport booking." }, { "id": "locked-step-nav", "title": "Lesson and step navigation with locked states", "why": "stepper is linear only. Courses, onboarding and multi-part forms need locked and jump-to steps." } ] }