Components

Primitives

Buttons, inputs, badges, switches and other small building blocks.

• ButtonDensity-aware button with loading state and asChild.
• InputInput, Textarea and Label with shared field styling.
• BadgeCompact status badges with optional dot.
• AvatarAvatar and AvatarGroup with presence dot and deterministic colour.
• KbdKeyboard shortcut hint.
• TabsUnderline tabs with counts, for views like All, Open and Closed.
• PanelFlat hairline surface with an optional header row.
• Status iconLinear-style status and priority glyphs.
• SwitchAccessible toggle switch.
• Segmented controlRadio group styled as a compact segmented control.
• SelectStyled native select with grouping, sized by the density token.
• SkeletonLoading placeholder.
• CardComposable card primitives for grouped content.
• ProgressSlim determinate bar with success, warning and destructive tones.
• Description listLabel and value pairs in a responsive grid for record detail views.
• SpinnerLoading indicator.
• SeparatorHairline divider, vertical or labelled.
• RatingRead-only or editable star rating.

Forms

Every form control: checkbox, radio, field, combobox, tags, uploads, calendar.

• Form flowTypeform-style one-question-at-a-time forms with keyboard answers, conditional jumps, plus a visual builder with live preview.
• CheckboxNative checkbox with indeterminate state, label and description.
• Radio groupNative radios as a list or selectable cards.
• FieldLabel, control, hint and error wired with ids; FieldGroup and FieldSet for layout.
• Input groupInput with prefix and suffix, plus SearchInput and PasswordInput.
• ComboboxSearchable single select for long lists such as customers and items.
• Tag inputEnter or comma to add chips; backspace removes.
• SliderNative range input with a filled track.
• File dropzoneClick or drag to choose files.
• CalendarMonth grid with selectable days and markers for leave, attendance and due dates.

Overlays

Dialogs, drawers, popovers, menus and tooltips.

• DialogCentered modal with title, description and footer.
• Confirm dialogConfirmation for destructive actions, with optional type-to-confirm.
• SheetSide drawer for details and forms.
• PopoverFloating panel rendered in a portal.
• Dropdown menuAction menu with keyboard navigation, icons, shortcuts and destructive items.
• TooltipCSS-only hint on hover and focus.

Navigation

Breadcrumbs, pagination, accordions and tabs.

• BreadcrumbTrail ending in the current page, router-agnostic.
• PaginationRange summary, page size and previous/next for tables.
• AccordionNative details-based disclosure, optionally exclusive.

Feedback

Banners, toasts, empty and error states.

• BannerInline notice with tone, icon and action slot.
• Empty stateQuiet empty and zero-result placeholder with action.
• Feedback boardCanny-style voting, status, sorting (top, new, trending), public roadmap and changelog.
• ToastImperative toast() with success, danger and action variants.
• Error stateFailed, forbidden and not-found views.
• Attachment listFiles attached to a record, with remove.

Layout

App shell, page header, settings layout, topbar and notifications.

• Page headerPageContainer and PageHeader with breadcrumb, title, meta and actions.
• Settings layoutSettingsNav, SettingsSection, SettingsRow and DangerZone for settings pages.
• App shellSidebar, topbar and scrolling content with a mobile drawer.
• TopbarTopbar, UserMenu, WorkspaceSwitcher and BellButton.
• Notification centerInbox list with unread state and mark all read.

App shell

• Command paletteCmd+K palette with groups, keywords and shortcuts.
• App sidebarGrouped navigation sidebar with badges and footer slot.
• Appearance settingsDesktop-style settings panel wired to the appearance provider.

Auth

Sign in, sign up and verification screens.

• Auth shellCentered layout, card and provider button for sign in, sign up and reset pages.
• OTP inputOne-time code entry with paste and backspace navigation.

Data

Tables, toolbars, charts, boards and record drawers.

• MetricKey numbers with deltas and sparklines, grouped in a single band.
• ChartsDependency-free Sparkline, AreaChart with hover crosshair, and BarChart.
• Data tableSortable, selectable table with sticky header, loading and empty states.
• Filter barLinear-style filter chips with multi-value popovers.
• Saved viewsTabs that capture and restore filters and sort, with dirty state.
• TimelineVertical activity timeline with tones and icons.
• Table toolbarTableToolbar, BulkActionBar and ColumnToggle around a DataTable.
• Detail sheetRecord drawer with key fields and extra sections.
• Kanban boardGeneric columns of cards with render prop.
• Donut chartPart-to-whole ring with legend.
• Funnel chartConversion funnel with drop-off per step.
• HeatmapIntensity grid for attendance, activity or usage.

Logs

• Log viewerDozzle-style live log stream: search highlighting, level filters, follow-tail, wrap, pause and a batched buffer hook.
• Container listContainers or services with state badges and CPU sparklines.

Monitoring

