Syntara

53 components have a metadata file today. Each page below is generated from that file — the same one the registry and the MCP server read.

Maturity

Layout

Card
beta
A surface that groups related content and actions.
Separator
alpha
A hairline between groups of content, optionally with a short label such as "or".
Theme Scope
alpha
Applies a Syntara theme, colour scheme and density to everything inside it.

Button
beta
Triggers an action, with variants for emphasis, a danger tone for destructive actions, three sizes plus icon-only, and a pending state.
Toggle Group
beta
A segmented control of toggle buttons for switching views or filters, plus a standalone toggle button.

Calendar
beta
A month grid for picking a date or a date range, always visible on the page.
Checkbox
beta
Selects one or more options, alone or in a labelled group, with indeterminate and invalid states.
Chip
alpha
Pills the user picks or removes: filters, a single choice, or values they entered.
Combobox
alpha
A text input that filters a list of options as people type, for picking from long lists.
Date Picker
beta
A date field typed segment by segment, with a calendar popover for picking by sight.
File Upload
alpha
A drop zone with a browse button and the list of chosen files, with size and type checks.
Radio Group
beta
Picks exactly one option from a short list, as classic radios or as selectable cards with a title and description.
Search Field
beta
A search input with a leading icon and a clear button; Escape clears and Enter submits.
Select
beta
Lets people choose one option from a short list that opens from a button.
Slider
alpha
Picks a number or a range by dragging or with the keyboard, with a formatted value next to the label.
Switch
beta
Turns a setting on or off immediately, with its label on the inline-end side and optional help text.
Text Area
alpha
A multi-line text input with label, help text, validation, optional auto-resize and a character counter.
Text Field
beta
A single-line text input with label, help text, validation and optional prefix/suffix, plus the field primitives other inputs compose.

Alert Dialog
beta
A modal confirmation that interrupts the user before a destructive or irreversible action.
Command
alpha
A ⌘K command palette: a modal search field that filters commands and destinations as you type.
Dialog
beta
A modal window for a focused task — a short form, a decision or details — that blocks the page until it is closed.
Menu
beta
A list of actions or options that opens from a button, with icons, shortcuts, sections, submenus and selection.
Popover
alpha
A floating panel anchored to a trigger, for rich or interactive content such as a small form, filters or details.
Sheet
alpha
A modal panel that slides in from an edge of the viewport, for filters, details and secondary tasks that keep the page in context.
Tooltip
beta
A short text label that appears on hover or keyboard focus to name or explain a control.

Alert
beta
An inline message about the page or a section of it, in one of five tones.
Empty State
beta
What to show when there is nothing to show: no data yet, no results, or nothing left to do.
Meter
beta
A quantity within a known range, such as wallet usage, storage or a limit, with a label, a readout and a slim track.
Progress Bar
beta
Shows how far a task has got, or that it is working when the duration is unknown.
Skeleton
alpha
Placeholder shapes that stand in for content while it loads.
Spinner
alpha
A small loading indicator in the current text colour.
Toast
beta
A brief, stacked notification about something that just happened, with an optional action.

Accordion
alpha
A stack of headings that each show or hide a section of content.
Amount
beta
Money set as typography: a locale-grouped figure in the heading face with a small raised currency sign.
Avatar
beta
A person or entity shown as a photo, or as initials on a soft tint when there is no photo. Also an empty seat: "+" to add someone, "?" for someone not added yet.
Badge
beta
A short label for a status, category or count.
Eyebrow
beta
A small uppercase kicker label with wide tracking that sits above a heading, figure or section.
Icon Tile
beta
A rounded-square tile holding an icon or logo on a contrast-checked tint or the brand fill.
Kbd
alpha
A keyboard key or shortcut, shown as a small keycap.
Person Chip
beta
A person as a small avatar and their name in a pill, with a placeholder for someone not added yet.
Tag
beta
A quiet, static label for an attribute or category, such as "Cashless" or "Home collection".

Breadcrumbs
alpha
Shows where the current page sits in the hierarchy, with links back to each level.
Link
beta
Navigates to another page or section, inline in text or as a standalone link.
Pagination
alpha
Moves between pages of a long list or table.
Sidebar
alpha
App navigation: a brand block, a search slot, labelled sections of links with icons, counts, badges and expandable groups, a footer with the signed-in user, and an icon-rail collapsed mode.
Steps
beta
Shows progress through a multi-step flow: which steps are done, which is current and what comes next.
Tabs
beta
Switches between related panels of content in the same place, one visible at a time.

Area Chart
beta
A trend over time: a smooth line with a gradient fill, plus LineChart for comparing series without fills.
Bar Chart
beta
Compares magnitudes across categories with vertical bars: rounded data ends, grouped series and an optional highlighted bar.
Chart
alpha
Shared chart pieces: the legend, the tooltip readout, the data table and the ChartFrame shell that AreaChart and BarChart draw into.
Data Table
beta
A table for records people scan, compare, sort and select, with loading and empty states.
Sparkline
beta
A small trend line for stat cards and table cells, decorative unless you name it.
Stat Tile
beta
One headline number with its label, change and optional trend line.