Catalog gallery

Every component of the reference catalog, rendered from a small uicast document. Props and source opens controls that edit the component’s entry, and the entry as it would stream. A part, such as TableCell, is a tab there. Essential limits the page to the essential group.

Layout

Accordion

A vertically stacked set of collapsible sections. Must contain AccordionItem children. Use Accordion for FAQ sections, settings panels, or any content that benefits from show/hide toggling. In 'single' type, only one item can be open at a time; in 'multiple' type, any number of items can be open simultaneously.

AspectRatio

A fixed aspect ratio box for images, video, or embeds. Maintains a consistent aspect ratio regardless of content. Use AspectRatio for responsive images, video embeds, maps, or any content that needs a fixed proportional size.

Card

A container component with rounded corners and a border for grouping related content. Can contain any children components. Optionally displays a title and description in a header area. Use Card to visually group related UI elements such as forms, stats, or content sections.

Container

A max-width centered content wrapper. Constrains content to a readable width with automatic horizontal centering, and stacks its children vertically with a configurable gap. Use Container for page-level content sections, centered layouts, or constraining wide content.

Divider

A horizontal or vertical divider line for visually separating content sections. Use Divider between card sections, form groups, or any content that needs a visual break.

FlexCol

A vertical flex container that lays out children in a column. Use FlexCol to stack components vertically with configurable gap and alignment. Common uses: form layouts, card content stacking, page sections.

FlexRow

A horizontal flex container that lays out children in a row. Use FlexRow to arrange components side by side horizontally with configurable gap, alignment, and wrapping. Common uses: button groups, inline form fields, stat cards in a row, icon + text combos.

Grid

A CSS Grid container for arranging children in a responsive grid layout. Use Grid for card grids, image galleries, dashboard widgets, or any multi-column layout. Specify 'columns' for the number of columns, and children fill cells left-to-right, top-to-bottom.

ResizablePanel

Draggable split panes for resizable layouts. Renders two panels separated by a draggable handle. Use ResizablePanel for code editors with preview, master-detail layouts, or any side-by-side resizable content.

ScrollArea

A custom styled scrollable region. Renders a container with custom scrollbars that match the app theme. Use ScrollArea for sidebars, long lists, code blocks, or any content that overflows its container.

StickyHeader

Content that pins to the top on scroll. Renders a header bar that becomes fixed when scrolled past. Use StickyHeader for page titles with actions, toolbars, or any content that should remain visible when scrolling.

Tabs

A tabbed navigation container. Must contain TabList and TabContent children. The 'value' prop controls which tab is active, and 'onChange' fires when a tab is clicked. Children should be: one TabList (containing TabTrigger items) followed by multiple TabContent components. Each TabTrigger and TabContent must share the same 'value' string to be linked.

Content

Alert

A feedback alert for important messages. Shows a status icon, an optional title and description, and child entries below them. Use Alert for success messages, error notices, warnings, tips, or informational notes within content. With dismissible, the user can close it: announcements, maintenance notices.

Avatar

A circular avatar component for displaying user profile images or initials. Shows an image if 'src' is provided, otherwise falls back to showing initials from the 'fallback' text. Use Avatar for user profiles, comment authors, team member lists, etc.

AvatarGroup

Stacked/overlapping avatar cluster with +N overflow. Renders a row of overlapping avatar circles. Use AvatarGroup for team member displays, assignee lists, participant counts, etc.

Badge

A small pill-shaped label for status (active, pending), categories, counts, or tags. With removable, it shows a close button: filter chips, selected values, labels the user can remove.

Calendar

A month-grid calendar with selectable dates and built-in month navigation. Use Calendar for date selection, event calendars, or scheduling interfaces.

Carousel

A content/image slider stepped with previous/next arrow buttons. Renders one slide at a time. Use Carousel for image galleries, testimonials, product images, or any slide-based content.

CodeBlock

A read-only code display block. Renders code with a monospaced font, optional language label, and copy button. Use CodeBlock for displaying code snippets, API responses, configuration examples, etc.

CountdownTimer

A countdown timer display showing remaining time. Renders a formatted countdown. Use CountdownTimer for sale end times, session expiry, event countdowns, or any time-limited display.

DateTime

A date or a time in the viewer's language and time zone: 'Sep 23, 2026', '2:30 PM', '3 hours ago'. Renders a <time> element in the surrounding text style. Use DateTime wherever a document shows a date or a time: an expression cannot format one.

DescriptionList

