Ready-to-use
components & modules.
Explore what’s possible.

Explore time series with fixed query ranges, automatic ticks, incomplete buckets, drag zoom, annotations, thresholds, and comparison overlays.

Visualize row-by-column intensity while retaining table headings and values for screen readers.

Show stage entries, overall conversion, and drop-off between stages in a funnel.

Visualize proportions with a pie or donut chart using innerRadius. Consider a single metric for a two-part split.

Display trends and time series with filled areas and optional gradients.

Compare values across categories with a bar chart.

Visualize trends and changes over time with a line chart for continuous data.

Set date-math ranges with quick selection, presets, recent values, explicit updates, auto-refresh, and time-window navigation.

Standardize a row of StatCard metrics with skeleton cards during loading.

Filter a view with search, single-selection, and multiple-selection controls.

Arrange a page title, status, tabs, actions, and query controls to fit the available width.

Build a dropdown selection with Root, Label, Trigger, Popover, and Item components.

Inspect nested trace spans on one timeline with collapsible branches, explicit failure markers, and compressed idle gaps that preserve reported durations.

Arrange a replay stage, metadata, controls, and resizable inspector with player-wide fullscreen and shortcuts that avoid text inputs.

Control session playback, jumps, speed, idle skipping, fullscreen, and timecode display while the host owns playback state.

Seek through session activity, idle and unloaded ranges, density, and event markers; commit seeking after drag or keyboard navigation ends.

Edit two-level condition trees with AND/OR groups, ordering, duplication, negation, and errors; callers render conditions as Expression chips.

Compare two or three sets with area-scaled SVG circles, interactive exclusive regions, and an accessible table; three-set placement is approximate.

Build condition groups from properties, operators, and values using AND and OR logic.

Configure user-path analysis and explore grid or Sankey flows, top paths, drop-off, patterns, entry and exit points, and dwell time.

Arrange schema, editor, and output in resizable panes with a collapsible sidebar, persisted layout, and toolbar, editor, and output slots.

Save a query with a name, description, and visibility, choosing a statement when the editor contains several.

Review query success, failure, time, row count, and duration, then restore SQL to the editor or rerun it.

Name per-run values for SQL variable placeholders; the caller performs substitution.

Pass date and property filters to SQL through a filters placeholder, with a warning and insertion action when it is missing.

Turn query rows into charts with suggested axes and numeric series, a single-value display, and caller-owned settings for saved queries.

Display query states and completed results as tables, charts, or split views with row count, duration, bytes read, and truncation status.

Run or cancel queries with explicit changed, current, and running states and split-button actions for selected or full SQL.

Search tables and typed columns, insert names at the cursor, and preview tables in a schema tree.

Edit SQL with CodeMirror syntax highlighting and autocomplete.

Explore windowed query results with typed headers, local sorting, resizable columns, row details, and explicit null, boolean, and object values.

Explore staged user paths with transition ribbons, session starts and exits, grid or proportional Sankey layouts, and linked hover highlighting.

Run anomaly detection and review insights with time filters, errors, dismissed items, and configurable detection methods.

Arrange custom dashboard widgets with WidgetGrid, ReportBuilder, ReportWidget, and FilterBar.

Browse events with one Query controlling all filters and an inspector that keeps the list visible.

Explore Trend, Distribution, Composition, and Data tabs with multiple charts and a DataTable.

Analyze acquisition across Overview, Channels, and Campaigns tabs with metrics, trends, and tables.

Monitor live activity with connection status, metric cards, and an activity feed.

Manage project settings, retention policies, cleanup previews, and storage usage with forms, tables, and code snippets.

Explore cohort retention in a Surface built around RetentionHeatmap.

Compose a SQL editing screen from SqlEditor and QueryResultsTable.

Browse discovered properties by scope and type, with inferred types explicitly labeled.

Compose catalog headers, statistics, notices, filters, inspectors, pagination, bulk actions, and empty or error states; clear selection when filters or pages change.

Share one Query between QueryBar and filter buttons, deriving active button states from the query.

Arrange a list and inspector in two panes with push or overlay behavior and focus restoration when closed.

