TimeRangeControl
ShellsSet date-math ranges with quick selection, presets, recent values, explicit updates, auto-refresh, and time-window navigation.
Shell-composed components with real business context. Form, data, nav, and workflow blocks you can drop straight into your project.
99
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 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.
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.
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.
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.
Switch theme presets and light, dark, or system appearance.
Add a sticky, fixed-width page aside with header, body, and footer slots.
Build settings forms from data with validation, radio buttons, and checkboxes.
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.
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.