A label-value pair display for detail views. Renders a structured list of terms and descriptions. Use DescriptionList for profile details, order summaries, setting displays, or any key-value data presentation.

DiffViewer

A side-by-side or unified text diff viewer. Highlights additions and deletions between two text versions. Use DiffViewer for code reviews, document comparisons, version diffs, or any text comparison.

EmptyState

A placeholder component shown when there is no data to display. Shows an icon, a title, and an optional description. Use EmptyState inside tables, lists, or dashboards when there are zero results or no items yet. Child entries, such as a button to add an item, show below the text.

Heading

A heading component for displaying titles and section headers. Renders h1-h6 HTML heading tags. Use Heading for page titles, section titles, and any prominent text that defines content hierarchy.

HighlightedText

A text highlighting/search match marking component. Highlights specified text within content. Use HighlightedText for search result highlighting, keyword emphasis, or marking important text.

Icon

A single icon. Use it inside a button, a table cell, or beside text.

KBD

A keyboard shortcut display component. Renders keyboard keys in a styled inline format. Use KBD for documenting shortcuts, command references, or displaying key combinations.

List

An ordered or unordered list for displaying items. Children are rendered as list items. Use List for displaying simple text lists, feature lists, step instructions, or any enumerated content.

LocationMap

A map: map tiles in a width × height pixel box with a pin for each marker. Drag to pan; the + and − buttons or a double-click zoom. Hovering or focusing a pin shows its label, and an active pin shows it always; clicking a pin sends the marker to onMarkerClick. Without center, the map fits every marker. Use LocationMap for store locators, delivery tracking, contact pages, or any location display.

NotificationBadge

A notification count badge that overlays on content. Renders a small colored dot or count badge. Use NotificationBadge wrapping icons, buttons, or avatars to show unread counts, alerts, or attention indicators.

Picture

An image component for displaying pictures, photos, or illustrations. Renders an img element with configurable sizing and rounded corners. Use Picture for product photos, user-uploaded images, hero banners, thumbnails, or any visual content.

ProgressBar

A horizontal progress bar indicating completion or loading progress. Displays a filled bar within a track. Use ProgressBar for file upload progress, task completion, loading indicators, or any percentage-based metric.

QRCode

A QR code generation component. Renders a QR code from a given value. Use QRCode for sharing URLs, contact info, WiFi credentials, or any scannable data.

Spinner

A loading spinner animation indicating that an operation is in progress. Renders an animated circular spinner. Use Spinner for loading states, async operations, or any time the user needs to wait.

Stat

A statistics display component showing a label, a large number value, and an optional trend indicator. Use Stat for KPI cards, dashboard metrics, or any numeric summary (e.g. total revenue, user count, conversion rate).

Timeline

A chronological event display for activity logs, history, and progress tracking. Renders a vertical timeline with events. Use Timeline for activity feeds, order histories, deployment logs, or any sequential events.

Toast

A toast notification banner for brief messages. Positioned at the edge of the viewport, with a close button that fires onClose — there is no auto-dismiss timer. Use Toast for success confirmations, error alerts, or informational messages. Control visibility with the 'open' prop.

TreeView

A hierarchical expandable list for file systems, org trees, or category browsing. Renders a tree structure with expandable/collapsible nodes. Use TreeView for file explorers, organization charts, category navigation, etc.

TruncatedText

Ellipsis text for overflow. Truncates long text to maxLines lines, with an optional Show more / Show less toggle. Use TruncatedText for table cells, card descriptions, or any constrained text area.

Typography

A text display component for rendering inline or block text. Renders a span (inline), p or div (block) element. Use Typography for body copy, labels, descriptions, or any general-purpose text content. Pass a dynamic value through the text prop.

Data

DataGrid

A data grid from one entry: columns and rows are data, and every cell shows text. The header stays fixed while the rows scroll past maxHeight. Use DataGrid for large datasets, reports, or any data that needs a compact scrollable table view.

KanbanBoard

A Kanban-style board of columns and cards with drag-and-drop: cards can be dragged within a column and between columns, and are also clickable. Use KanbanBoard for project management, task tracking, pipeline workflows, or any column-based workflow.

Table

A table container for displaying tabular data. Children must be TableHeader, TableBody, and optionally TableFooter components in that order. Use Table for any structured data display (user lists, product inventories, reports, etc.). Each row and cell is its own entry, so a cell can hold other components.

VirtualList

A virtualized list for efficiently rendering large datasets. Only renders visible items for performance. Use VirtualList for large datasets like logs, contacts, search results, or any list with hundreds+ items.

Charts

BarChart

