Material Design UI Kit

28 components inspired by Google's Material Design — elevation shadows, a confident blue accent and clean, medium-weight typography.

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

Material buttons

Primary Button

Material · Buttons

<button class="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-medium hover:shadow-lg shadow-md transition-all">
  Primary Button
</button>

Outline Button

Material · Buttons

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

Icon Button

Material · Buttons

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

Material · Buttons

<button class="bg-blue-100 text-blue-800 rounded-full px-5 py-2.5 text-sm font-medium shadow-md transition-all">
  Get Started
</button>

Material badges

Status Pill

Material · Badges

Active

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

Notification Badge

Material · Badges

🔔 3

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

Material cards

Basic Card

Material · Cards

Card Title

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

<div class="max-w-xs bg-white  rounded-lg p-5 shadow-md">
  <h3 class="text-sm font-medium 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

Material · Cards

Jane Doe

Product Designer

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

Pricing Card

Material · Cards

Pro

$19/mo

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

Material alerts

Info Alert

Material · Alerts

ℹ️ This is an informational message.

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

Success Alert

Material · Alerts

✅ Your changes have been saved.

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

Warning Alert

Material · Alerts

⚠️ This action can't be undone.

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

Error Alert

Material · Alerts

⛔ Something went wrong.

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

Material forms

Text Input

Material · Forms

<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-lg text-sm border-b-2 border-slate-300 focus:border-blue-600 text-slate-900 placeholder:text-slate-400 focus:outline-none rounded-none" />

Textarea

Material · Forms

<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-lg text-sm border-b-2 border-slate-300 focus:border-blue-600 text-slate-900 placeholder:text-slate-400 focus:outline-none rounded-none"></textarea>

Select Dropdown

Material · Forms

<select class="w-48 px-3 py-2 rounded-lg text-sm border-b-2 border-slate-300 focus:border-blue-600 text-slate-900 placeholder:text-slate-400 focus:outline-none rounded-none">
  <option>United States</option>
  <option>South Korea</option>
  <option>Japan</option>
</select>

Checkbox

Material · 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-blue-600" />
  <span class="text-sm text-slate-900">I agree to the terms</span>
</label>

Toggle Switch

Material · 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-300 peer-checked:bg-blue-600 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>

Material feedback

Spinner

Material · Feedback

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

Progress Bar

Material · Feedback

<div class="w-48 h-2.5 rounded-full bg-blue-100 overflow-hidden">
  <div class="h-full w-2/3 rounded-full bg-blue-600"></div>
</div>

Skeleton Loader

Material · 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-blue-100"></div>
  <div class="h-4 w-1/2 rounded bg-blue-100"></div>
</div>

Toast Notification

Material · Feedback

Vanilla JavaScript — no framework required.

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

Material overlays

Accordion / FAQ Item

Material · 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  bg-white p-4 group">
  <summary class="cursor-pointer text-sm font-medium 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

Material · Overlays

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

<button id="modal-open" class="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-medium hover:shadow-lg transition-all">
  Open Modal
</button>
<dialog id="modal" class="rounded-lg p-6 w-full max-w-xs bg-white  text-slate-900 backdrop:bg-black/50">
  <h3 class="text-sm font-medium 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-medium bg-blue-600 text-white">Confirm</button>
  </div>
</dialog>

Tooltip

Material · 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  text-slate-900 text-xs font-medium">?</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-800 text-white text-[10px] px-2.5 py-1.5">
    Helpful tooltip text
  </span>
</span>

Material avatars

Circle Avatar

Material · Avatars

<div class="w-10 h-10 rounded-full bg-blue-600 shadow-md flex items-center justify-center text-white text-sm font-medium">AB</div>

Avatar Group

Material · Avatars

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

Avatar with Status

Material · Avatars

<div class="relative inline-block">
  <div class="w-10 h-10 rounded-full bg-blue-600 shadow-md flex items-center justify-center text-white text-sm font-medium">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 Material-style design?

Material Design treats the interface as layers of paper. Surfaces are white with soft shadows that grow on hover (shadow-md to shadow-lg) to show elevation, primary actions use a saturated accent (blue-600 here), and type is medium weight rather than bold. This kit captures that feel with plain Tailwind utilities — it is inspired by Material, not an official implementation.

When to use it

Pick this style when users expect a familiar, app-like interface: admin panels, Android-adjacent web apps, internal tools and forms-heavy products. Because the patterns are widely recognized, users understand them without learning a new visual language.

Accessibility notes

Shadows alone don't tell users that a card is clickable, so combine elevation with clear labels or icons. Keep the accent color at a contrast of at least 4.5:1 with white text (blue-600 passes), and keep focus rings visible on elevated surfaces.

← Back to the full UI Component Library

Frequently Asked Questions

Is this the official Material UI library?↓

No. These are free Tailwind CSS components inspired by Material Design's elevation, color and typography. For an official implementation, see Google's Material Web components.

How do I show elevation in Tailwind?↓

Use the shadow scale — shadow-sm for resting surfaces, shadow-md for raised elements and shadow-lg on hover — and add transition-shadow for a smooth change.

Can I change the accent color?↓

Yes. Replace blue-600 and its hover shade with any color that keeps at least 4.5:1 contrast against the button text.

Last updated: November 7, 2026