Minimal UI Kit

A complete set of 28 clean, neutral components — buttons, cards, forms, alerts, modals and more — with thin borders, restrained color and plenty of whitespace.

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

Minimal buttons

Primary Button

Minimal · Buttons

<button class="bg-slate-900 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-slate-800  transition-all">
  Primary Button
</button>

Outline Button

Minimal · Buttons

<button class="bg-transparent text-slate-900 border border-slate-200 rounded-lg px-4 py-2 text-sm font-medium transition-colors">
  Outline Button
</button>

Icon Button

Minimal · Buttons

<button class="w-10 h-10 flex items-center justify-center rounded-full bg-white border border-slate-200 text-slate-900  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

Minimal · Buttons

<button class="bg-slate-100 text-slate-700 rounded-full px-5 py-2.5 text-sm font-semibold  transition-all">
  Get Started
</button>

Minimal badges

Status Pill

Minimal · Badges

Active

<span class="inline-flex items-center gap-1.5 bg-slate-100 text-slate-700 rounded-full px-2.5 py-1 text-xs font-semibold">
  <span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
  Active
</span>

Notification Badge

Minimal · Badges

🔔 3

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

Minimal cards

Basic Card

Minimal · Cards

Card Title

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

<div class="max-w-xs bg-white border border-slate-200 rounded-lg p-5 ">
  <h3 class="text-sm font-semibold text-slate-900 mb-1">Card Title</h3>
  <p class="text-xs text-slate-500">A short description of this card's content goes here.</p>
</div>

Profile Card

Minimal · Cards

Jane Doe

Product Designer

<div class="max-w-xs bg-white border border-slate-200 rounded-lg p-5  flex items-center gap-4">
  <div class="w-12 h-12 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 text-sm font-semibold">JD</div>
  <div>
    <p class="text-sm font-semibold text-slate-900">Jane Doe</p>
    <p class="text-xs text-slate-500">Product Designer</p>
  </div>
</div>

Pricing Card

Minimal · Cards

Pro

$19/mo

<div class="max-w-xs bg-white border border-slate-200 rounded-lg p-6 ">
  <p class="text-xs font-semibold text-slate-900 uppercase tracking-wide mb-2">Pro</p>
  <p class="text-2xl font-semibold text-slate-900 mb-4">$19<span class="text-sm text-slate-500">/mo</span></p>
  <button class="w-full bg-slate-900 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-slate-800 transition-all">
    Choose Plan
  </button>
</div>

Minimal alerts

Info Alert

Minimal · Alerts

ℹ️ This is an informational message.

<div class="max-w-xs bg-white border border-slate-200 rounded-lg p-3 text-xs text-slate-900 ">
  ℹ️ This is an informational message.
</div>

Success Alert

Minimal · Alerts

✅ Your changes have been saved.

<div class="max-w-xs bg-white border border-slate-200 rounded-lg p-3 text-xs text-slate-900 ">
  ✅ Your changes have been saved.
</div>

Warning Alert

Minimal · Alerts

⚠️ This action can't be undone.

<div class="max-w-xs bg-white border border-slate-200 rounded-lg p-3 text-xs text-slate-900 ">
  ⚠️ This action can't be undone.
</div>

Error Alert

Minimal · Alerts

⛔ Something went wrong.

<div class="max-w-xs bg-white border border-slate-200 rounded-lg p-3 text-xs text-slate-900 ">
  ⛔ Something went wrong.
</div>

Minimal forms

Text Input

Minimal · Forms

<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-lg text-sm border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:ring-1 focus:ring-slate-400" />

Textarea

Minimal · Forms

<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-lg text-sm border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:ring-1 focus:ring-slate-400"></textarea>

Select Dropdown

Minimal · Forms

<select class="w-48 px-3 py-2 rounded-lg text-sm border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:ring-1 focus:ring-slate-400">
  <option>United States</option>
  <option>South Korea</option>
  <option>Japan</option>
</select>

Checkbox

Minimal · 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-indigo-600 focus:ring-slate-400" />
  <span class="text-sm text-slate-900">I agree to the terms</span>
</label>

Toggle Switch

Minimal · 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-full bg-slate-200 peer-checked:bg-slate-900 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>

Minimal feedback

Spinner

Minimal · Feedback

<div class="w-8 h-8 rounded-full border-4 border-slate-200 border-t-slate-600 animate-spin"></div>