• Uptime barBetter Stack-style daily uptime strip with tooltips.
• Monitor listMonitors with status, response sparkline and 90-day uptime.

Issues

• Issue listLinear-style grouped issue rows with status, priority, labels and assignee.

Conversation

• Message threadIntercom-style conversation thread with notes, events and a typing indicator.
• ComposerReply box with Reply/Note modes, toolbar and send shortcut.
• Conversation listInbox rows with unread state, snippet and assignee.

Agents

• Agent stepsCodex and Claude style tool calls, reasoning, plan list and terminal output.
• Diff viewUnified diff with line numbers, file headers and add/remove stats.

ERP

Inventory, procurement and manufacturing: stock, line items, document chains and production lines.

• Line itemsOrder, quote or purchase lines with subtotal, tax and total.
• ERP cellsMoney, signed quantity, stacked cells, document numbers, status text and stock bars for dense grids.
• Stock levelStock health bar with reorder marker and on-order quantity.
• Production lineFactory line card with status, utilization, OEE and supervisor.
• Approval chainMulti-level approval route with approvers, state and comments.
• Three-way matchPO vs receipt vs invoice per line, flagging quantity and price mismatches.
• Aging barReceivables or payables aging as a stacked bar with bucket legend.
• Work order cardManufacturing order with quantity progress, routing stages and due date.
• Stock movementsLedger of receipts, issues, transfers and adjustments with signed quantities.
• Record headerDocument detail header: number, title, status, key facts and actions.
• Budget barBudget vs actual per category with an over-budget state.
• Document flowRequest to order to receipt to bill chain with step state.
• InvoicePrintable invoice, quote or order document.
• Warehouse cardStorage site with capacity and zone utilization.
• BOM treeBill of materials with nested components.
• Line items editorEditable order lines with item select, quantity, price and total.

CRM

Sales and customer relationships: pipelines and contact summaries.

• Deal pipelineSales stages as columns with stage totals and deal cards.
• Contact cardCustomer or lead summary with stage, contact links and tags.

HRMS

People operations: approvals, org structure and payroll.

• Approval cardPending request with approve and reject-with-reason flow.
• Org treeReporting lines as a nested, selectable list.
• PayslipEarnings, deductions and net pay for one pay period.
• Leave balanceRemaining days per leave type.
• Employee headerProfile header with status, details and actions.
• Onboarding checklistSetup guide with progress for workspaces and new hires.

Platform

Access control and administration.

• Permission matrixRoles by permissions grid with grouped rows and controlled toggles.
• Audit logWho did what and when, with before/after changes.

Settings

Billing, members, API keys and sessions.

• Plan cardsPlan comparison for billing and upgrades.
• Invoice listBilling history with download.
• Member listTeam members with inline role change and invited state.
• API key listAPI keys and service accounts with scopes and revoke.
• Session listSigned-in devices with sign out.

Pulse

Feedback product, portal and admin: posts, roadmap, inbox, boards, integrations, domains and the widget.

• Usage meterPlan header with per-resource usage against limits.
• Webhook listEndpoint rows with events and delivery health.
• Portal shellPublic customer portal: header tabs, hero, main column and right rail (PortalShell, PortalHero, PortalAside).
• Post detailFeedback post with votes, editable status, owner and who requested it with MRR.
• Customer panelIdentity, plan, revenue and activity beside an inbox thread or post.
• Inbox layoutThree-pane support inbox: conversations, thread and customer context.
• Space cardFeedback board tile with visibility, volume and members.
• Roadmap boardConsidering, planned, in progress and shipped columns ranked by votes.
• Integration cardSlack, GitHub, Linear style tile with connected, error and plan-locked states.
• Domain setupCustom domain DNS records with verification state and check action.
• Widget previewMock of the embeddable widget with launcher, panel and brand color.
• Knowledge sourcesSources the AI assistant answers from, with sync state and resync.

Marketing

Landing page blocks: header, hero, feature sections, product tour, pricing, FAQ, CTA and footer.

• Marketing headerSite header with brand, links, log in and primary call to action.
• Hero sectionEditorial hero: accent headline, copy, actions and a tinted product visual.
• Browser frameBrowser window chrome for product screenshots and live previews.
• Feature stripNumbered overview columns with icon, copy and learn-more link.
• Product tourClick-through tabs above a framed screen on a tinted panel.
• Logo stripRow of customer or integration names.
• Feature gridThree-up feature cards with icon chip, copy and tinted illustration.
• Split sectionCopy beside a tinted visual; alternate sides down a page.
• Pricing tiersPricing columns with monthly/yearly switch and a highlighted tier.
• Comparison tableFeature matrix across plans with check, dash and text values.
• FAQ sectionHeading with native details accordion.
• TestimonialLarge pull quote with attribution and a proof metric.
• Stat bandLarge numbers in a ruled row.
• CTA sectionClosing call to action on a tinted panel.
• Marketing footerBrand, link groups, legal row and oversized wordmark.