Inspect a record beside its list in a nonmodal panel with Escape dismissal and focus restoration.

Edit event metadata and caller-owned sections in one form with a shared footer save action.

Search grouped properties with visibility state and explicit editing actions owned by the caller.

Display an event icon from a semantic key or React node with a background color.

Manage global notifications with priority-aware live regions and auto-dismiss paused during pointer or keyboard interaction.

Display generic tabular data with dynamic columns, safe sorting, keyboard resizing, an accessible grid label, and an optional title.

Show an event label, value, change, and miniature trend chart together.

Show compact inline trends in stat cards, table cells, and other small spaces.

Display chart legends as lists, with real buttons for interactive series toggles.

Show all options in a single-selection control with radio-group semantics and arrow-key navigation.

Copy a value to the clipboard and report success or clipboard permission failures.

Communicate status with a dot and a required text label instead of color alone.

Keep a persistent notice in the page layout while its condition applies, without a dismiss action.

Choose one option with separate group and item descriptions and multiple sizes.

Use labeled checkboxes with descriptions, groups, and an indeterminate state synchronized to the DOM property.

Organize tab panels with Root, TabList, Tab, and TabPanel components.

Display field types with consistent glyphs and optional labels for strings, numbers, dates, IP addresses, and geographic data.

Explain a composite score through each dimension's value, weight, and meaning alongside the total.

Read ordered events with elapsed-time labels, expandable property payloads, and session grouping.

Compare cohort retention using color intensity in a heatmap.

Represent a person or anonymous device in a list cell with name, email, and ID fallbacks.

Present labeled facts in a semantic description list with identifier copying for detail panels.

Explain an empty view with an icon, title, description, and action button.

Show a metric with its value, change, and supporting description. Omit the change row when no comparison is available.

Operational grid chrome with column visibility, density, full screen, and a locked identity column wired to the live DataGrid.

A campaign workspace with editable grids, saved views, filtering, sorting, grouping, a status board, record details, bulk actions, undo/redo, and local persistence.

Compare breakdowns in small time-series panels with a shared y-axis, synchronized crosshairs, top-value ordering, and a collapsed long tail.

Preserve chart height and axis space while a query loads to avoid layout shifts when data arrives.

Choose visual options from tiles backed by native radio buttons and checkboxes for keyboard and screen reader access.

Edit titles and metric names in place. Enter confirms, Escape reverts, and rejected saves preserve the input.

Preview and select visualization palettes using categorical swatches or sequential and diverging gradients.

Announce live updates to screen readers with throttled summaries and alternating nodes that can repeat identical messages.

Mark matching search terms with semantic mark elements, matching longer terms first to avoid fragmented overlaps.

Measure text in its actual font and available width to truncate the start, middle, or both ends while preserving the full accessible text.

Read and edit conditions as sentences for alert rules and segment filters that need to be easy to verify.

Filter by field values while reading their counts and distribution bars. Show top values first and collapse the long tail.

Edit a document, undo and redo changes, save in-memory snapshots, preview saved content, and restore any version as one undoable change.

Render persisted content without mounting the editing engine.

Switch theme presets and light, dark, or system appearance.

Add a sticky, fixed-width page aside with header, body, and footer slots.

Build command search with automatic filtering and keyboard navigation, inline or inside CommandDialog.

Show floating content anchored to a trigger using the Popover primitive.

Compose menu bars and individual menus with checkbox items, radio items, separators, and popovers.

Compose accessible modal dialogs with triggers, headings, descriptions, dismissal controls, and header, body, and footer regions.

Review changes with keyboard-accessible decisions: accept updates the document, reject keeps the original, and reset starts over.

Compose a custom authoring surface with BlockTree, BlockToolbar, document versions, and working undo/redo controls.

Edit headings, paragraphs, and a callout with Editor, defaultCatalog, and an in-memory document store.

A calm writing workspace with block editing, nested pages, page mentions, search, favorites, templates, local autosave, comments, Trash, and Markdown export.

Present an item or product with tags, author information, content, and reviews.

Browse a marketplace card grid with search, tab filters, and sorting.

Build settings forms from data with validation, radio buttons, and checkboxes.