Progress Bar

Minimal · Feedback

<div class="w-48 h-2.5 rounded-full bg-slate-200 overflow-hidden">
  <div class="h-full w-2/3 rounded-full bg-slate-900"></div>
</div>

Skeleton Loader

Minimal · 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-slate-200"></div>
  <div class="h-4 w-1/2 rounded bg-slate-200"></div>
</div>

Toast Notification

Minimal · Feedback

Vanilla JavaScript — no framework required.

<button id="toast-trigger" class="bg-slate-900 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-slate-800 transition-all">
  Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-lg bg-white border border-slate-200 text-slate-900 text-sm font-medium px-4 py-3 ">
  ✅ Saved successfully!
</div>

Minimal overlays

Accordion / FAQ Item

Minimal · 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-lg border border-slate-200 bg-white p-4 group">
  <summary class="cursor-pointer text-sm font-semibold text-slate-900 list-none flex items-center justify-between">
    Refund policy?
    <span class="text-slate-500 group-open:rotate-180 transition-transform">▾</span>
  </summary>
  <p class="text-xs text-slate-500 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>

Modal Dialog

Minimal · Overlays

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

<button id="modal-open" class="bg-slate-900 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-slate-800 transition-all">
  Open Modal
</button>
<dialog id="modal" class="rounded-lg p-6 w-full max-w-xs bg-white border border-slate-200 text-slate-900 backdrop:bg-black/50">
  <h3 class="text-sm font-semibold mb-2">Confirm action</h3>
  <p class="text-xs text-slate-500 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-lg text-xs font-medium text-slate-500">Cancel</button>
    <button class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-slate-900 text-white">Confirm</button>
  </div>
</dialog>

Tooltip

Minimal · 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-full bg-white border border-slate-200 text-slate-900 text-xs font-semibold">?</button>
  <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-lg bg-slate-900 text-white text-[10px] px-2.5 py-1.5">
    Helpful tooltip text
  </span>
</span>

Minimal avatars

Circle Avatar

Minimal · Avatars

<div class="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 text-sm font-semibold">AB</div>

Avatar Group

Minimal · Avatars

<div class="flex -space-x-2">
  <div class="w-9 h-9 rounded-full bg-slate-200 border-2 border-white flex items-center justify-center text-slate-600 text-xs font-semibold">A</div>
  <div class="w-9 h-9 rounded-full bg-slate-200 border-2 border-white flex items-center justify-center text-slate-600 text-xs font-semibold">B</div>
  <div class="w-9 h-9 rounded-full bg-slate-200 border-2 border-white flex items-center justify-center text-slate-600 text-xs font-semibold">C</div>
  <div class="w-9 h-9 rounded-full bg-white border border-slate-200 border-2 border-white flex items-center justify-center text-slate-500 text-xs font-semibold">+5</div>
</div>

Avatar with Status

Minimal · Avatars

<div class="relative inline-block">
  <div class="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 text-sm font-semibold">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 minimal UI design?

Minimal design strips an interface down to what users need: a near-monochrome slate palette, one-pixel borders, modest corner radii and lots of whitespace. Hierarchy comes from typography and spacing rather than decoration, so the content stays in focus. It is the look behind many developer tools, documentation sites and SaaS dashboards.

When to use it

Choose the minimal kit when content density matters, when your product already has strong photography or data visualizations, or when you want a neutral base to customize with a single brand color. Because it avoids heavy effects, it renders fast and ages well.

Accessibility notes

Minimal palettes can slide into low contrast. Keep body text at slate-600 or darker on white, and make sure thin input borders are visible enough — a 3:1 contrast ratio is recommended for UI component boundaries. Keep a strong focus ring so keyboard users can track their position.

← Back to the full UI Component Library

Frequently Asked Questions

What makes a UI design minimal?↓

A restrained palette, thin borders, consistent spacing and very little decoration such as shadows or gradients. Hierarchy comes from type size, weight and whitespace.

Can I add my brand color to the minimal kit?↓

Yes. Replace slate-900 on primary buttons and focus rings with your brand color, and keep everything else neutral so the accent stands out.

Is minimal design good for accessibility?↓

It can be, as long as contrast stays high. Light-gray text and faint borders are the most common pitfalls, so check them with a contrast checker.

Last updated: November 7, 2026