Skip to main content
B BRUT UI Read the docs →
v0.1 MIT 0 deps

Stop rounding
your corners.

BRUT is a neo-brutalist UI kit. Hard borders. Hard shadows. No gradients, no blurs, no apologies. One CSS file, one tiny JS runtime, every component you actually need.

Drop two files into your <head>. That's the whole install.

By the numbers

Small bundle. Big shadow.

Components 30+

Visual + interactive, all in one bundle.

Design tokens 80+

Colors, type, spacing, shadows, motion.

Dependencies 0

No npm. No CDN. No build step.

Bundle ~12kb

Gzipped CSS + JS combined.

What you get

Every primitive. None of the fluff.

Buttons, inputs, switches, alerts, badges, dialogs, tabs, OTPs, tags, comboboxes, ratings, file drops — built once, themable through tokens.

Buttons

Hard offset shadow on hover. No tweens, just snap.

Inputs

Field wrapper, label, hint, and error all token-driven.

Selection

Switch, checkbox, radio — all keyboard-friendly.

Alerts
Saved. Your changes shipped.
!
Heads up. Token rotates Friday.

Four severities. Hard ink icon block.

Badges
Live Draft New Pro

Status chips. Solid fill, hard border.

Typography

Section label

Loud headings.

Display + sans + mono, on a single rhythm.

A full type scale with semantic helpers.

Install

Two files. Done.

No build step. No config. Drop the bundles into your HTML and start composing with utility classes and data-brut hooks.

<!-- index.html -->
<link rel="stylesheet" href="brut.css"/>
<script src="brut.js"></script>

<!-- compose with classes + data hooks -->
<button class="brut-btn brut-btn--primary">
  Get loud
</button>
Soft UIs whisper. BRUT shouts.

Ship it

Ready to get loud.

Open the docs, copy a snippet, paste into your project. That's the workflow.