Components(137)

Design system primitives: buttons, badges and other building blocks our sections are composed from. Install one and reuse it across your whole project.

Rating

Rating Filter

Star rows for minimum-rating filtering in the familiar n-and-up pattern. Clicking the active row clears the selection.

Price

to

Min/Max Range Filter

Paired number inputs for open-ended ranges: either side can stay empty, so users can filter by only a minimum or only a maximum.

Fit

32
14
21

Radio Filter

Single-select radio list with optional result counts. Clicking the active option clears the selection, so the filter is always escapable.

Size

Multiselect Filter

Dropdown with checkbox rows and a selection-count badge. Keeps many-option filters compact in toolbars where a checkbox list would not fit.

Brand

Combobox Filter

Searchable dropdown for very long option lists like brands. Type to narrow options, select one or many, and see result counts inline.

Size

Chips Filter

Multi-select button chips for compact option sets like sizes. Works controlled or uncontrolled.

Category

24
18
9
12

Checkbox Filter

Multi-select checkbox list with optional result counts. Works controlled or uncontrolled, designed for filter sidebars and toolbars.

Color Picker

OKLCH-native colour picker: a gamut-aware lightness and chroma plane, RGB and OKLCH tabs whose rows show their own colour ramp on hover, a field that accepts hex, rgb() or oklch(), screen eyedropper and preset swatches.

Magnetic Button

A magnetic button that is pulled toward the cursor on hover and springs back on leave.

Scramble Button

A scramble text button that cycles random glyphs on hover for developer and tech landings.

Corner Brackets Button

A monospace button framed by corner brackets that spring outward on hover.

Copy to Clipboard Button

A click to copy button for install commands, API keys, and coupon codes with copied feedback.

Shine Sweep Button

A premium pill button with a diagonal shine sweep on hover for pricing and upgrade actions.

Expanding Reveal Button

An expanding icon button that reveals its label on hover or focus for compact layouts.

Hold to Confirm Button

A hold to confirm button that fills while held and fires only when the hold completes.

Letter Roll Button

A pill button whose label rolls up letter by letter with a staggered hover animation.

Pressable Button

A neobrutalist button with a hard offset shadow that lifts on hover and presses in on click.

Play Button

A video play button with a circular play seal, label, and duration for showreels and product demos.

Avatar Stack Button

A social proof button with an avatar stack inside the pill and a trailing arrow.

Split Button

A split button with a main action and a separate secondary trigger for menus and options.

Icon Button

An accessible icon button with a required label, three sizes, and circle or square shape.

Async Loading Button

An async loading button that shows a spinner and disables itself while a promise resolves.

Underline Arrow Button

A minimal text button with an animated underline and arrow for lightweight calls to action.

Seal Arrow Button

An uppercase pill button with a trailing seal arrow chip and an optional link.

Markdown version