AC-01Four variants, three colours
Button
Filled, outlined, text and accent variants in three colours and three sizes, with optional icons.
Components
19 components, each live below exactly as it ships on npm. Copy the import line for the ones you need.
01 / Actions
AC-02Inline or standalone
Link
An inline or standalone link in four sizes, with an optional leading icon.
AC-03Click to toggle
Chip
Filter chips that toggle, and removable input chips for tags and recipients.
02 / Inputs
IN-01Type to see the label float
Text input
A labelled field with supporting text, error state, and required or optional markers.
IN-02Grows with your brief
Textarea
Multi-line input that follows the same label and supporting-text pattern.
IN-03Press Enter to search
Search bar
A compact search field with a trailing search icon and room for a leading slot.
IN-04Arrow keys work too
Number input stepper
Numeric input with increment and decrement buttons, min, max and step.
IN-05Space toggles
Checkbox
A form-ready checkbox with checked, indeterminate and disabled states.
IN-06Arrow keys move selection
Radio group
A radio group with arrow-key navigation, used with cc-radio options.
IN-07Takes effect immediately
Switch
An on/off toggle for settings that take effect immediately.
IN-08Pick a date
Calendar
A single-date picker with min and max dates and locale-aware labels.
03 / Feedback
FB-01Status colours stay put
Alert
Success, info, warning and error messages, in subtle or solid style, optionally dismissible.
FB-02Ten hues, three styles
Badge
Status labels and counters in ten colours, as text, number or dot.
FB-03Hover or focus the button
Tooltip
A short hint anchored to its trigger with CSS anchor positioning.
05 / Overlays
OV-01Opens a modal
Dialog
A modal dialog with heading, description and action buttons. Closes with Escape.