Select a star rating from one to N or display a read-only rating.

Arrange settings navigation beside a caller-provided content slot.

Review change history with action colors and expandable diffs.

Read audit events in a timeline with avatars, action text, and metadata badges.

Choose time ranges using a Popover, DateRangePicker, and preset buttons.

Build reports in four labeled steps: chart type, data, styling, and preview.

Select files with metadata, image previews, size limits, and description input.

Enter numbers with step buttons, nullable values, unit suffixes, invalid draft alerts, bounds, and arrow keys.

Add tags with Enter and remove them with Backspace.

Select date ranges with presets, a calendar, managed focus, and direction-aware navigation icons.

Group content in a card with Header, Title, Description, Content, and Footer components.

Enter multiline text with the same label, error, and hint API as Input.

Toggle a setting with three sizes and explicit accessible associations for labels and descriptions.

Use a standalone text input with labels, errors, hints, and icons.

Display inline status badges with five color variants and an optional status dot.

Build accessible forms with opt-ui-primitives Form APIs, field validation, specialized inputs, and shared form store hooks.

Group actions in a toolbar with buttons, separators, and tooltips.

The shipped ReoptRecordTable Surface with local EAV-shaped responses, inferred columns, attribute labels, server pagination, row selection, and empty/error recovery. Production SDK calls use authorized server-side machine credentials.

The shipped ReoptAiImageStudio Surface with a local fetcher: create SVG fixtures, inspect history, simulate credit errors, and retry without making AI requests.

A local chat simulation built with opt-chat components: seeded streaming replies, stop controls, model selection, and suggestions. No model requests or credits are used; a separate snippet shows copied Surface integration.

A local re-auth dialog simulation with manual expiry, optional dismissal, and a simulated sign-in action. Automatic session/401 detection belongs to the copied Surface.

A local simulation of a protected-content gate with loading, signed-out, and signed-in states. Its sign-in CTA changes only the preview state.

A local user-menu simulation with loading, signed-out, sign-in, and sign-out transitions. The copied ReoptUserMenu Surface derives these states from the real session.

A local simulation of the OAuth button’s pending, success, and error states using Button and Toast. It does not sign in; the copied Surface wires the actual auth flow.

SDK control center showing server-side verifier checks, auth health, secret rotation, EAV schema remediation, AI credit guardrails, webhook replay, terms publication, and lazy server-client boundaries.

Production-readiness fixture for packaging, browser, and streaming release gates.

Inspect a prepared agent report with its plan, patch preview, task queue, and verification output.

Try approve, deny, and reset decisions with Confirmation components and simulated tool output.

Automatic part mapping for reasoning, tool execution, and sources.

Send messages through a local chat loop with prepared replies and turn-anchored scrolling; no AI request is made.

Full agent console with streaming chat, model routing, persistent agent memory, guarded EAV patch application, rollback audit packets, replay export, runnable evals, release gates, source panels, and BrandApp provider wiring.

Deterministic eve session replay rendered from native EveMessage parts: reasoning, an expandable subagent, a skill, a question with options and free text, publish approval or rejection, a device-code sign-in, and stream errors with remedies.

Deterministic AI SDK replay with plans, approvals, preliminary output, terminal snapshots, questionnaires, feedback, and transcript checkpoints.

Simulate an outage, inspect list and upload failures, then recover the same connector and retry with a sample file and operation log.

A custom layout built from the headless hook and recomposable subcomponents.

Concurrency-limited uploads, folder drops, clipboard paste, and quota warnings in one demo.

A legacy v1 brandapp client proves how derived capability flags reshape the UI without configuration.

The batteries-included FileManager running on the latency-simulating mock connector.

Windowed remote event loading with snapshot versions, stale response protection, telemetry, and a read-only week grid with arrow-key day-column navigation.

Streams JSON Patch into a shadow calendar, shows pending changes in the live grid, then applies or discards the draft as one undoable commit.

Consumer booking UI with a date grid, time slots, seats, closed-day overrides, and the booking lifecycle backed by availability rules.

Month view, recurring weekdays, all-day spans, timed events, arrow-key grid navigation, activation callbacks, and editable event creation in one production calendar fixture.

