Components

The kit's index — every primitive with one sentence and its status; each page is one click away from here or from the menu.

Overview

Every component has its own page: a live demo, when to use it and when not to, properties for developers, accessibility, and the tokens it stands on. Two badges sit next to the name — status and version — and both are a promise, not decoration.

  • stable — the interface does not change without notice. A change that would break callers is rare and deliberate: it arrives with a higher version and with the call sites already updated.
  • beta — the shape is still being found. Breaking changes are expected here, and that is exactly what the badge is for: it says whether you can build on it yet.
  • The version moves every time the component changes. Changed behaviour under an unchanged version is a silent lie to everyone who already built on it.
  • The order in the menu runs from the smallest building block to composed wholes, not alphabetically.
  • If a primitive is missing, it is added to the kit — it is not born inside a screen.

The list

AccentSwatchesbetav1.3The accent-family picker — five dots, each painted by the token it offers. No hex in the code..swatchesActionBarbetav1.1The bar under a long form: what the reader came to do, still in reach after the ninth field. Sticky, not floating — it covers nothing..actionbarAppFramebetav1.1The frame of a whole screen: the bar at the top, the width the content may reach, and the margins beside it. The width is a token, not a number each application repeats..appframeAttentionPanelbetav1.1The dark “what this screen wants from you now” panel at the head of an overview. The one place where a card is darker than the page — a signal that holds only while it stays rare..attentionAvatarbetav1.1A person, as small as a person gets: initials, or their picture. The initials come from the caller..avatarBadgestablev1.2A status badge: the state of an entity in one word, mono and upper-case. It names a state, not an action..badgeBreadcrumbsstablev1.2Breadcrumbs above the page header — where I am and how to get back. In an application without a side menu they carry all the orientation in depth..crumbsButtonstablev1.6The button, in seven variants — and with as="a" a link that looks like one. A variant carries the meaning of the action, not a colour, and in dark mode it holds a contrast that copied classes lose..btnCalloutbetav2.0A tinted block with a note, a warning or a consequence, next to the content it belongs to. The tone also decides whether a screen reader announces it..calloutCardstablev2.1The surface content sits on — not a border drawn around it. It can lift on hover, and once per screen it can invert to dark..cardCheckboxbetav1.4A checkbox with a label — a filter, a consent, a behaviour toggle. The label is part of the primitive: clicking the text toggles, and the accessible name comes for free..checkChipbetav1.3A small pill the user operates: a filter switched on, or a chosen value with a cross. A control, not a label..chipCodestablev1.1Code inside a sentence, or a listing across the full width. The listing scrolls sideways — the one thing hand-rolled listings get wrong..codeColumnsbetav1.1Two or three columns inside a block, and one rule for when they stop being columns. A form, a record's detail, cards side by side..columnsConfirmstablev1.5Confirmation dialog built on IngotModal. The computed impact may withdraw the confirmation through useConfirmVeto..confirmCountPillbetav1.0A round pill with a number in it: how many records are behind the thing it stands next to. Zero is drawn..countpillDescriptionListbetav1.0The facts about a record: label, value, label, value. A semantic `dl`, not a grid of spans — and facts are mono..dlDisclosurebetav1.2A collapsible section in a side panel — a label, a count and a body that hides. The browser holds the state, not React..disclosureDrawerbetav1.9A side panel for editing with the same accessibility floor as the dialog: focus trap, ESC, scroll lock and focus returned to the trigger..drawerEmptyStatestablev1.0Empty state: one sentence saying what is missing, optionally why, and optionally the affordance that changes it..emptyEyebrowbetav1.2The small uppercase mono caption above the thing it names — a nav group, a metric, a step. One drawing for an idiom that used to be hand-drawn ten ways..eyebrowFieldstablev1.6A labelled text field: label, hint, error, unit. For hand-written forms whose fields cannot be derived from anything..fieldFieldInputstablev2.3A single field driven by its kind. It knows no domain — the option set and the translations both come from the caller..inputFormstablev2.3Declarative form: it takes fields and values and reports changes through onChange. The shape of the form is data, not JSX..formIconstablev1.4Interface icons — one set, one technique. Line art on a 24×24 grid, inked by the parent's text colour, scaled by a single number.[data-icon]Liststablev1.1A list: bullets, numbers, or no markers at all. The marker and the indent belong together, and one place decides both..listMarketingComparisonbetav1.1A row-wise “today / with the platform” comparison. The pair belongs to one task, so it cannot be written apart..cmpMarketingCtabetav1.1The closing call to action — a dark block with two actions. The primary one is accented and the block's only colour..ctaMarketingFaqbetav1.1A FAQ — the question is a control announcing its state, the answer a named region. The answer is required..faq-itemMarketingPricingbetav1.0Plan cards — a price, a feature list and an action at the foot. The featured card gets an outline and a badge, not an accent frame..pricecardMarketingSectionHeadbetav1.1A marketing section head — the heading on the left, the lede on the right. One element carries the accent: the eyebrow..section-headMarketingSegmentsbetav1.0The “who it is for” cards — a title, a sentence and shop-floor tags. No tag carries the accent; that belongs to the section head..seg-cardMarketingStepsbetav1.0The “how it works” steps — cards with an ordinal and an arrow to the next one. The number comes from the order, it is not typed..stepMarketingTribetav1.0Three features under a section head — an icon in an accent frame, a title and a sentence. One frame, panels split by a hairline..triMegaMenubetav2.9The opened section menu from the top bar — groups of links in one or two columns, plus a preview column describing the item under the cursor and under focus alike..megamenuMenubetav2.0A list of actions in a popover: the menu roles, arrows, Home/End, type-ahead, separators and the danger tone..menuMetricsbetav1.5The numbers by which a screen is read at a glance. Two densities of one component: a strip below the header and a compact cluster inside it..metricstripModalstablev1.9Dialog shell with the accessibility floor built in: focus trap, ESC, scroll lock, aria-modal and focus returned to the trigger..modalOpIconstablev1.2A manufacturing-operation icon. It takes the drawing from the operation library, the ink from the process category and the key from the database — it invents nothing.[data-op-icon]OptionCardbetav1.2Picking one option where the choice needs an explanation. The whole card is clickable, and the selected option is marked by an accent outline..optioncardPageHeaderstablev1.0The screen header: a title, a sentence under it, actions on the right. One home for the type spec, and it drags no router along..pageheadPageHintbetav1.5A page hint with a bulb: a click highlights the elements the hint talks about, once..pagehintPageLayoutbetav2.1The rhythm of a page's content — the gap between blocks, a reading width, and an optional side index. What every screen used to assemble by hand..pagePaginationbetav1.1Pagination under a table. Controlled by the caller — it never fights the table over who owns the page state..pagerPopoverbetav1.2A panel anchored to what opened it: position, click outside, Escape and focus return, all in one place..popoverProviderbetav1.2The dictionary of the few labels the kit says itself — undo, the hint bulb, the secret field. English without a provider; lang="cs" switches the whole set..providerRadioGroupbetav1.2One choice out of several, all visible at once. A native group, so the arrows and form submission work by themselves..radiogroupRowActionsstablev1.5The actions of a single table row — 28×28 px icon buttons at the end of the row, with no frame and no visible label..rowactionsSearchInputbetav1.6A search field above a list — the first element of the filter bar. It filters, it does not search: it narrows the list on every keystroke, no Search button..searchSectionstablev1.0A screen section: a heading at the right level and an anchor that sits on the section, not on the heading..sectionSegmentedbetav1.2A top-bar switch — two or three short choices side by side, the selected one lifted onto the surface. The choice applies at once..segSelectbetav1.4Picking one value from a short set — a filter above a list, a variant switch in settings. A native select: keyboard, screen reader and mobile behaviour for free..selectSideNavstablev1.4A named group of links with one of them active. The primitive owns the navigation label and aria-current — not an agreement to remember them..sidenavSkeletonbetav1.0The shape of what is coming, while it is still coming. It holds the room, so nothing jumps when the data lands..skeletonSpinnerbetav1.1Something is happening and there is no shape to hold. The second choice after a skeleton — and the name is required..spinnerStepCardbetav1.7A card for one step of a multi-step setup. It carries its state permanently — a finished step stays finished and is still visible when you come back to the screen..stepcardSwitchbetav1.3A setting that takes effect the moment it is flipped. Not a checkbox: that one waits for the form to be saved..switchTablestablev1.5A table whose columns are data. It keeps scope on the headers, one source of truth for colSpan, and never hides row actions behind hover..table-wrapTabsbetav1.3Switching views of the same record: controlled value/onChange, the tablist role and arrow keys between tabs..tabsToastbetav2.2An imperative toast for the result of an action: toast({ text, undo }) announces what happened without stopping the work..toastToolbarbetav1.0A filter bar above a list. It owns spacing, wrapping and the right end; what filters, the caller supplies..toolbarTooltipbetav1.1A short description next to a control, on hover and on focus. It describes, it does not name — the control keeps its own name..tooltipTopNavbetav2.13The application's top bar — brand, sections and account in one row. The admin has no side menu; content below the bar runs full width..topnavUserMenubetav1.0The account menu — identity, organisation, preferences, sign-out. The primitive holds the structure, not the content: layers separated by a rule, and a row of “label on the left, control on the right”..usermenu

How a component page is built

The order of blocks on a component page is fixed so that it can be read out of order — every reader knows where their block starts.

  1. the name with its status and version
  2. one sentence
  3. the live demo and its code
  4. when to use it and when not to
  5. properties
  6. accessibility
  7. tokens
  8. translations

Three different readers take three different parts out of that order:

For the designer

The demo and the when-to-use section. A decision, not a catalogue of variants.

For the developer

The properties and the demo's live code — exactly the code the page renders.

For review

Accessibility and the token list — they say what a token change would break.