Components

• GroundThe ground scope: paints one of the 16 presets as a band, a field or a face, publishes its primary, secondary and action scales and its container edge, and tells every component inside it which role map to use.
• IconA Material Symbols Rounded UI icon, drawn as inline SVG and filled in `currentColor`, so it takes the ink of the part it sits in.
• SeparatorA line that divides content and is announced to assistive technology, built on Base UI's Separator.
• PatternsTextures and fills as shared CSS classes, drawn in SVG and colored only by the scope's role variables, so they follow the ground and the page mode on their own.
• StickerHand art with a die-cut halo: an 8 px face around the drawing's silhouette that lifts it off any ground without a shadow, a tint or a blur.
• ButtonA Base UI Button in three builds: the solid action, its outline twin and the text button.
• LinkA semantic anchor in six builds: inline links in running text, standalone module links, navigation, stretched titles and note references.
• ToggleA Base UI Toggle for immediate, reversible changes to how content is shown, and the Toggle Group that joins toggles into a segmented control or a set of filter chips.
• TabsBase UI Tabs for 2–6 peer panels on one page: a caps tab list with a current bar, and one panel per tab.
• Navigation MenuThe desktop site navigation on Base UI's Navigation Menu: caps bar items whose triggers open `dropdown`, `overview` or `index` panels under the bar. Inside a Navigation Bar it runs from `--ds-nav-inline-n-above` (1024 px by default); below it the drawer takes over.
• MenuActions on the current object, sort orders and view options, in an anchored list opened by a Button.
• Context MenuA shortcut menu on power-user app surfaces (table rows, editors, canvases), opened by right-click, Shift+F10 or the Menu key.
• MenubarAn application row of menus, for app screens with three or more command groups.
• BreadcrumbWhere the page sits in the hierarchy: one line of caps crumbs, the LTA staircase in the section bar, or a single parent link.
• PaginationMoving through long paged lists: Previous and Next around the page numbers, or around a "Page 5 of 12" count.
• SearchWhere typing beats browsing: site and collection search on Base UI's Autocomplete, in a `search` landmark. Don't make search the only route into content that also needs browsing, and pick a Combobox for one value from a long known set.
• ToolbarA compact row of tools acting on one object or region: a list's count and actions, formatting controls, a context bar or the controls under a figure.
• FormAnything submitted: a Base UI Form, one column at `--size-sm`, with an error summary at the top and an action row at the end. Instant-apply settings are switches, not forms.
• FieldWires every control's label, description and error: a Base UI Field.Root whose label, control, description and error stack in that order.
• FieldsetGroups controls that answer one question, such as an address or a contact preference, and every checkbox or radio group. A native `fieldset` on Base UI's Fieldset, with its legend first.
• InputSingle-line text, email, password, telephone and URL, plus multi-line text: Base UI's Input (Field.Control) in the field box, inside a `Field`.
• Number FieldQuantities, amounts and measurements where stepping helps: Base UI's NumberField, inside a `Field`. Codes that only look like numbers, such as postcodes and phone numbers, are Input; approximate values across a range use Slider.
• SelectOne choice from a known list of about 5–15 options: Base UI's Select, inside a `Field`. For 2–4 options that should stay visible use Radio or Toggle Group; for long or searchable lists use Combobox.
• ComboboxA value chosen from a filtered list, such as countries, species or members, with optional multiple selection shown as chips: Base UI's Combobox, inside a `Field`. Under about 15 options, use Select.
• AutocompleteFree text with suggestions, where any value is valid and suggestions help, such as addresses: Base UI's Autocomplete, inside a `Field`. Site and collection search compose it in Search.
• CheckboxA Base UI Checkbox in its own label row for independent yes/no choices, and the Checkbox Group that lays out a visible set.
• RadioA Base UI Radio in its own label row, always inside a Radio Group, for one choice from 2–7 visible options, quiz answers included.
• SwitchA Base UI Switch for a setting that takes effect the moment it flips, with a label and an "On" / "Off" state word.
• SliderA Base UI Slider for approximate values where relative position matters: an outlined track, an ink indicator and a tall thumb, with the value always shown in text.
• AlertThe inline status block: a start bar, a status glyph, a word lead, the message and an optional action, on the page ground with no fill.
• BadgeA short static label, a state or a count, in a 24 px pill with caps. Never a button, and never more than three words.
• TagThe topic tag: a subject icon plus a caps label, with no container. It marks taxonomy and can link to its topic.
• ChipThe removable chip: a chosen value with its × in its own hit area. The Combobox's multiple selection and filter UIs that list the active filters share it; the filter chip that toggles a filter is the Toggle's `chip` variant.
• AvatarA Base UI Avatar for a person or organization beside a byline, comment, member list or account menu: a circular photo, seal or initials face inside a ring.
• AccordionA Base UI Accordion for long reference content scanned by heading: ruled rows, each a heading that opens its panel in place.
• CollapsibleA Base UI Collapsible for one in-place disclosure, such as "Show 12 more" under a truncated list, led by the LTA disclosure glyph.
• DialogA modal panel for a focused sub-task: a titled top bar, a scrolling body and an action bar, framed and never dimmed.
• Alert DialogConfirms a destructive or irreversible action: a status glyph, a question, one consequence sentence and two named actions.
• PopoverNon-modal content anchored to a trigger: a small details panel, a definition, or the touch stand-in for a tooltip.
• Preview CardA hover preview of a linked page: a thumbnail, the page's title, one line of description and its domain.
• TooltipA Base UI Tooltip that names an icon-only control or gives a brief, non-essential hint, on the overlay scope's face.
• ToastA brief confirmation ("3 items removed — Undo") or a non-blocking notice, docked as a full-width bar at the bottom edge.
• ProgressA Base UI Progress for task completion: uploads, step position in a form, reading or quiz progress. It is drawn in ink only, and the value is always shown in text.
• MeterA Base UI Meter for a measured value in a known range: storage used, strength, a level on an ordinal scale. Never use a meter for an unbounded value.
• Scroll AreaA Base UI Scroll Area for bounded overflow: popup lists, dialog bodies, wide tables, carousels and removable-chip rows. Never use it for a whole page or a reading column.
• Navigation BarThe site header on every page, as a `header` landmark. It holds a skip link first, the green brand strip, an optional utility row, then the bar: the logo as a home link, the Navigation Menu, icon Buttons, the one action and, below the inline threshold, the drawer's menu Button.
• Nav DrawerPrimary navigation below `--ds-nav-inline-n-above`: a menu Button that opens a modal Dialog sheet in the header's own scope. It is the single owner of the mobile drawer; put it in the Navigation Bar's `drawer` slot, which removes it from the inline threshold.
• Section BarThe page's one sticky bar on deep content: where you are, and a jump to any section. It swaps with the header and the two never stack.
• Announcement BarOne short, authored site notice per page: a closure, a deadline, shipping terms, a policy change. An `aside` labelled "Announcement" with at most one link, an optional countdown and an optional dismiss button. It is not a Toast, never rotates messages and never carries form feedback.
• Section HeaderOpens every band or module in a fixed order: what kind of thing this is (the eyebrow), what it says (the heading), why it matters (the lede) and where to go next ("See all").
• Section DividerThe seam between two bands, or a pause inside one: the straight cut, the seam rules, and the page's one shaped edge, the hill or the hatched fringe.
• HeroThe page's one opening statement and its single `h1`. A plain title block counts. Never text on a photo, never sized to the viewport, never animated on load.
• CTA BlockThe page's one closing invitation before the footer: "Keep exploring", "Find a land trust near you". A labelled section with a kicker, a centered serif headline, an optional support line, the action pill with its leading arrow and an optional outline twin. The saturated and deep kinds are a CTA field, an inset Ground of `kind="field"`, never a full-bleed band.
• NewsletterEmail capture, as the inline footer form, the royal straddle card, a band or a ruled row. A Base UI Form with a labelled email Field (and optionally a postcode and a consent Checkbox) and a submit Button; the result renders in place, in a polite live region. Never a pop-up, a multi-step flow or a modal.
• MarqueeA thin, loud scene divider of brand phrases or short social proof, once per page. It is static only: it never scrolls, clips or animates, so it has no motion control and renders the same under every motion preference.
• FooterThe page's heaviest band and closing summary, required on every page: action blocks, the sitemap, contact, social links, the legal row and the colophon. It absorbs everything other systems float: back to top, accessibility settings, chat and feedback are footer links.
• CardA self-contained, linked item among peers, composed from semantic HTML with optional parts for media, title, meta, body and footer.
• Card GridA grid of 3–24 peer cards to browse, with an optional header, filter bar, result count and "See all" footer.
• CarouselSecondary items in short horizontal space: similar species, related products, photo sets, at least four. Base UI has no carousel, so it is composed from a Scroll Area in its `rail` kind (the track and a 2 px progress rail), a list of slides each labelled "n of N", Previous and Next buttons and a polite count. It never autoplays or loops, and it has no dots.
• FAQThe FAQ module: 4–15 independent questions and answers in a ruled Base UI Accordion, under a chapter-stack header.
• Feature GridTwo to six parallel benefits or ways to take part, each a sentence or two, led by an icon, a numeral or a small drawing.
• Spec SheetAn item's measurable attributes: a species' size and range, a product's dimensions, a menu item's allergens. It wraps the spec grid and the leader list with the sheet's heading, lead, provenance line, optional figure and "More Details" disclosure. The densest module: rules only, no ornament.
• QuoteTestimonials, pull quotes, blockquotes and epigraphs, composed as a `figure` with a `blockquote` and a `figcaption`.
• PricingHonest, comparable prices: inline prices, sales, menu figures, plan tiers and wholesale matrices.
• StatOne to four headline numbers with meaning, each with a label, a unit and a source. The block is pure type and draws no chart; a trend belongs in a separate chart with its data table.
• Index RowsRuled listing rows for many same-kind items: articles, events, reports, ranked topics and related pages. The default listing on reading pages.
• TimelineOrdered milestones on a dashed spine, a dated agenda of sessions, or a date-block schedule.
• ProfilePeople and organizations: bylines, author blocks, bio rows and team grids, with Avatar portraits.
• Empty StateWhat to show when a list, grid, search or collection has no items: what is empty, why, and what to do next.
• TableA three-rule data table in a Scroll Area: a heavy frame above and below, a header rule, hairline rows and no verticals, stripes or tints.
• Spec ListA key-value list with dotted leaders: the label, a leader of true round dots, then the value right-aligned in tabular figures. Use it for prices, dimensions and printable forms.
• Spec GridThe signature spec list: a boxless grid of cells, each topped by a hairline at column width, with a caps label over its value. Use it for an item's measurable attributes: a species' size and range, a product's dimensions.
• FigureA `figure` with its caption: the media, then a label ("Fig. 3"), a caption that says what to notice, and a credit in the same run. Text never sits on the image.
• ChartA chart figure built with Recharts: bars, columns, lines and stacked areas in the chart's two scales plus patterns, with direct labels, a restyled tooltip and a data table.
• MapA map figure with the pan-and-zoom interactive map of v1: a caps title, an in-flow zoom toolbar, numbered index markers, a caption, and an index that lists every place.