Headless remote datasource with placeholder rows, window loading, and batched saves.

Performance preset for large datasets with stable identity and cached values.

Read-only monitoring grid with status badges and metric-heavy columns.

A table a real model writes while you watch: YAML becomes patches, changes wait for review, edits are never overwritten, and formulas, sorting and per-row AI columns take one line.

A monthly ledger workspace. Compound entries expand under their row into one keyboard grid with the parent, amount cells take separators and calculations, closed splits keep their drafts, and saving jumps to whatever blocks it. Deposits and credits show in red, payments and debits in blue, and negative amounts in red parentheses.

Double-entry journal grid wiring one editor per column — date, select, number, checkbox, textarea, and a custom split editor — with keyboard flow, fill handle, undo/redo, and commit-time validation.

Starter spreadsheet grid with editable columns and commit feedback.

Row evaluation with bounded concurrency, cancellation, stale results after editing, and review filtering with mock and authenticated live Jev modes, saved results, and detailed distributions.

Evaluate selected rows, switch local rule providers and criteria, and recover from simulated rate limits, timeouts, save failures and cancellation without AI calls.

Keyword search over 50+ indexed harness patterns for agent integration.

Add uncovered routes to a sample rollout plan and watch coverage, recipe totals, and uncovered paths update together.

Score harness compliance across layout, recipe, adapter, state, design, scaffold, and a11y categories.

Dedicated review surface that keeps approval work outside recipe screens.

Own the authoring shell while opt-editor remains the document engine.

Bridge opt-datagrid into harness chrome without replacing the engine.

Context-preserving side panel for detail and inspector flows.

Sticky bottom action bar for bulk actions and commit flows.

Collapsible product navigation with groups, badges, and nested accordions.

Interactive policy controls for density, width, motion, and navigation.

Shared empty/loading/error wrapper for page-level harness state UX.

Public-facing landing recipe that keeps hero, sections, and footer aligned.

List recipe with header, toolbar, and section-based content body.

Starter dashboard recipe with workspace chrome and section framing.

Compose an AI assistant screen with ChatSidebar, ChatMessageList, and ChatInput.

Browse workflow runs with search and status filters, a DataTable, and tabbed detail dialogs.

Manage deployments with branch and status selectors, quick actions, timelines, domains, and environment variables.

Manage tasks with activity, team members, quick actions, and filters.

Build a project overview with DashboardGrid, DeploymentTimeline, and EnvPanel.

Explore filtered data with SearchCombobox, StatusSelect, and DataTable inside a group-spaced BlockLayout.

Summarize a project with metrics, navigation cards, charts, tables, code snippets, and dashboard management.

Build user profiles with avatars, metrics, gauges, progress indicators, tables, and filters.

Analyze test quality with summary cards and six tabs covering overview, stability, failures, flaky tests, performance, and advanced metrics.

Review screenshot regressions and approvals with a three-column snapshot list and image-diff viewer.

Debug E2E tests with a test-list sidebar and tabs for video, screenshots, network, console, and traces.

Compare up to five cohorts across four tabs with comparison charts, retention heatmaps, and tables.

Define funnel steps and compare conversion, breakdowns, and trends with charts and tables.

Explore user records with a DataTable and FilterBar.

Manage segments with a DataTable and SegmentBuilder.

Build an analytics dashboard with metric cards, line charts, and bar charts.

Compose a billing overview from StatCard, BarChart, and DataTable.

Manage alerts with a DataTable and AlertBuilder.

Inspect available fields and value distributions, add columns, and apply include or exclude filters.

Combine search and filters with field:value clauses, negation, OR groups, comparisons, autocomplete, and editable chips.

Browse streaming logs in a windowed table with preserved scroll position, follow state, value filters, density, and sorting.

Combine time-range controls and a time-series chart with drag zoom, zoom history, and legend toggles.

Display role-based chat bubbles, typing indicators, and automatic scrolling.

Compose chat messages with an autoresizing textarea, file attachments, and model and style selectors.

Browse and search AI conversations and start a new chat.

Open a scrollable notification list from a bell trigger with an unread badge.

Save and browse filter presets with keyboard navigation and deletion confirmation in a popover.

