Brandkit

Library

Components

Brand teams ship campaign pages, product teams ship app screens, and the two drift apart. Brandkit keeps them on one set of tokens and one accessible component library, so a rebrand is a data change, not a rewrite.

16 componentsReact 19WAI-ARIA APGTested with Testing Library and axe

Actions

  • Button

    Triggers an action. Four variants share one size scale and the density token.

    APG: Button

  • IconButton

    A square button with only an icon. The label is required and shown as a tooltip.

    APG: Button

Forms

  • TextField

    A labelled input with help text and validation messages tied to the field.

  • Combobox

    Pick one option from a list you can filter by typing. Only listed options are valid.

    APG: Combobox (list autocomplete)

  • Checkbox

    A yes or no choice inside a form, with an optional mixed state.

    APG: Checkbox

  • RadioGroup

    Choose exactly one of a few visible options.

    APG: Radio Group

  • Switch

    An on or off setting that takes effect immediately.

    APG: Switch

Overlays

  • Dialog

    A modal window for a focused task. Focus is trapped and returned on close.

    APG: Dialog (Modal)

  • Tooltip

    A short hint that appears on hover and keyboard focus.

    APG: Tooltip

  • Popover

    A non-modal panel opened from a button, for small groups of controls.

    APG: Disclosure

Navigation

  • Tabs

    Switch between related panels in place. Composed from TabList, Tab and TabPanel.

    APG: Tabs (automatic activation)

Feedback

  • Toast

    A brief, non-blocking message after an action, with an optional undo.

  • Skeleton

    A placeholder shape while content loads.

Data display

  • Table

    A data table with sortable columns, row headers and a keyboard-scrollable container.

    APG: Sortable Table

  • Card

    A surface that groups related content, with an optional header, actions and footer.

  • Badge

    A short status label. Every tone is contrast checked in every theme.