Hard shadows, thick borders, flat color.
Usage#
<div class="brutalist-card p-6">RAW</div>The classes#
| Class | Purpose |
|---|---|
brutalist-card | Hard-shadow card |
brutalist-btn | Offset-shadow button |
Compose with utilities#
<div class="brutalist-card p-6 rotate-1 hover:rotate-0 transition">Playful</div>Customization#
Every component is built from theme tokens (colors, blur radii, shadows). Redefine tokens in your config and the whole family restyles. For structural changes, copy the rules into your own layer and edit freely.
Accessibility#
- Hard shadows must not be mistaken for focus rings — keep real focus styles
Related#
components/index|Components hub · themes/index|Themes · recipes/index|Recipes