Act on selected items with a count badge, action dropdown, and clear-selection button.

Build multi-column navigation with a popover, category headings, and a footer slot.

Import data through upload, column mapping, preview, and confirmation steps.

Manage feature toggles, environment badges, and rollout percentages.

Configure webhook URLs, event subscriptions, retries, and test actions.

Compare code in unified or split views using an LCS diff and focusable scroll regions.

Edit Markdown with a formatting toolbar and textarea.

Move cards between Kanban columns using HTML5 drag and drop.

Edit cells with a double click, confirm with Enter, and cancel with Escape.

Explore hierarchical rows with recursive rendering and expand and collapse controls.

Choose visible table columns from a popover of checkboxes.

Arrange a vertical tab list beside its content panels.

Search asynchronously with built-in debouncing, loading feedback, and stale-response protection.

Confirm or cancel actions with a danger variant for destructive operations.

Arrange header, sidebar, content, and footer regions. The sidebar stays visible by default; callers control responsive hiding or drawer behavior.

Compose collapsible navigation with header, content, footer, groups, and items, plus a Ctrl+[ shortcut.

Fill prompt variables, preview substitutions live, and copy the resulting AI prompt.

Choose two comparison values with individually labeled Select controls and a swap button.

Export data as CSV or JSON, or delegate PDF export to a callback through a dropdown menu.

Review anomaly insights with severity cards, statistics filters, dismissal, and detection settings for type, Z-score, and days.

Define event, property, cohort, or custom segments with accessible condition controls.

Arrange draggable and resizable dashboard widgets with react-grid-layout.

Configure metric conditions, frequency, and notification channels with explicitly associated form labels.

Read and copy code snippets with line numbers, a focusable scroll region, and syntaxTheme styling.

Arrange workflow steps on grid cells with SVG connections and keyboard movement.

Edit key-value pairs with dynamic rows, secret-value visibility, and validation.

Review grouped failures with severity colors and action slots.

Browse and search templates by category with featured markers and tags.

Show bulk actions for selected items in a floating bottom bar.

Indicate connected, connecting, disconnected, and error states.

Add and remove fields at runtime with count limits, individual validation, and dynamic store updates.

Guide sequential input with field definitions, per-step validation, an associated progress indicator, and a review step.

Switch between sign-in and sign-up forms with email and password validation and a remember-me option.

Show team members and online status in list, compact, or avatar-only layouts.

Present frequent actions in a grid or list with keyboard shortcut labels.

Read activity and logs in a timeline with relative timestamps.

Manage tasks with priorities, statuses, assignees, tags, and subtasks.

Consult six design-system reference sections covering primitives, keyboard patterns, Tailwind selectors, and accessibility attributes.

Manage domain rows in a Composite grid with keyboard navigation.

Choose a Git branch with a wrapper around the Select primitive.

Browse environment variables with collapsible environment groups and Composite navigation.

Search and switch projects with a fuzzy-search combobox.

Follow deployment stages on a timeline with Composite keyboard navigation.

Open CommandPalette with an automatically bound Cmd+K shortcut.

Find commands with a Cmd+K-style palette combining Dialog, Combobox, and fuzzy search.

Use a desktop-style menu bar with checkbox and radio menu items.

Navigate a sidebar with Composite keyboard support and automatic pathname synchronization.

Build a rich-text editing toolbar from Toolbar and Tooltip components.

Choose a status from a dropdown with color indicators.

Search options with match-sorter fuzzy matching in a combobox.

Arrange stat cards in one to four columns with two-dimensional arrow-key navigation.

Switch between content panels with a wrapper around the Tabs primitive.

Organize FAQ questions and answers with Composite and Disclosure components.

Render report data as line, bar, area, pie, scatter, gauge, funnel, sparkline, or metric widgets.

Combine a Card and AreaChart with the title and description linked to the chart's accessible name.

Pair a key metric with a Sparkline to show its value and trend together.

Read full timestamps and time zones, sorted values, totals, comparison deltas, and incomplete-bucket warnings.

Display open, high, low, and close prices in responsive candlesticks with up and down legends and keyboard focus.

Represent hierarchical proportions as concentric arcs with accessible names, values, percentages, and top-level legends.

Visualize schedules and roadmaps with responsive task bars on a time axis, group legends, titles, and keyboard focus.

Show proportional values in cells and cards with inline bars, a zero baseline, and diverging colors for negative ranges.

Compare measured KPIs against target markers and qualitative bands with visible labels and accessible row descriptions.

Summarize minimum, quartiles, median, maximum, and outliers in responsive boxes with keyboard access to the values.

Group continuous values into bins to visualize their frequency distribution.

Show hierarchical proportions as area-scaled rectangles with category colors, tooltips, titles, and keyboard focus.

Compare progress or proportions across items with concentric rings.

Compare balance across multiple dimensions with polygon radar charts.

Combine bars, lines, and areas on one axis to compare metrics in the same unit, such as actuals and targets.

Visualize three dimensions through x and y positions and bubble size using the ScatterChart renderer.

Explain changes from a starting value to a total with step bars and distinct increase, decrease, and total colors.

Show daily activity across a year in a GitHub-style calendar heatmap.

Draw responsive SVG flows between nodes with keyboard focus, link titles, and hover emphasis; skip links to unknown nodes.

Show one KPI or progress value on a 270-degree SVG dial with minimum and maximum ticks.

Compare categories using grouped, stacked, or mirrored chart layouts.

Compare two variables in a scatter plot and optionally size points with zKey.

Style Recharts tooltips with tooltip semantics and hidden decorative markers through the content prop.

Wrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.

Create animated WebGL backgrounds with ogl, material presets, configurable colors, still frames, PNG capture, and a WebGL fallback.

Catch child rendering errors and display fallback UI with a React error boundary.

Overlay a loading state with one aria-busy live region and no duplicate status announcements.

Render large lists efficiently by windowing visible items.

Navigate pages with ellipses, compact and count variants, total-page or cursor pagination, and previous and next buttons.

Open accessible side or bottom sliding panels with a Dialog-based compound API.

Display an icon and text, an image, or a linked logo in navigation and other layouts.

Create Blocks with enforced BlockLayout wrapping and automatic loading and className handling.

Apply section spacing and optional semantic insets at a Block root, with automatic LoadingOverlay support.

Create draggable split-panel layouts with react-resizable-panels.

Apply semantic section spacing and automatically associate a heading through aria-labelledby.

Center page content within a configurable maximum width.

Provide custom scrollbars for vertical, horizontal, or bidirectional scrolling.

Select a value with a native range input, normalized bounds and ARIA state, and configurable value formatting.

Create a single-trigger dropdown with a convenient wrapper around Menu Core.

Add, remove, and reorder an ordered sequence of steps.

Search grouped icons using semantic Lucide keys or custom React nodes.

Choose colors from a preset palette or enter a hex value.

Show the current location and provide navigation through its hierarchy.

Display a scalar measurement within a range, such as disk usage, score, or capacity, using meter semantics.

Show linear or circular progress in determinate and indeterminate modes with normalized ARIA values.

Represent users with images, generated initials, accessible status indicators, and avatar groups.

Reserve space while loading with text, circular, rectangular, and preset skeleton components.

Show info, success, warning, or error messages with a title, body, and dismiss button.

Indicate loading in three sizes, with an aria-hidden mode for decorative use.

Use accessible buttons with primary, secondary, ghost, and danger variants, three sizes, icons, loading, and aria-busy states.

Build autocomplete search with an input, popover, items, groups, group labels, and an empty state.

Expand and collapse content with Root, Trigger, and Content components.

Navigate child elements in two dimensions with arrow keys using a Composite container.

Stack expandable panels with single, multiple, and collapsible modes.

Use a two-state pressed button alone or in a ToggleGroup for single or multiple selection.

Enter OTP or PIN codes with individual cells, distributed paste, automatic focus, backspace navigation, and form error associations.

Separate content with horizontal or vertical dividers and optional centered labels.

Display keyboard shortcuts as inline key badges.

Control the semantic document hierarchy independently from the visual typography hierarchy.

Apply consistent semantic typography to body text, labels, supporting descriptions, and code.