Get started
Use cases
Playbooks that tell you, and your AI assistant, which components suit twelve kinds of product, from security and logistics to healthcare, fintech and government.
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).
Assistants read the same playbooks: the Use cases list in llms.txt points to one page per domain, and use-cases.json has everything as data. Each playbook has a starter kit that installs the theme and the components it recommends in one command.
Pick a domain
Security and compliance
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). Use `secret-input` for entering or showing a secret (masked, with reveal, copy and optional auto-hide) 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.
What it needs, and what to use
Data TableData TableFilter BarBulk Action BarBadge
Start with the `data-table` block: `columns`, `rows`, `getRowId`, `searchable`, `filters` (a `filter-bar` config with chips and clear-all), `views` (tabs such as Open, Acknowledged, Closed), `selectable` with `bulkActions` (Acknowledge, Close, Assign receive the selected rows) and a card layout when narrow. Render severity and status as `badge` (with `dot`) in a column `cell`. For a very large live stream use the virtualized `table` (pass `rowHeight` and `height` or `maxHeight`) with `filter-bar` above and `bulk-action-bar` shown when ids are selected.
Missing: `data-table` pages its rows rather than virtualizing them, so it suits thousands of rows, not an unbounded stream. 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: store the `filter-bar` value yourself.
TimelineCode BlockTabsFile DiffStepperCopy Button
`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.
Approval CardTool ApprovalDialogAlertToast
`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.
Missing: No built-in typed-confirmation or two-person approval component: assemble it from `dialog` + `input` + `button`. Who approved and when comes from your backend.
Settings PagePermission MatrixData TableSelectSwitchRepeater Field
`settings-page` with `sections={["team"]}` gives a member list, invite (`onInvite`) and role change. Use `permission-matrix` for the custom-roles screen: `roles` by `groups` of permissions, select-all per role, row and group, read-only built-in roles and a change summary to review before saving (`onValueChange`). Long user lists belong in `data-table`. `repeater-field` edits rule lists such as allowed IP ranges.
Missing: `settings-page` roles are fixed to owner, admin, member and viewer; use `permission-matrix` for anything custom. The matrix edits grants only: who may change roles, and enforcement, come from your backend.
Data TableFilter BarDate Range PickerDate Time PickerDescription ListTimelineFile DiffCommand Palette
`data-table` with `searchable`, `filters` (actor, action, outcome as select or multi-select), sortable mono columns for IDs and times, and `onRowOpen` to show one entry in a `description-list` (actor, target, IP, request ID with `copyable`). Show a change with `file-diff` and one entity's history with `timeline`. Use `date-range-picker` for the day range and `date-time-picker` (with a named `timeZone`, UTC by default here) for exact from and to bounds.
Missing: No dedicated audit-log viewer with live tail, saved queries or export; assemble it from `data-table` and `filter-bar`, and page from your backend. `date-range-picker` itself has no time of day, which is why the exact bounds use `date-time-picker`.
StatGaugeProgressTime Series ChartAnalytics DashboardBadge
`stat` and `StatGroup` for headline numbers, with `delta` and `goodWhen="down"` for counts where fewer is better. `gauge` shows a posture or risk score with `thresholds` bands and a text status (never color alone). `progress` for control coverage: set `invert` with `tone="auto"` where a low value is bad. `time-series-chart` plots findings over time with `thresholds`, brush zoom and a data-table fallback. `analytics-dashboard` can still frame a findings overview through `labels`, `metrics`, `rows` and `channels`; pass `fill={false}` inside a scrolling page.
Missing: `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`). Prefer `time-series-chart` when you need your own series. Do not present a score as proof of compliance with a standard.
`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 `mfa-step` for the second factor: `methods` (authenticator app, SMS, security key), `onVerify` (async, returns the result), `onResend` with a countdown, and verifying, error and `locked` states. Use an `alert` for session-expired or lockout notices.
Missing: `mfa-step` collects and submits a code but the verification, rate limits and lockout come from your auth provider or backend. There is no passkey enrolment screen or SSO-by-domain flow.
Data TableSecret InputDialogCopy ButtonFieldAlertBadge
List keys in `data-table` with created, last used and a `badge` for status (never show the full secret in a row). Reveal a new key once in a `dialog` with `secret-input` (masked, reveal, `copyable`, `autoHideMs`), a `copy-button` and an `alert` that it will not be shown again. Revoke with a type-to-confirm `dialog`.
`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`.
Agent WorkspaceCitationsApproval CardTool Approval
`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`.
`map-view` is a token-styled MapLibre GL map: pass `markers` (each with a text `label` and a `status`), `routes` and `areas`, and use `selectedId` with `onSelect` to sync it with a `data-table` of assets. It includes a keyboard-reachable list of the same locations, so the map is never the only view.
Missing: `map-view` is geographic only. There is no network or attack-path graph (`flowchart` is a workflow canvas). Use a graph library (see integrations) for nodes and edges and keep the entity list in `data-table` beside it.
Libraries and services that pair well
- Network or attack-path graph: React Flow, Cytoscape.js. Draw nodes and edges with our tokens for color and type; keep the severity text labels.
- Geographic threat or asset map: MapLibre GL JS, deck.gl. map-view is already built on MapLibre GL JS; reach for deck.gl only for very dense layers. Always give each marker a text label for assistive technology.
- Event volume and trend charts: Recharts, uPlot. Use time-series-chart for multi-series trends with thresholds and zoom. uPlot copes with very large series; the chart inside analytics-dashboard is fixed to its own metrics.
- Single sign-on and MFA: Clerk, Auth0, WorkOS. Put the provider's flow behind the auth-screen block (onSubmit and onProvider) and use mfa-step for the second factor, wiring onVerify to the provider.
Typical screens
- Security operations overview: Page Header + Alert + Stat + Gauge + Time Series Chart + Data Table
- Alert queue: Page Header + Data Table + Badge + Command Palette
- Incident detail: Page Header + Badge + Tabs + Timeline + Stepper + Code Block + Approval Card + Copy Button
- Access management: Page Header + Settings Page + Permission Matrix + Data Table + Dialog
- Audit log: Page Header + Data Table + Filter Bar + Date Time Picker + Description List + File Diff
Libraries we recommend alongside opendraft
Some needs are better met by an established library than by a component of ours. Wrap them so they read colors and type from the theme tokens, and keep opendraft components for the surrounding interface.
- Maps and routesMapLibre GL JS · Mapbox GL JS · Google Maps PlatformMapLibre is open source and needs no vendor key. A themed opendraft map wrapper is on the roadmap.
- ChartsRecharts · uPlot · Apache ECharts · visxRead colors from CSS variables so charts follow the theme and dark mode; always offer a table alternative.
- Data tables beyond a few thousand rows or with groupingTanStack Table · AG Gridopendraft's Table is virtualized and covers most needs; reach for these for pivoting, grouping and column pinning.
- Forms and validationReact Hook Form · Zod · ValibotUse the Field component for labels and errors, and let the schema produce the messages.
- Rich textTiptap · Lexical · PlateStyle the editor surface with tokens and keep toolbars to the Button and Toggle patterns.
- Flow and graph diagramsReact Flow · Cytoscape.jsflowchart covers read-only flows; use these when users edit, pan and zoom.
- Calendars and schedulingFullCalendar · react-big-calendar · Schedule-XUntil opendraft has a scheduler, embed one and theme it with the CSS variables.
- PaymentsStripe Elements · Adyen Drop-in · PayPalMount the provider's hosted card fields in the checkout block's card slot so card data never touches your code.
- AuthenticationClerk · Auth.js · Supabase Auth · WorkOSPut the provider behind the auth-screen block; use otp-input for one-time codes.
- Real-time updatesServer-sent events · WebSockets · Ably · PusherUpdate rows in place and announce changes with an aria-live region.
- Barcode and QR scanningzxing-js · Dynamsoft · Scanditqr-code only generates codes; scanning is a device capability.
- Document viewingPDF.js · react-pdfShow documents inside a dialog or drawer so the surrounding screen keeps the theme.
Missing across every domain
These gaps came up in more than one playbook. They are the next components to build, in rough order of how often they are needed.
- Audit-log viewerSecurity, IT, fintech, HR and government all need who-did-what-when with old and new values, filters, export and tamper-evident cues. Today it is assembled from data-table, filter-bar, description-list and timeline.
- Notifications centerA bell with an unread count, a grouped list, mark-as-read and per-type preferences. Alerts, toasts and banners exist, but no persistent inbox of notifications for operators, patients, learners or buyers.
- File manager and document libraryFolders, breadcrumbs, previews, rename, move and share for case files, patient documents, course material and shared drives. dropzone, document-viewer and data-table cover the pieces; there is no tree or folder navigation.
- Tree view and org chartHR reporting lines, asset hierarchies, forward and backward lot genealogy and permission trees. No expandable tree or hierarchy diagram ships. Recommended base: d3-hierarchy for layout.
- Node and network graphAttack paths, service dependencies, pipelines and supply chains with pan, zoom and many nodes. flowchart is a small workflow canvas, not a general graph. Recommended base: React Flow.
- Inbox and thread listSecure messaging, support, case comments and email-style triage need a list of threads with unread state, previews, filters and a reading pane. chat-app covers one conversation, not a mailbox.