Neubrutalism UI Kit

28 loud, high-contrast components with thick black outlines, hard offset shadows, square corners and flat, saturated colors.

28 components · live preview · copy as HTML or JSX · free for commercial use

Neubrutalism buttons

Primary Button

Neubrutalism · Buttons

<button class="bg-yellow-300 text-black rounded-none px-4 py-2 text-sm font-black hover:shadow-[2px_2px_0px_#000] hover:translate-x-[2px] hover:translate-y-[2px] shadow-[6px_6px_0px_#000] transition-all">
  Primary Button
</button>

Outline Button

Neubrutalism · Buttons

<button class="bg-transparent text-black border-[3px] border-black rounded-none px-4 py-2 text-sm font-black transition-colors">
  Outline Button
</button>

Icon Button

Neubrutalism · Buttons

<button class="w-10 h-10 flex items-center justify-center rounded-none bg-white border-[3px] border-black text-black shadow-[6px_6px_0px_#000] transition-colors" aria-label="Settings">
  <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
    <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
  </svg>
</button>

Accent Button

Neubrutalism · Buttons

<button class="bg-pink-400 text-black rounded-none px-5 py-2.5 text-sm font-black shadow-[6px_6px_0px_#000] transition-all">
  Get Started
</button>

Neubrutalism badges

Status Pill

Neubrutalism · Badges

Active

<span class="inline-flex items-center gap-1.5 bg-pink-400 text-black rounded-none px-2.5 py-1 text-xs font-black">
  <span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
  Active
</span>

Notification Badge

Neubrutalism · Badges

🔔 3

<span class="relative inline-flex">
  <span class="inline-flex items-center justify-center w-9 h-9 rounded-none bg-white border-[3px] border-black text-slate-700">🔔</span>
  <span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-pink-400 text-black text-[10px] font-black">3</span>
</span>

Neubrutalism cards

Basic Card

Neubrutalism · Cards

Card Title

A short description of this card's content goes here.

<div class="max-w-xs bg-white border-[3px] border-black rounded-none p-5 shadow-[6px_6px_0px_#000]">
  <h3 class="text-sm font-black text-black mb-1">Card Title</h3>
  <p class="text-xs text-slate-700">A short description of this card's content goes here.</p>
</div>

Profile Card

Neubrutalism · Cards

Jane Doe

Product Designer

<div class="max-w-xs bg-white border-[3px] border-black rounded-none p-5 shadow-[6px_6px_0px_#000] flex items-center gap-4">
  <div class="w-12 h-12 rounded-none bg-orange-300 border-[3px] border-black shadow-[3px_3px_0px_#000] flex items-center justify-center text-black text-sm font-black">JD</div>
  <div>
    <p class="text-sm font-black text-black">Jane Doe</p>
    <p class="text-xs text-slate-700">Product Designer</p>
  </div>
</div>

Pricing Card

Neubrutalism · Cards

Pro

$19/mo

<div class="max-w-xs bg-white border-[3px] border-black rounded-none p-6 shadow-[6px_6px_0px_#000]">
  <p class="text-xs font-black text-black uppercase tracking-wide mb-2">Pro</p>
  <p class="text-2xl font-black text-black mb-4">$19<span class="text-sm text-slate-700">/mo</span></p>
  <button class="w-full bg-yellow-300 text-black rounded-none px-4 py-2 text-sm font-black hover:shadow-[2px_2px_0px_#000] hover:translate-x-[2px] hover:translate-y-[2px] transition-all">
    Choose Plan
  </button>
</div>

Neubrutalism alerts

Info Alert

Neubrutalism · Alerts

ℹ️ This is an informational message.

<div class="max-w-xs bg-white border-[3px] border-black rounded-none p-3 text-xs text-black shadow-[6px_6px_0px_#000]">
  ℹ️ This is an informational message.
</div>

Success Alert

Neubrutalism · Alerts

✅ Your changes have been saved.

<div class="max-w-xs bg-white border-[3px] border-black rounded-none p-3 text-xs text-black shadow-[6px_6px_0px_#000]">
  ✅ Your changes have been saved.
</div>

Warning Alert

