reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32

Shells

Shell-composed components with real business context. Form, data, nav, and workflow blocks you can drop straight into your project.

CLI docs→

99

opt-ui

TimeRangeControl

Shells

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

opt-ui

SummaryRow

Shells

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

opt-ui

FilterBar

Shells

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

opt-ui

ReplayPlayerLayout

Shells

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

opt-ui

ReplayTransport

Shells

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

opt-ui

ReplayScrubber

Shells

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

opt-ui

CriteriaBuilder

Shells

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

opt-ui

QueryWorkspace

Shells

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

opt-ui

SaveQueryDialog

Shells

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

opt-ui

QueryHistoryList

Shells

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

opt-ui

QueryVariablesMenu

Shells

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

opt-ui

QueryFiltersMenu

Shells

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

opt-ui

QueryResultChart

Shells

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

opt-ui

QueryOutputPane

Shells

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

opt-ui

QueryToolbar

Shells

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

opt-ui

SchemaTree

Shells

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

opt-ui

SqlEditor

Shells

Edit SQL with CodeMirror syntax highlighting and autocomplete.

opt-ui

QueryResultsTable

Shells

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

opt-ui

CatalogFrame

Shells

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

opt-ui

QueryFilterBar

Shells

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

opt-ui

InspectorLayout

Shells

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

opt-ui

Flyout

Shells

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

opt-ui

EventMetaEditor

Shells

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

opt-ui

PropertyExplorer

Shells

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

opt-ui

EventIcon

Shells

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

opt-ui

NotificationToast

Shells

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

opt-ui

DataTable

Shells

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

opt-ui

ScoreBreakdown

Shells

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

opt-ui

EventTimeline

Shells

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

opt-ui

ThemeSwitcher

Shells

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

opt-ui

PageAside

Shells

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

opt-ui

SettingsForm

Shells

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

opt-ui

AuditTimeline

Shells

Review change history with action colors and expandable diffs.

opt-ui

AuditLog

Shells

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

opt-ui

TimeRangeSelector

Shells

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

opt-ui

ReportBuilder

Shells

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

opt-ui

FileUploadForm

Shells

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

opt-ui

FieldSidebar

Shells

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

opt-ui

QueryBar

Shells

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

opt-ui

LogTable

Shells

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

opt-ui

TimeSeriesPanel

Shells

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

opt-ui

ChatMessageList

Shells

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

opt-ui

ChatInput

Shells

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

opt-ui

ChatSidebar

Shells

Browse and search AI conversations and start a new chat.

opt-ui

NotificationCenter

Shells

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

opt-ui

SavedFilters

Shells

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

opt-ui

BulkActions

Shells

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

opt-ui

MegaMenu

Shells

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

opt-ui

DataImportWizard

Shells

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

opt-ui

FeatureFlagPanel

Shells

Manage feature toggles, environment badges, and rollout percentages.

opt-ui

WebhookConfig

Shells

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

opt-ui

CodeDiffViewer

Shells

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

opt-ui

RichTextEditor

Shells

Edit Markdown with a formatting toolbar and textarea.

opt-ui

KanbanBoard

Shells

Move cards between Kanban columns using HTML5 drag and drop.

opt-ui

InlineEditTable

Shells

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

opt-ui

TreeTable

Shells

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

opt-ui

ColumnToggler

Shells

Choose visible table columns from a popover of checkboxes.

opt-ui

VerticalTabs

Shells

Arrange a vertical tab list beside its content panels.

opt-ui

AsyncCombobox

Shells

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

opt-ui

ConfirmDialog

Shells

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

opt-ui

AppShell

Shells

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

opt-ui

Sidebar

Shells

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

opt-ui

PromptTemplate

Shells

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

opt-ui

ComparisonSelector

Shells

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

opt-ui

ExportButton

Shells

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

opt-ui

InsightsPanel

Shells

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

opt-ui

SegmentBuilder

Shells

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

opt-ui

WidgetGrid

Shells

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

opt-ui

AlertBuilder

Shells

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

opt-ui

CodeSnippetViewer

Shells

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

opt-ui

WorkflowCanvas

Shells

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

opt-ui

KeyValueEditor

Shells

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

opt-ui

FailureList

Shells

Review grouped failures with severity colors and action slots.

opt-ui

TemplatePicker

Shells

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

opt-ui

FloatingActionBar

Shells

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

opt-ui

ConnectionIndicator

Shells

Indicate connected, connecting, disconnected, and error states.

opt-ui

DynamicFieldForm

Shells

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

opt-ui

WizardForm

Shells

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

opt-ui

AuthForm

Shells

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

opt-ui

TeamMemberList

Shells

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

opt-ui

QuickActions

Shells

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

opt-ui

ActivityFeed

Shells

Read activity and logs in a timeline with relative timestamps.

opt-ui

TaskList

Shells

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

opt-ui

DesignGuidePanel

Shells

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

opt-ui

DomainTable

Shells

Manage domain rows in a Composite grid with keyboard navigation.

opt-ui

BranchSelect

Shells

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

opt-ui

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

opt-ui

ProjectSwitcher

Shells

Search and switch projects with a fuzzy-search combobox.

opt-ui

DeploymentTimeline

Shells

Follow deployment stages on a timeline with Composite keyboard navigation.

opt-ui

CommandPaletteTrigger

Shells

Open CommandPalette with an automatically bound Cmd+K shortcut.

opt-ui

CommandPalette

Shells

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

opt-ui

AppMenubar

Shells

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

opt-ui

SidebarNav

Shells

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

opt-ui

EditorToolbar

Shells

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

opt-ui

StatusSelect

Shells

Choose a status from a dropdown with color indicators.

opt-ui

SearchCombobox

Shells

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

opt-ui

DashboardGrid

Shells

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

opt-ui

ContentTabs

Shells

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

opt-ui

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.