Explore the components and patterns behind Revido Kit.
83 components
Confirmation dialog (role alertdialog) with a required title and description; `danger` for irreversible actions.
A formatted number with tabular numerals, a typographic minus, optional sign and sign-driven tone — money, counts, percents or custom units in the Kit locale.
Responsive sign-in and setup frame with readable form widths and consistent spacing between panels.
Picture of a person (circle) or company (rounded square) with an initials fallback.
Pill-shaped label: a soft tint plus text for a category, count or state.
Single-series cobalt bars with a zero baseline, keyboard tooltips and an accessible data table.
Hierarchy trail with links or in-place parent actions; the middle of long trails collapses into a … menu.
How a number is produced: labelled lines with + − × ÷ operators, optional source details and a result under a rule.
Action or styled navigation: bind onPress for actions, href for navigation, and loading while pending. Pill-shaped with primary or soft-tint danger intent.
Month grid for one date or a range; click the title to jump months and years, quick-range presets and side-by-side months for periods.
Inline contextual feedback: set tone, optional title, and description or children. Place follow-up controls in actions; nest Checklist with items for completion requirements.
Surface that groups related content: 8px radius, border, soft shadow in light mode.
16px box with a 4px radius; cobalt fill with a check, a dash when indeterminate. CheckboxGroup collects values.
A color swatch opening an accessible area, hue slider, hex field and optional preset colors.
Text input with a filtered option list, same rows as Select, an empty state and an async mode.
Searchable action list (cmdk) and the ⌘K palette (CommandDialog).
Keyboard-accessible data grid. Pass data rows with stable id values and columns built with createDataTableColumnHelper; enable selectable and pageSize as needed.
Date field with typeable, locale-ordered segments and a calendar popover. DateRangePicker does periods.
Modal dialog for a focused task: 10px radius, dimmed backdrop, zoom/fade in.
Collapsible record section with a count chip, independent add and header actions, and placement-based emptiness; empty lists start collapsed.
Everything about how a list looks in one control: layout (Board / List), grouping, ordering, visible properties and options; a dot marks a customised view.
Inline record title — always-on input or click-to-edit for peek headers.
Selection formatting, project-configured references, inline media and / commands with canonical JSON and portable derived Markdown; no fixed toolbar.
Empty result: icon + one line + optional action for lists, boards and search.
The label, description and error rows every Kit form control shares: 12px medium label, 12px tertiary help, 12px destructive error.
Linear-style filtering: Filter → field → values; active filters become editable chips with is / is not and Clear filters.
Side-by-side bars for two or more series on a shared category axis (revenue vs profit by month).
Optically sized Lucide glyphs and tinted tiles with semantic tones and accessible labels.
Inline creation at the end of a related-item list, with retained drafts and an optional full form.
Small tone-and-icon text inside captions, with optional source detail on focus or hover.
Single-line native text input: 32px, 6px radius, cobalt focus halo. TextField wraps it with label and validation.
Horizontally scrolling workflow lanes. Nest KanbanColumn with name/count and WorkItemKanbanCard with title inside KanbanBoard; use Page bleed fill when the board owns page scrolling.
Keycap for showing keyboard shortcuts; KbdGroup renders a platform-aware shortcut.
Field label: 12px medium text, wired automatically inside React Aria fields.
Inline text link through the Kit router; external URLs open in a new tab with ↗.
Work-item list (GridList) with 36px rows and trailing property slots.
Actions or options in a popover: icons, shortcuts, destructive items, sections, submenus, check/radio selection.
Single or stacked progress with semantic segment fills and hover, keyboard and tap breakdowns.
Compact regional icon-and-text notice with an optional action for record rails.
Localized number input for money and quantities: Intl formatting, locale parsing, clamping, optional − / + buttons.
One semantic option model and renderer for labels, leading visuals, descriptions, shortcuts and selection across Kit controls.
The page frame every screen uses: top bar (title, count, page actions) → view toolbar → summary → content.
A shared table and list footer with a range, page numbers and container-aware compact navigation.
Non-modal record peek — floats inset like the page shell (rounded card, shell inset), slides in/out from the right, resizable, cookie-persisted width. Enter expands within the same inset.
Floating panel anchored to a trigger for quick edits, pickers and previews.
Compact tabular percentage and progress track with detail available on hover or focus.
A compact rich-text rail value that expands on focus while keeping the editor and draft mounted.
Associated property label and value. Rail groups share a content-sized label column capped at 40% / 7rem, giving values the remaining width; long values wrap or expose their complete text.
One or two tightly spaced columns of record property fields with spanning rows.
Quiet link or branch value in a property row; editing opens a compact TextField popover.
28px localized record number with suffix, bounds, stepping and nullable clearing; add property icons through PropertyField.
Compact searchable record value picker. Field layout aligns wrapping rail labels and content-sized value chips; people use grouped options with role chips.
Bordered 28px pressed-pill or a Switch inside PropertyField for an immediate boolean record property, with an optional icon and focusable disabled explanation.
Quiet read-only property pill with tabular numerals, an optional icon, or any shared Option leading visual.
Pick exactly one of a few visible options; 16px circles that fill cobalt with a white dot.
Non-modal record inspector. Control isOpen/onOpenChange; provide recordType, title and body children. propertyBar, comments, rail and footer are optional content slots.
Collapsible RecordDrawer list or rail group with count, independent add action, and placement-based emptiness; empty lists start collapsed.
Panels split by a 1px handle the user can drag or move with arrow keys; layout persisted by the app.
Search input with a leading magnifier and a clear button; Escape clears, Enter submits.
An exclusive pill switcher for alternate presentations of the same data. Same look and sliding pill as Tabs, but a radiogroup with no panels.
Single-choice popover. Pass items with id/label or nest SelectItem in SelectSection; control selectedKey with onSelectionChange, or initialize defaultSelectedKey.
A 1px legible rule between groups of content, horizontal or vertical.
Side panel that springs in from an edge; modal by default, non-modal for the peek panel.
App navigation: 220px full width or a 48px icon rail with tooltips; sections peek open from the rail.
Layout-shaped pulsing placeholder for loading content; still under reduced motion.
Drag along a 6px track with a cobalt fill; one thumb for a value, two for a range.
Order a list by a field and direction; the button shows the applied sort and offers Reset to default.
Indeterminate activity indicator for buttons and tiny inline waits.
Primary action plus alternatives in one pill: label names the action, onPress runs it (or href navigates), and children are MenuItem options dispatched through onAction.
One bar per category, split into its parts, with the total at the bar's end (revenue split into profit and expenses by month).
Labelled metric on a Card — pipeline totals, forecast, overdue counts.
Equal compact metric tiles on one surface, with values above labels and source hints.
Workflow status glyph with per-status hue and position fill; StatusLabel adds its name.
32×18 pill toggle that turns cobalt when on, for settings that apply immediately.
Section navigation with panels: nest Tab elements in a labelled TabList and matching TabPanel ids. Initialize defaultSelectedKey or control selectedKey/onSelectionChange.
Multi-line native text input styled like Input; grows with its content.
Compact activity events with day groups, small semantic markers, actor sentences, an optional right-aligned value per row and exact timestamps on focus or hover.
Bottom-center toasts (sonner) on the popover surface; call `toast()` from anywhere.
A row of controls that is one tab stop with arrow-key navigation — filter and display bars.
Short hint for an icon-only control, optionally with its keyboard shortcut.
2px primary bar at the top of the viewport for page-level loading; hidden for work under 120ms.
The single row under a list page's title bar: search, Filter and Display together on the left; optional trailing extras on the right.
Related work items with fixed estimate, progress, status, assignee and priority columns, inline rename and independent controls.