A bar chart for visualizing categorical data with rectangular bars. Each bar represents a data value. Use BarChart for comparing quantities across categories (sales by month, revenue by product, etc.). The 'data' prop is an array of objects, 'xKey' is the key for x-axis labels, and 'yKeys' are the keys for bar values. Values for yKeys must be numbers. Each yKey creates a set of bars with an auto-assigned color. With lineKeys, those series are lines over the bars: revenue as bars, growth rate as a line.

FunnelChart

A funnel chart for visualizing stages in a pipeline or conversion process. Each stage is narrower than the previous one. Use FunnelChart for sales funnels, conversion funnels, recruitment pipelines, or any sequential stage-based data. The 'data' prop is an array of objects with 'name' (string) and 'value' (number) keys, ordered from largest (top) to smallest (bottom).

GanttChart

A Gantt chart for project scheduling and task timeline visualization. Renders horizontal bars along a time axis. Use GanttChart for project planning, sprint timelines, event scheduling, or any time-based task visualization.

GaugeChart

A gauge/meter chart for single value progress display. Shows a value on a semicircular scale. Use GaugeChart for KPIs, progress metrics, speedometers, performance scores, etc.

Heatmap

A heatmap for visualizing matrix data with color intensity. Renders a grid of colored cells based on values. Use Heatmap for correlation matrices, activity calendars, hour-by-day usage patterns, geographic intensity, etc.

LineChart

A line chart for visualizing data trends over time or continuous categories. Each line represents a data series. Use LineChart for time series, trends, progress tracking, etc. The 'data' prop is an array of objects, 'xKey' is the key for x-axis labels, and 'yKeys' are the keys for line values. With filled, the area below each line is filled: an area chart, for volumes and cumulative metrics.

PieChart

A pie/donut chart for visualizing proportions and parts-of-a-whole relationships. Use PieChart for market share, budget breakdown, category distribution, etc. The 'data' prop is an array of objects with 'name' (string) and 'value' (number) keys. Set 'donut' to true for a donut chart with a hole in the center.

RadarChart

A radar/spider chart for multivariate data comparison. Displays data across multiple axes radiating from a center point. Use RadarChart for skill assessments, product comparisons, performance metrics, or any multi-dimensional analysis.

ScatterChart

A scatter plot for visualizing correlation between two numeric variables. Each point represents a data observation. Use ScatterChart for analyzing relationships, distribution patterns, outlier detection, or comparing two metrics (height vs weight, price vs quantity, etc.). With sizeKey, each point's size shows a third value: a bubble chart.

Sparkline

A tiny inline chart for embedding within text or table cells. Renders a small line sparkline without axes or labels. Use Sparkline for dashboard metrics, table cell trends, inline data visualization, stock tickers, etc.

TreemapChart

A treemap: one rectangle per item, not nested. Each rectangle's area is proportional to its value. Use TreemapChart for disk usage, portfolio allocation, organizational budgets, or any proportional breakdown.

WaterfallChart

A waterfall chart showing cumulative effect of sequential positive/negative values. Each bar starts where the previous one ended. Use WaterfallChart for financial statements, profit/loss breakdown, budget variance analysis, etc.

Forms

Button

A clickable button for triggering actions: form submissions, toolbar actions, close buttons, toggles. It shows text, an icon, or both; set at least one. With only an icon it is square, and tooltip names it.

ButtonGroup

A horizontal group of buttons displayed together with connected borders. Its children are buttons. Use ButtonGroup for related actions like view mode toggles, segmented controls, or action toolbars.

Checkbox

A checkbox input for boolean (true/false) values. Renders a styled square checkbox that can be checked or unchecked. Use Checkbox for toggling a setting on/off, accepting terms, or any boolean choice.

CodeEditor

A plain-text code input area. Renders a monospaced textarea with line numbers for code editing — no syntax highlighting. Use CodeEditor for configuration input, code snippets, template editing, or any structured text entry.

ColorPicker

A color picker input for selecting a color value. Renders a native HTML color input alongside a text input showing the hex value. Use ColorPicker for theme customization, brand color selection, or any color-related settings.

CopyButton

A click-to-copy button with visual feedback. Copies specified text to clipboard and shows a checkmark on success. Use CopyButton for API keys, URLs, IDs, or any text that users need to copy.

CurrencyInput

A currency entry input. Displays amounts with a currency symbol. Use CurrencyInput for financial forms, pricing inputs, payment amounts, etc.

DatePicker

