Built on native <dialog>, the Popover API and Invoker Commands — pages render before any script loads.
Components
Every pattern in the catalogue — open one for its reference and live preview.
AccentTextA single emphasized phrase inside a landing headline.AccordionA set of expand/collapse sections built on Disclosure, stacked into one divider-separated list.ActivityWhat an assistant did before it answered.AlertAn inline status message rendered as a bordered, tinted panel, colored by one of five semantic tones and announced to assistive technology through `role="alert"` plus a configurable `aria-live` politeness.AlertDialogAn interruptive modal surface that demands an explicit response before a page continues.AnchorHeadingA docs section heading a reader can link to.AnnouncementChipA short announcement above a hero.AppShellThe frame every signed-in screen sits in: a tinted frame holding the sidebar and an inset content card.AppShellToggleIsland holding an app shell's collapse toggle.AspectRatioA layout primitive that locks its host to a fixed width-to-height ratio, clipping whatever content it wraps so the box keeps its shape regardless of the content's own intrinsic size.AttachmentA compound card presenting one attached file or image.AuthorBandThe about-the-author band.AutoRefresh"Auto-refresh.AvatarA person's or entity's picture rendered as a fixed-size, fully circular host stacking an image layer, an initials fallback.BadgeA compact pill communicating a short status, label, or count inline with surrounding content.BannerA full-width strip above a page or the whole app for state that outlives one action.BentoEqual columns of claim cells.boardMoveFormIdA kanban board: columns of cards a person drags from one column to another.BreadcrumbsA trail of links marking the page's position within a hierarchy of parent sections, composing a `<nav>` root, an `<ol>` list.BubbleThe framed message surface inside a conversational row's content slot, sized to its own content up to a share of the row's width.ButtonAn interactive control for a single, immediate action — submitting a form, triggering a command, opening a dialog.CalendarA month-grid calendar surface composed from a navigable header and a native `<table>` of day cells, styled through the platform's own semantics.CalloutA docs aside for the one thing a reader must not miss.CardA bounded container grouping a header, body content, and footer actions into one ring-edged, softly lifted panel tinted by a semantic color role.CarouselA horizontally scrolling collection of slides riding native CSS scroll snap.CaseStudyA case study as one full-bleed scene.ChangelogStripA "what's new" strip: recent releases as dated entries on one continuous hairline, each marked by a dot on the rule.CharacterCountA ring that fills as a limited field is typed in, the characters left once the limit is near.ChartThe `Chart` namespace's compound parts, covering Cartesian series (Chart, Chart.Line, Chart.Area, Chart.Bar) and the independent Chart.Pie root.CheckboxA styled native checkbox.CheckboxGroupA landmark grouping independently toggled checkbox controls into one related set.CheckListChecked claim rows for landing CTAs and hero support lists.CheckRunsThe checks on a commit or pull request.ClosingCtaClosing call-to-action band: inverse or tinted section with a title, lead, and action cluster.CodeBlockA titled code card for documentation.CodeStageA titled mono panel for install samples, CLI output.CodeTabsTabs over code that mirrors a reader's choice — package manager, framework, language.CodeTabsSyncClient island: keeps one set of code tabs on the choice every set sharing its sync key makes, and remembers it.CodeViewA whole source file to read and cite.ColorAreaA two-dimensional saturation/brightness picking square for a given hue, built from two overlaid native `<input type="range">` elements.ColorFieldA labeled, described, and validated color field in one call.ColorPickerA labeled color field composing ColorField's plain fallback with an optional ColorPicker.Group trigger row and ColorPicker.Dialog picking surface swapped in via `children`.ColorSliderA single-channel color control on a native `<input type="range">`, pairing a track painting the channel's gradient with a thumb reporting the current value and an `<output>` for its formatted display.ColorSwatchA static preview box rendering one color value as a filled, shaped swatch, backed by a fixed checkerboard so a translucent value always reads correctly against whatever sits behind it on the page rather than blending invisibly away.ColorSwatchPickerA set of mutually exclusive color options built from native `<input type="radio">` controls sharing one grouping name, rendered as a `role="radiogroup"` host wrapping ColorSwatchPicker.Swatch instances styled from each input's own `:checked` state.ColorWheelA circular hue picker.ComboBoxA single-line text control paired with a native list of suggested values.CommandA bordered panel for searching and choosing among a list of actions.CommandPaletteThe app's ⌘K command palette.ComposerThe box a person writes a chat message in.ComposerSubmitIsland holding a composer's send control.ConfirmA convenience wrapper composing a two-control confirmation prompt in one call.ContextMenuA menu surface that opens at a right-click's pointer position, composing Menu's popover styling and `role="menu"` wiring directly so its rows read and behave exactly like a standard menu's.ContributionGraphA year of per-day counts at a glance, as a real `<table role="grid">`.ContributorWallA project's contributors as a dense mosaic of square tiles.CopyButtonClient island: the copy button a code block carries.CountdownThe days, hours, minutes and seconds left until a launch, a sale's end or an event's doors, as one `<time>` naming the moment.CrosshairA small "+" mark centred on a corner of its positioned ancestor, the registration mark a ruled page draws where a rail meets a rule.CtaGroupA horizontal cluster of primary and secondary landing actions that wraps onto a second row when the container is narrow.CurriculumA course or book curriculum.DangerZoneThe last section of a settings page, holding the actions that cannot be undone.DateFieldA convenience wrapper composing a labeled, described, and validated date field in one call.DatePickerA labeled date field built on DateField, with a DatePicker.Group row for composing more than one field into a single control.DateRangePickerA paired-field date range control built on DateField.DescriptionA short passage of supporting copy beneath a form control, styled at the library's default text size and the neutral muted foreground color.DetailSheetA non-modal side sheet showing one record whose open state lives in the URL.DialogA modal surface built on the native `<dialog>` element, opened and closed declaratively through Invoker Commands (`commandfor`/`command`) instead of a JavaScript-tracked open state.DialogDismissClient island that closes the modal `<dialog>` it renders inside on a backdrop press or a followed link.DiffA change to read and review.DisclosureA single expand/collapse section built on the native `<details>` and `<summary>` elements.DocsFeedbackThe quiet "Was this helpful?" closing a docs page, as a plain form that posts without JavaScript.DocsFooterThe compact footer closing a docs page inside the content and rail columns.DocsHubThe docs home.DocsLayoutThe shell a docs page composes into.DocsNavA docs sidebar drawn from a DocsTree.DocsNavToolsIsland that finishes a DocsNav in the browser.DocsNotFoundThe body of a docs 404, drawn inside the docs shell so the sidebar stays.DocsPageHeaderThe opening of every docs page in one order.DocsPagerThe previous and next links closing a docs page.DrawerA preset of Dialog docked flush against one physical edge of the viewport, sized to fill that edge, sliding into place from it on open and fading out with a short drift toward it on close.DrawnChartAn animated figure for a measured claim.DropIndicatorA thin bar rendered in the gap between two items of a reorderable list, marking where a dragged item will land.DropZoneA styled drop target for files.EditorLayoutThe frame of a document editor.EmptyA placeholder for a product section that has nothing to show, typed by why.EpisodePlayerAn episode player for a podcast or a read-aloud letter.EventTickerAn animated feed of events landing one by one, newest on top, with the exception surfaced.FanOutDiagramAn animated picture of one thing serving many.FaqBandFAQ band: a LandingHeader over one or two Accordion columns.FeatureOne landing claim cell.FeatureBandMid-page feature band.FieldErrorA native form field's validation message, styled at a small size in the danger foreground color.FileTreeA project layout drawn as a tree.FileTriggerA pressable surface that opens the platform's file picker, backed by a native `<input type="file">` wrapped in a `<label>` so the platform itself handles the trigger-to-picker wiring.FilterBarThe toolbar above a list.FilterMenuOne filterable popover list for every "pick from many" trigger.FlowDiagramAn animated walk through one automated run.FormThe wrapper every multi-field layout starts from.GanttA Gantt chart.GridListAn interactive row list built from plain, already-ordered markup.GroupA visual and semantic wrapper binding a cluster of related controls into one unit.HeaderA small, muted section label rendered inside a native `<header>` element.HeadingA section title rendered inside the native heading element matching its semantic depth.HeadingScopeEstablishes an ambient heading level read by nested headings and scopes.HighlightText with the stretches a search matched marked.HoverCardA supplementary detail panel that appears beside a trigger on hover or keyboard focus.IconWellA rounded square tile that holds a landing metaphor glyph — a quiet hairline ring by default, or a brand-tinted badge.ImagePlaceholderThe shared foundation for a fixed-size image-with-fallback box.InputA single-line native form field for free text entry, rendered as a bordered, rounded `<input>` whose border, background.InstallCommandThe install line a docs page prints for its packages, spelled by each package manager in a synced set of code tabs.InstallTabsPackage-manager or language chooser plus a command row.ItemA single-line content row composing a leading media slot, a title and description content slot, and a trailing action slot along one horizontally centered line.KeyboardA keyboard-shortcut hint rendered inside a native `<kbd>` element, drawn as the key it names.KeyboardHelpThe keyboard cheat sheet `?` opens.LabelA caption for a form control, associated with its field either through the native `for`/`id` relationship (set `htmlFor` to the field's `id`) or by wrapping the control as a child.LabelChipA label an issue, pull request or record carries, drawn as a small pill in the label's own colour.LandingHeaderEyebrow, chapter title, and lead copy that open a landing band.LandingHeroAbove-the-fold landing band.LandingSectionA landing-page band.LinkA native anchor for inline navigation, always underlined so its affordance never rests on color alone.LinkButtonA navigation action styled to read as a button rather than inline text.ListBoxA run of selectable option rows sharing one native grouping name.LogoA brand mark rendered as a fixed-size, softly rounded host stacking an image layer, an initials fallback.LogoCloudAdopter marks for landing proof strips: a centered row, a row spread across the measure, or a ruled grid of cells.LogoSentenceSocial proof as a sentence.LogViewerA CI job's log.MarkerAn inline row calling out a small event between two message rows.MarqueeAn endless horizontal ticker for logo walls and short proof lines.MenuA menu surface anchored to whatever invoker opens it, riding the same native Popover API Popover does, sized to its own content and padded around a compact stack of Menu.Item rows, Menu.Separator dividers.MenubarA horizontal row of top-level triggers modeled on a native application's menu bar.MergeBoxThe box at the end of a pull request that answers "can I merge, and if not, why?".MessageA single conversational turn in a message log.MessageScrollerA scrollable frame for a conversational message log.MeterA styled native `<meter>` gauge paired with an optional value label, stacked in a single column so a caption can sit alongside the bar it measures.ModalA pre-animated preset of Dialog.MotionLoopA frame for any looping illustration that runs longer than five seconds.NavigationMenuA row of top-level navigation triggers, each either a plain link or a button that opens a floating panel of related links.NavLinkAn inline text link for site navigation, colored through a semantic color role and underlined to read as a link among surrounding prose.NextStepsThe hand-written "Next steps" block that ends a guide.NumberFieldA numeric field pairing a native `<input type="number">` control with a decrement and an increment button, all three sharing one bordered, rounded frame.OptimisticToggleClient island: an on/off control (read, saved, starred) that is a real POST form.OtpFieldA one-time-code field.OverlayArrowA small pointer glyph anchoring an overlay surface.PageActionsThe "Copy page" split button a docs page carries in its header.PageHeaderThe top of an app screen in one order.PaginationA navigation landmark for moving between pages of results, composing a `<nav>` root, an `<ul>` list, and `<li>` items around two interactive parts.PhoneFanThree phones on a landing stage.PhoneFrameHardware chrome for a phone screenshot or live screen on a landing.PlanNoticeThe quiet box under a help page's title that says which plan or role a feature needs.PopoverA floating surface anchored to whatever element opened it, built entirely on the native Popover API.PriceListA menu or price list for a landing.PricingBandPricing band: a LandingHeader over a grid of plan cards, each with a price, a checked feature list and an action.ProductFrameWindow or device chrome around a product screenshot or staged UI, optionally set on a tinted stage.ProgressBarA styled native `<progress>` control paired with an optional value label, stacked in a single column so a caption can sit alongside the bar it describes.ProofStripTrust band placed immediately after a hero: a LogoCloud, a StatStrip, or both stacked.PropertyListLabel/value rows for one record's properties, as a `<dl>`.PropsTableThe reference table a docs page prints for props, options, fields or a request body.RadioGroupA set of mutually exclusive options built from native `<input type="radio">` controls sharing one grouping name, rendered as a `role="radiogroup"` host wrapping a run of RadioGroup.Radio instances.RailsFrames landing content in a ruled column.RangeCalendarA calendar surface for choosing a start and end date as one connected range, sharing every header, grid.RangePickerThe time range for a dashboard, kept in the URL.RelativeTimeA `<time>` that reads "2m ago" for the last week and a date after it, with the absolute local time and UTC in its title.ResizableA split-pane layout arranging Resizable.Panel and Resizable.Handle parts along a shared axis.ReviewThreadA conversation anchored to lines of a change.RotatingTextA word in a headline that cycles through alternatives.SaveBarClient island: the sticky "Unsaved changes · Discard · Save" bar a long form shows once it differs from how it loaded.SaveStatusClient island: the quiet persistence signal an editor shows beside its publish button.ScrollAreaA scrollable region wrapping long or overflowing content.ScrollSceneA scroll-linked scene.SearchFieldA single-line search field.SectionA grouping wrapper for a set of related items inside a listbox, menu, or combobox.SegmentedStageA pill segmented control over a media stage, the switcher a hero puts between its calls to action and the product.SelectA native `<select>` styled as a bordered, rounded field and progressively upgraded with customizable-select rendering.SelectionBarThe floating bar at the foot of a list.SelectionIndicatorA small marker that stays invisible, while still reserving its own layout slot.SentinelRowA decorative sentinel row shared by every list-shaped compound component that renders a trailing loading placeholder.SeparatorA thin visual divider marking a boundary between two groups of content.SequenceDiagramAn animated sequence diagram.SettingsLayoutThe frame of a settings area.SettingsSectionOne group of settings: a title and description beside or above a bordered card of 1px-ruled rows.SharedElementA plain host that carries a stable view-transition identity across separate page loads.SheetAn edge-docked panel that renders through Dialog.ShortcutListThe list a keyboard-shortcuts panel shows.SidebarAn application shell's primary navigation rail, composed from a layout root, a collapsible rail, a main-content inset.SiteFooterSite footer for landing and product pages.SiteHeaderThe landing site's top bar.SkeletonLoading placeholders.SliderA single-value range control built on a native `<input type="range">`, paired with a track that draws its own background rail and a live fill bar.SparklineA row-sized trend line with no axes.SpinnerA busy indicator rendered as a rotating icon inside a `role="progressbar"` host, colored by a semantic color role and sized by a size variant.SplitTwo-column landing band content: prose on one side and the media it describes on the other.SplitView`sidebar | list | detail` on one screen, built on Resizable.SponsorWallA tiered sponsor and partner wall.StatCardStat cards for a dashboard.StatStripA numeric proof strip for landing bands.StatusDotA small coloured dot that names a record's state beside its label.StatusStripA row of per-period bars, such as 90 days of uptime.StepListLanding steps for a “how it works” band.StepsNumbered steps for a docs procedure.SwitchA native checkbox styled and wired as an on/off switch.TabBarA phone's bottom tab bar.TabbedStageTabs that reveal one media panel at a time, as a row of pills over the stage or as a rail of steps beside a sticky stage.TableA tabular data display built on the native `<table>`.TableOfContentsIsland.TabsA set of tabs whose active view comes from routing rather than tracked selection state.TagGroupA labeled set of pill-shaped tags with an optional dismiss control per tag, composing a grouping host, a wrapped list.TestimonialBandTestimonial band.TextA run of small body copy, styled at the library's default text size and the neutral muted foreground color.TextAreaA multi-line native form field for free text entry, rendered as a bordered, rounded `<textarea>` that shares Input's border, background.TextFieldA convenience wrapper composing a labeled, described, and validated field in one call.TimeFieldA convenience wrapper composing a labeled, described, and validated time field in one call.TimelineA record's activity as an ordered list.ToastA transient notification panel reporting the outcome of an action, in one of five semantic tones.ToastsThe island that draws the page's one toast stack.ToggleButtonA native `<button>` that reflects an on/off state through its own `aria-pressed` attribute instead of a separate boolean prop.ToolbarA bordered, tinted panel that groups a set of interactive controls — buttons, toggles, menus — along a single axis.TooltipA small floating label identifying an otherwise unlabeled control or adding a supplementary hint, riding the same `popover`-attributed host and CSS anchor positioning contract as Popover.TreeA hierarchical list of nodes built from nested `<details>` and `<summary>` elements.TypedTerminalAn animated terminal that proves "you write this, it does that".TypesetA typography layer wrapping already-rendered markdown or HTML content and supplying every size, weight, spacing, and color decision through three custom properties.UiLabelChips that name a product's controls inside help-doc prose.UsageEstimateA usage-pricing calculator that needs no script.VideoPlayerA video player built on the browser's own `<video>`.ViewOptionsThe "Display" popover beside a list.YouTubeEmbedA YouTube player sized to its container.
Mixins
Composable behaviour on a host — each tile sketches what the mixin does.
- ↑↓
activeDescendantKeys appShellControls- ✓
ariaChecked - Attach
attachmentTrigger autoRefresh- ←→
calendarKeys - ‹›
carouselControls - RGB
channelSync - characterCount
characterCount - 42%
chartTooltip - ×
clearField codeTabsSync- collapseStream
collapseStream colorAreaDrag- #3B82F6
colorPreview colorWheelDrag- Filter…
comboboxFilter - Command…
commandFilter - ⌘J
commandKeys - ↵Esc
composerSend - Type DELETEDEL
confirmPhrase contextMenu- ←→
contributionGraphKeys copyFeedbackcopyFromUrlcopyPermalinkcopyToClipboard- ↑↓↵
detailSheetKeys dialogDismissdismissdocsNavToolsdragReorder- Drop
dropZone dualRange- Esc
escapeLink - ↑↓↵
filterMenuKeys frameRefresh- submit
frameSubmit ganttToday- ↑↓↵
gridListKeys - broken
headingLevelFallback - ⌘K
hotkey - broken
imageFallback - + DoneDone⌄
invokerFields - ?
keyboardHelp - map
keymap - ↑↓↵
listboxKeys liveFramelogViewerControllerlongPress- ▶0:42
mediaSync - ↑↓↵
menubarKeys - ↑↓↵
menuKeys messageFollowmirrorSelectedOptionoptimisticToggleSync- 194|
otpSlots - RGB
paletteController persistpressToggle- ←→
rangePickerKeys rangePreviewresizeHandlerevealStream- ↑↓↵
rowNavigation saveBarSyncsaveShortcutsaveStatusSyncselectionBarSyncsortablesplitViewHandle- ↑↓↵
splitViewKeys splitViewToggle- ↑↓↵
statusStripKeys - −3+
stepper - STREAM_COLLAPSE_ATTRIBUTE
STREAM_COLLAPSE_ATTRIBUTE - STREAM_COLLAPSED_ATTRIBUTE
STREAM_COLLAPSED_ATTRIBUTE - STREAM_CURRENT_ATTRIBUTE
STREAM_CURRENT_ATTRIBUTE - STREAM_END_ATTRIBUTE
STREAM_END_ATTRIBUTE - STREAM_HIDDEN_ATTRIBUTE
STREAM_HIDDEN_ATTRIBUTE - STREAM_PAUSE_ATTRIBUTE
STREAM_PAUSE_ATTRIBUTE - STREAM_PENDING_ATTRIBUTE
STREAM_PENDING_ATTRIBUTE streamTarget- → submitted
submitOnChange - → submitted
submitOnClose - Tab
tabKeys tableSelection- →
themeToggle - Undo
toastAction - ×
toastClose toastHoldtoastStacktocSpytrackHostNode- Go to file…
treeFilter - ↑↓↵
treeKeys - Looks good
validate - ▶CC⚙
videoPlayerSync viewerTimeviewTransition- live
whileLive
Behaviors
Session and model classes as state machines.
- idlepoliteassertive
Announcer - browse⇄select
CalendarModel - idledraggingdrop↩ back to idle
DragSession - querymatchempty
FilterModel - wait⇄tick
RefreshSchedule - idleresizingsettle↩ back to idle
ResizeSession - detached⇄following
ScrollFollowModel - nonesinglemulticlear → none
SelectionModel - ⌘Sbindmatchfirebind
ShortcutRegistry - enqueuevisibledismiss↩ back to enqueue
Toaster
Animations
Motion factories running live in the tile.
Styles
Layout and chrome recipes as wireframes.
balancedColumnsbalancedGrid- 3 children→ 3 columns
byChildCount cardGridcardMedia- pad
cardPadding chartPalette- rₒ = rᵢ + pad
concentricRadius - Display
displayHeading - Release
eyebrow fieldStackLayoutfloatingSurfacegraphicHostStylehitAreaiconTileinteractiveTransitionlandingBandTonelandingContainer- StartDocs
landingCtaChrome Emphasised line in the band.
landingEmphasislandingHairlineA short lead that settles under the headline.
landingLead- ↕ space
landingSectionSpace landingSlowSpinlandingSurface- DayWeekMonth
legendToggle logoCloudMark- output · 24ms
outputCaptionText panelChromerangeThumbAppearancertlAwareGradientDirection- DayWeekMonth
segmentedItem segmentedTracksemanticColorPanelsurfaceControlsurfaceInset- ↑→↓←
surfacePadding - theme
themeScope toastStackStyle