Neubrutalism · Alerts

⚠️ This action can't be undone.

<div class="max-w-xs bg-white border-[3px] border-black rounded-none p-3 text-xs text-black shadow-[6px_6px_0px_#000]">
  ⚠️ This action can't be undone.
</div>

Error Alert

Neubrutalism · Alerts

⛔ Something went wrong.

<div class="max-w-xs bg-white border-[3px] border-black rounded-none p-3 text-xs text-black shadow-[6px_6px_0px_#000]">
  ⛔ Something went wrong.
</div>

Neubrutalism forms

Text Input

Neubrutalism · Forms

<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-none text-sm bg-white border-[3px] border-black text-black placeholder:text-slate-500 shadow-[4px_4px_0px_#000] focus:outline-none" />

Textarea

Neubrutalism · Forms

<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-none text-sm bg-white border-[3px] border-black text-black placeholder:text-slate-500 shadow-[4px_4px_0px_#000] focus:outline-none"></textarea>

Select Dropdown

Neubrutalism · Forms

<select class="w-48 px-3 py-2 rounded-none text-sm bg-white border-[3px] border-black text-black placeholder:text-slate-500 shadow-[4px_4px_0px_#000] focus:outline-none">
  <option>United States</option>
  <option>South Korea</option>
  <option>Japan</option>
</select>

Checkbox

Neubrutalism · Forms

I agree to the terms

<label class="inline-flex items-center gap-2 cursor-pointer">
  <input type="checkbox" class="w-4 h-4 rounded text-black" />
  <span class="text-sm text-black">I agree to the terms</span>
</label>

Toggle Switch

Neubrutalism · Forms

Uses Tailwind's peer/peer-checked variants — no JavaScript required.

<label class="inline-flex items-center cursor-pointer">
  <input type="checkbox" class="peer sr-only" />
  <div class="w-11 h-6 rounded-none bg-white border-[3px] border-black peer-checked:bg-yellow-300 peer-checked:border-[3px] peer-checked:border-black transition-colors relative">
    <div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
  </div>
</label>

Neubrutalism feedback

Spinner

Neubrutalism · Feedback

<div class="w-8 h-8 rounded-full border-4 border-black border-t-yellow-300 animate-spin"></div>

Progress Bar

Neubrutalism · Feedback

<div class="w-48 h-2.5 rounded-none bg-white border-[3px] border-black overflow-hidden">
  <div class="h-full w-2/3 rounded-none bg-yellow-300"></div>
</div>

Skeleton Loader

Neubrutalism · Feedback

Simplified static placeholder shown here; the base catalog's Skeleton Loader has the animated shimmer.

<div class="w-48 space-y-2">
  <div class="h-4 w-3/4 rounded bg-white border-[3px] border-black"></div>
  <div class="h-4 w-1/2 rounded bg-white border-[3px] border-black"></div>
</div>

Toast Notification

Neubrutalism · Feedback

Vanilla JavaScript — no framework required.

<button id="toast-trigger" class="bg-yellow-300 text-black rounded-none px-4 py-2 text-sm font-black hover:shadow-[2px_2px_0px_#000] hover:translate-x-[2px] hover:translate-y-[2px] transition-all">
  Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-none bg-white border-[3px] border-black text-black text-sm font-black px-4 py-3 shadow-[6px_6px_0px_#000]">
  ✅ Saved successfully!
</div>

Neubrutalism overlays

Accordion / FAQ Item

Neubrutalism · Overlays

Refund policy? ▾

30-day money-back guarantee, no questions asked.

Uses the native <details>/<summary> elements — no JavaScript required.

<details class="w-48 rounded-none border-[3px] border-black bg-white p-4 group">
  <summary class="cursor-pointer text-sm font-black text-black list-none flex items-center justify-between">
    Refund policy?
    <span class="text-slate-700 group-open:rotate-180 transition-transform">▾</span>
  </summary>
  <p class="text-xs text-slate-700 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>

Modal Dialog

Neubrutalism · Overlays

Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.

<button id="modal-open" class="bg-yellow-300 text-black rounded-none px-4 py-2 text-sm font-black hover:shadow-[2px_2px_0px_#000] hover:translate-x-[2px] hover:translate-y-[2px] transition-all">
  Open Modal
</button>
<dialog id="modal" class="rounded-none p-6 w-full max-w-xs bg-white border-[3px] border-black text-black backdrop:bg-black/50">
  <h3 class="text-sm font-black mb-2">Confirm action</h3>
  <p class="text-xs text-slate-700 mb-4">Are you sure you want to continue?</p>
  <div class="flex gap-2 justify-end">
    <button id="modal-close" class="px-3 py-1.5 rounded-none text-xs font-black text-slate-700">Cancel</button>
    <button class="px-3 py-1.5 rounded-none text-xs font-black bg-yellow-300 text-black">Confirm</button>
  </div>
</dialog>

Tooltip

Neubrutalism · Overlays

Uses Tailwind's group/group-hover variants — no JavaScript required.

<span class="relative inline-block group">
  <button class="w-8 h-8 flex items-center justify-center rounded-none bg-white border-[3px] border-black text-black text-xs font-black">?</button>
  <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-none bg-yellow-300 border-2 border-black text-black text-[10px] px-2.5 py-1.5">
    Helpful tooltip text
  </span>
</span>

Neubrutalism avatars

Circle Avatar

Neubrutalism · Avatars

<div class="w-10 h-10 rounded-none bg-orange-300 border-[3px] border-black shadow-[3px_3px_0px_#000] flex items-center justify-center text-black text-sm font-black">AB</div>

Avatar Group

Neubrutalism · Avatars

<div class="flex -space-x-2">
  <div class="w-9 h-9 rounded-none bg-orange-300 border-[3px] border-black shadow-[3px_3px_0px_#000] border-2 border-white flex items-center justify-center text-black text-xs font-black">A</div>
  <div class="w-9 h-9 rounded-none bg-orange-300 border-[3px] border-black shadow-[3px_3px_0px_#000] border-2 border-white flex items-center justify-center text-black text-xs font-black">B</div>
  <div class="w-9 h-9 rounded-none bg-orange-300 border-[3px] border-black shadow-[3px_3px_0px_#000] border-2 border-white flex items-center justify-center text-black text-xs font-black">C</div>
  <div class="w-9 h-9 rounded-none bg-white border-[3px] border-black border-2 border-white flex items-center justify-center text-slate-700 text-xs font-black">+5</div>
</div>

Avatar with Status

Neubrutalism · Avatars

<div class="relative inline-block">
  <div class="w-10 h-10 rounded-none bg-orange-300 border-[3px] border-black shadow-[3px_3px_0px_#000] flex items-center justify-center text-black text-sm font-black">JS</div>
  <span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>

What is neubrutalism?

Neubrutalism (neo-brutalism) takes the rawness of brutalist web design and makes it playful: three-pixel black borders, solid shadows with no blur (shadow-[6px_6px_0px_#000]), sharp corners and bright fills like yellow-300 and pink-400. Buttons slide into their shadow on hover, which makes them feel physically clickable.

When to use it

It works well for indie products, landing pages, creative portfolios, newsletters and brands that want to stand out from polished corporate design. It is less suited to enterprise software or long reading experiences, where heavy outlines become tiring.

Accessibility notes

Neubrutalism is naturally strong on contrast — black borders and text on light, saturated fills are easy to see. Watch for very bright color combinations that cause eye strain, keep long text at a readable weight, and add a distinct focus style, because a default focus ring can blend into the thick borders.

← Back to the full UI Component Library

Frequently Asked Questions

What is the difference between brutalism and neubrutalism?↓

Classic web brutalism is deliberately raw and often barely styled. Neubrutalism keeps the bold outlines and flat layout but adds bright colors, offset shadows and friendly typography.

How do I make a neubrutalist shadow in Tailwind?↓

Use an arbitrary shadow with no blur, such as shadow-[6px_6px_0px_#000], together with a thick black border like border-[3px] border-black.

Is neubrutalism accessible?↓

Generally yes, thanks to its high contrast. Avoid overly saturated backgrounds behind long text and make focus states distinct from the black borders.

Last updated: November 7, 2026