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.1The accent-family picker — five dots, each painted by the token it offers. No hex in the code..swatchesAttentionPanelbetav1.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..attentionBadgestablev1.0A status badge: the state of an entity in one word, mono and upper-case. It names a state, not an action..badgeBreadcrumbsstablev1.1Breadcrumbs 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.2The 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..btnCalloutbetav1.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..calloutCardstablev1.0The 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.2A 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..checkCodestablev1.1Code inside a sentence, or a listing across the full width. The listing scrolls sideways — the one thing hand-rolled listings get wrong..codeConfirmstablev1.1Confirmation dialog built on IngotModal. The computed impact may withdraw the confirmation through useConfirmVeto..confirmDisclosurebetav1.1A collapsible section in a side panel — a label, a count and a body that hides. The browser holds the state, not React..disclosureDrawerbetav1.4A 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.0The 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.2A labelled text field: label, hint, error, unit. For hand-written forms whose fields cannot be derived from anything..fieldFieldInputstablev2.1A single field driven by its kind. It knows no domain — the option set and the translations both come from the caller..inputFormstablev2.1Declarative 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.0The closing call to action — a dark block with two actions. The primary one is accented and the block's only colour..ctaMarketingFaqbetav1.0A 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.7The 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..megamenuMenubetav1.0A list of actions in a popover: the menu roles, arrows, Home/End, type-ahead, separators and the danger tone..menuMetricsbetav1.4The 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.4Dialog 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.0Picking 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.2A page hint with a bulb: a click highlights the elements the hint talks about, once..pagehintPageLayoutbetav1.0The 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.0Pagination under a table. Controlled by the caller — it never fights the table over who owns the page state..pagerPopoverbetav1.1A panel anchored to what opened it: position, click outside, Escape and focus return, all in one place..popoverProviderbetav1.1The 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.0One choice out of several, all visible at once. A native group, so the arrows and form submission work by themselves..radiogroupRowActionsstablev1.2The 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.3A 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.0A top-bar switch — two or three short choices side by side, the selected one lifted onto the surface. The choice applies at once..segSelectbetav1.2Picking 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.3A named group of links with one of them active. The primitive owns the navigation label and aria-current — not an agreement to remember them..sidenavStepCardbetav1.3A 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.0A setting that takes effect the moment it is flipped. Not a checkbox: that one waits for the form to be saved..switchTablestablev1.1A 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.0Switching views of the same record: controlled value/onChange, the tablist role and arrow keys between tabs..tabsToastbetav1.5An 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.0A short description next to a control, on hover and on focus. It describes, it does not name — the control keeps its own name..tooltipTopNavbetav2.10The 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.