Components
66 components. Every story, state, and composition from the locally built reference, alongside usage guidance and specifications.
Implementation previewCompare component families
Explore related components together, with their current examples and guidance.
Cards
Card
The generic surface primitive, composed from typed slots for regions, text, and summary figures, and optionally pressable.
13 stories · Implementation previewSelectionCard
A tappable option card for choice grids, with a title, description, optional check control, and selected state.
7 stories · Implementation previewControls
Chip
A compact pill in one of four shapes: selectable, command, removable, or readonly. Never more than one.
6 stories · Implementation previewChipGroup
A labelled set of chips, announced as one group rather than as loose controls.
4 stories · Implementation previewDropdown
A compact disclosure trigger that reflects the current value and expanded state while a parent owns the associated menu or sheet.
5 stories · Implementation previewMenu
A compact row list that switches between one-off action semantics and controlled single-selection semantics.
5 stories · Implementation previewSegmentedControl
A list of buttons for switching one view mode, with the selected option marked by aria-current.
4 stories · Implementation previewTabs
A horizontal tab list for choosing one sibling content panel, with a bold underline marking the controlled active tab.
5 stories · Implementation previewForms
Autocomplete
A controlled search field with inline, sheet, or fullscreen result presentation and explicit loading, error, empty, and disabled states.
8 stories · Implementation previewDatePicker
A form trigger that presents bounded month, day, and year wheels and commits one ISO calendar date on confirmation.
8 stories · Implementation previewField
Own the label, helper text, and error for exactly one form control.
12 stories · Implementation previewRadioGroup
A controlled single-choice field that stacks labelled options as divider-separated selection rows.
7 stories · Implementation previewSearchField
A controlled search input with search icon, return-key callback, optional loading indicator, and value-dependent clear action.
5 stories · Implementation previewSelect
A single-choice form control whose trigger opens a mobile option sheet and mirrors the committed value into form submission.
10 stories · Implementation previewTextarea
A controlled multiline form field with configurable rows, semantic surfaces, and native length constraints.
9 stories · Implementation previewLayout
Background
A detail-screen container that paints a surface, fills height, and aligns its content with token-scale padding and safe-area insets.
10 stories · Implementation previewCarousel
A horizontal snap carousel backed by native scroll-snap, with optional controls, dots, autoplay, loop, and peek.
8 stories · Implementation previewGrid
An equal-width column grid backed by CSS Grid, column-first with token-scale gaps and cell alignment.
9 stories · Implementation previewHStack
A horizontal flex row with a token-scale gap, cross-axis alignment, main-axis distribution, wrap, and scroll options.
6 stories · Implementation previewScreen
A full-height route scaffold that paints the surface, applies safe-area insets, and hosts sticky header and footer chrome around a scrolling body. Chrome padding is fixed by the system; only the body's padding is authorable.
13 stories · Implementation previewVStack
A vertical flex column with a token-scale gap, cross-axis alignment, main-axis distribution, wrap, and scroll options.
7 stories · Implementation previewOrganization
Accordion
Grouped disclosure of independent expandable sections driven by an items array, with animated panels.
8 stories · Implementation previewFaq
Question discovery in a feature-toned card carousel or a related-question list. The host owns answers and navigation; this family exposes Faq.Carousel and Faq.List, not a callable Faq root.
5 stories · Implementation previewList
A rich list container that stacks rows with automatic hairlines, groups them with sections, and reveals extras inline via disclosure.
4 stories · Implementation previewSectionHeader
A standalone content heading row with optional leading and trailing slots, sized small, default, or large.
11 stories · Implementation previewOrganization / List
Overlays
BottomSheet
A mobile bottom-sheet dialog with sheet or full-screen chrome, height presets, swipe-to-dismiss, and optional header and body slots.
12 stories · Implementation previewDialog
A controlled alert dialog for explicit decisions, with slotted title and supporting-copy parts, a required primary action, an optional safe secondary action, and an optional transient error region.
7 stories · Implementation previewToast
A transient feedback banner with variant color, viewport position, optional icon, action, and dismiss control.
7 stories · Implementation previewPrimitives
AnimatedNumber
A numeric readout that moves from its previous value to a new target while keeping the settled value accessible.
4 stories · Implementation previewAvatar
A circular identity mark for a person, account, or brand, with resilient image fallbacks.
10 stories · Implementation previewAvatarGroup
An overlapping cluster of same-size identity marks with a surface-matched separating ring and optional overflow count.
9 stories · Implementation previewButton
Make the next action clear with one primary button and quieter supporting actions.
9 stories · Implementation previewCheckbox
A controlled round multi-select control that toggles one item without committing an entire form.
6 stories · Implementation previewDivider
A full-width content separator that renders either a labeled section band or a plain hairline.
5 stories · Implementation previewFlag
A country flag as a circular mark, drawn from vendored artwork so it is consistent across platforms and controllable in a flat interface.
6 stories · Implementation previewFloatingActionButton
A circular frosted-glass action button that floats over screen content in the bottom-right corner.
4 stories · Implementation previewFloatingActionMenuButton
A floating-action circle whose press opens an anchored menu of related actions above it.
4 stories · Implementation previewInput
A controlled text input, paired with Field for a persistent label and useful validation.
9 stories · Implementation previewRadio
A controlled round single-select control that selects an option without deselecting the current option on a second press.
6 stories · Implementation previewSelectionIndicator
An internal, presentational selection mark shared by public Checkbox, Radio, RadioGroup and list selection rows. It is not a package-root export and must not be used as an interactive control.
3 stories · Implementation previewSkeleton
A decorative shimmer placeholder that preserves the expected text, avatar, or block layout while content loads.
7 stories · Implementation previewTag
The single non-interactive marker: a compact pill carrying a status, a label, or a piece of metadata.
7 stories · Implementation previewText
The shared typography primitive for every display, heading, body, link, and overline ramp with semantic foregrounds and optional line clamping.
6 stories · Implementation previewToggle
A controlled solid switch for a single setting that takes effect immediately.
6 stories · Implementation previewPrimitives / Iconography
Glyph
The unstyled glyph atom: a registered SVG drawing rendered at 1em and currentColor, inheriting size and color from context. The design language calls the concept a Symbol; the web implementation is exported as Glyph because the JS global and SF Symbols already own the Symbol name.
3 stories · Implementation previewIcon
The opinionated render of a Symbol: a Glyph at a token size with semantic colors and decorative or meaningful accessibility.
7 stories · Implementation previewIconTile
A design-system glyph centered in a circular semantic tone for status, brand, or product-feature identity.
4 stories · Implementation previewSFIcon
An Apple SF Symbol rendered from the app-generated supported-symbol map with token sizes and semantic foregrounds.
6 stories · Implementation previewStatus
Banner
An inline advisory strip that annotates present content with a title or eyebrow, a message, and an optional icon, action, and dismiss control.
5 stories · Implementation previewEmptyState
A calm full-region placeholder that centers a title, optional description, icon, and recovery action when an area has nothing to show.
8 stories · Implementation previewProgress
A determinate progress family in three shapes: a linear Bar, a segmented Steps counter, and a circular Ring.
10 stories · Implementation previewSpinner
An indeterminate circular loading indicator for states where duration is unknown, sized and toned for inline or centered use.
7 stories · Implementation previewStatusIndicator
A quiet inline status: a tone-colored dot beside neutral label text, shared across card and list surfaces.
4 stories · Implementation previewTimeline
An ordered sequence of events with per-item state, connectors, titles, timestamps, and vertical or horizontal flow.
10 stories · Implementation previewVisualizations
ActionOrbs
Overlapping proportional circles for a small summary set, a hero glance where relative magnitude matters more than exact counts, with a gentle breathing motion.
5 stories · Implementation previewBarChart
Vertical bars over an ordered sequence, the interactive chart member: an optional drag or keyboard scrubber plus a range toggle, with single-value or stacked bars.
6 stories · Implementation previewBubbleMatrix
A scan-style scatter of category badges and nodes drawn on a canvas, a decorative we-are-combing-your-data visual sized by category value rather than a precise chart.
4 stories · Implementation previewBurstGraph
A radial burst drawn on a canvas, with category-colored points spraying outward distributed by value, for decorative categorical texture.
5 stories · Implementation previewCategoryBars
Horizontal labeled bars for a ranked breakdown of a handful of named categories with their counts visible, the read-the-numbers chart in the family.
5 stories · Implementation previewCompositionBar
A single horizontal bar split into proportional, color-coded segments — each category's share of the total, the composition read for open-ended counts with no fixed maximum.
6 stories · Implementation previewGlobe
An orthographic globe drawn on a canvas, as either a land-dot field or a coastline wireframe, with optional location markers, for decorative geography.
7 stories · Implementation previewHalfGauge
A semicircular 0-100 dial for a single neutral progress or score value, with a low-to-high gradient sweep and clamped out-of-range input.
5 stories · Implementation previewLineChart
One or more smoothed trend lines over time, with tone-driven series colors and optional dimmed, dashed ghost baselines for projections or comparisons.
10 stories · Implementation previewMetricLineChartCard
A dashboard KPI tile that pairs a headline value and optional stat delta with an inline LineChart inside a Card, falling back to placeholder copy when no series can render.
6 stories · Implementation previewRiskMeter
A horizontal 0-100 track carrying a low-to-high risk gradient for a single severity value, marked with a thumb handle or a you-are-here pointer.
6 stories · Implementation preview