A date input field that uses the native HTML date picker. Renders an input[type=date]. Use DatePicker for selecting a single date (birthdate, due date, start date, etc.). The value is an ISO date string (YYYY-MM-DD).

Field

A form field wrapper that groups a FieldLabel, an input, and an optional FieldDescription together. Children should be FieldLabel, then the input, then optionally FieldDescription. Provides consistent spacing and layout for form fields.

FileUpload

A file upload input for selecting files from the user's device. Renders a styled file input area. Use FileUpload for document uploads, image uploads, CSV imports, etc. The onChange callback receives file metadata (name, size, type) but not the file content itself.

Form

A form: its children are the fields, each in a Field, and it draws its own submit button after them. On submit the browser checks every field against its own rules (required, an email or URL type, min/max); each failing field shows its message and the first one gets focus. onSubmit runs only when all pass, and the button shows a spinner until its steps finish. Mark each field a user must fill required. Don't add another submit button, and don't compute a button's disabled from field values.

FormulaBar

A formula/expression input with cell reference support, similar to spreadsheet formula bar. Renders an input with a formula icon. Use FormulaBar for spreadsheet-like apps, calculated fields, or expression editors.

Input

A text input field for single-line text, email, password, or number entry. Renders a styled input element. Use Input for form fields.

MultiSelect

A multi-select dropdown for choosing several options from a list. The trigger shows the selected options as tags, each with a remove icon, and opens a list where a click on an option toggles it; a check marks each selected option. Use MultiSelect for filters, categories, permissions, or any field where multiple choices are needed.

NumberInput

A numeric input field specifically designed for entering numbers. Renders an HTML number input. Use NumberInput for quantities, amounts, scores, or any numeric-only data.

PhoneInput

A phone number input with country code picker. Renders a select for country code and an input for the phone number. Use PhoneInput for contact forms, user registration, or any phone number entry.

PinInput

A verification/OTP code entry with segmented digit inputs. Renders a row of individual character inputs. Use PinInput for two-factor authentication, verification codes, or OTP entry.

Radio

A radio button group for selecting a single option from a list. Renders a vertical or horizontal set of radio buttons with labels. Use Radio for mutually exclusive choices like gender, plan tier, priority level, etc.

Rating

A star/icon-based rating input. Renders clickable star icons for rating. Use Rating for product reviews, feedback forms, satisfaction surveys, or any star rating.

SearchInput

A search input with a search icon and a clear button. It shows a spinner while the entry's loading is true. Use SearchInput for search bars, filter inputs, or any text search functionality.

Select

A dropdown select component for choosing one option from a list. Renders a styled select trigger that opens a dropdown popover with options. Use Select for any single-choice selection (status, category, country, etc.). The 'options' prop is an array of objects with 'label' and 'value'. With searchable, the dropdown has a search field that filters the options by typing: long lists such as countries or users.

Slider

A slider for selecting a numeric value within a range. Use Slider for volume controls, brightness settings, or any numeric value selection. With a [low, high] pair as value, it has two thumbs and selects a range: price filters, date ranges.

Switch

A toggle switch for boolean on/off states. Renders a styled toggle that slides between on and off. Use Switch for enabling/disabling features, toggling settings, or any binary state.

Textarea

A multi-line text input field for longer text content such as comments, descriptions, or messages. Renders a styled textarea element. Use Textarea for multi-line form fields.

TimePicker

A time input field that uses the native HTML time picker. Renders an input[type=time]. Use TimePicker for selecting a time of day (appointment time, alarm time, schedule time, etc.). The value is a time string in HH:MM format (24-hour).

ToggleGroup

A group of toggle buttons for mutually exclusive or multi-select choices. Use ToggleGroup for view switchers (grid/list), text alignment, or any set of selectable options.

CommandMenu

A command palette for search, jump-to, and actions. Renders a dialog with a search input and grouped command items. Use CommandMenu for global search, quick navigation, and action execution.

Link

A text link: an <a> element that opens href when clicked. With external, it opens in a new tab and shows an external-link icon. Use Link to go to another page or site, not for an action. The text prop sets the link text.

Stepper

A stepper/wizard component showing progress through a multi-step process. Displays numbered steps with labels, highlighting the current step and indicating completed/upcoming steps. Use Stepper for multi-step forms, onboarding wizards, checkout flows, or any sequential process.

Overlays

DropdownMenu

A dropdown menu triggered by a button click. Renders a trigger button and a popover menu. Children must be DropdownMenuItem components. Use DropdownMenu for action menus, context menus, or any set of actions behind a '...' or similar trigger button.