Neobrutalism components

The primary way to trigger an action. Lifts on hover and sinks into its shadow on press. Also available as a class helper for links.

A compact label for status, category, or counts.

A bordered surface with a hard shadow, composed from header, title, description, content, and footer parts.

A message box for info, success, warnings, and errors, with an icon, title, and optional actions.

A single-line text field with an optional leading icon and an invalid state.

A multi-line text field in the same frame as Input, with an invalid state and vertical resizing.

A native select in the brutal frame, so phones get their own picker and keyboards work as expected.

A native checkbox with a hard-edged face. Fully compatible with forms.

Native radio buttons with a brutal face, grouped in a fieldset whose legend names the choice.

An on/off toggle for settings that apply immediately. Works controlled or uncontrolled.

Switch between related panels of content without leaving the page.

Expandable sections built on native details and summary, with an exclusive mode that keeps one open at a time.

A modal built on the native dialog element: focus is trapped, Esc closes it, and focus returns to the trigger.

A short hint on hover and keyboard focus that Esc dismisses, linked to its trigger for screen readers.

Shows how far along a task or quota is.

Placeholder shapes for content that's loading, sized with classes and pulsing only when motion is allowed.

Initials in a toned circle, plus a group that overlaps them.

Wrap any SVG icon to animate it on hover, on a loop, or once on mount. Seven presets, pure CSS, and off under reduced motion.