401+ Free Components · Tailwind + CSS

CSS UI Component Library

Interactive previews with copy-paste Tailwind & CSS code. No signup, no dependencies.

⌘K

401+components

2code formats

100%free forever

All Components

Every component in one place 401 components

✏️

Buttons

Forms & Inputs

Primary, secondary, outline, ghost, and destructive button variants.

<button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700">Primary</button>
<button class="rounded-lg bg-zinc-800 px-4 py-2 text-sm font-semibold text-white hover:bg-zinc-900">Secondary</button>
<button class="rounded-lg border border-blue-600 px-4 py-2 text-sm font-semibold text-blue-600 hover:bg-blue-50">Outline</button>
<button class="rounded-lg px-4 py-2 text-sm font-semibold text-zinc-600 hover:bg-zinc-100">Ghost</button>
<button class="rounded-lg bg-red-500 px-4 py-2 text-sm font-semibold text-white hover:bg-red-600">Danger</button>

✏️

Button Sizes

Forms & Inputs

XS through XL button sizes for every context.

<button class="rounded-lg bg-blue-600 px-2.5 py-1 text-xs font-semibold text-white">XS</button>
<button class="rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-semibold text-white">SM</button>
<button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white">MD</button>
<button class="rounded-lg bg-blue-600 px-5 py-2.5 text-base font-semibold text-white">LG</button>
<button class="rounded-lg bg-blue-600 px-6 py-3 text-lg font-semibold text-white">XL</button>

⚡

Alerts

Feedback

Success, warning, error, and info alert banners with icon.

Success: Action completed successfully.

Warning: Review before proceeding.

Error: Something went wrong.

Info: Here is some information.

<div class="flex items-start gap-3 rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800">
  <svg .../> <div><span class="font-semibold">Success: </span>Action completed.</div>
</div>
<div class="flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
  <svg .../> <div><span class="font-semibold">Error: </span>Something went wrong.</div>
</div>

⚡

Badges & Tags

Feedback

Soft, outline, and live-dot badge variants in multiple colors.

NewActivePendingRejectedBetaDefaultOutline Live

<span class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-semibold text-blue-700">New</span>
<span class="inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-700">Active</span>
<span class="inline-flex items-center rounded-full border border-blue-300 px-2.5 py-0.5 text-xs font-semibold text-blue-600">Outline</span>
<span class="inline-flex items-center gap-1 rounded-full bg-emerald-500 px-2.5 py-0.5 text-xs font-semibold text-white">
  <span class="h-1.5 w-1.5 rounded-full bg-white"></span> Live
</span>

📊

Avatars

Display

Initials avatars in multiple sizes, status dot, and stacked group.

<!-- Initials avatar -->
<div class="h-10 w-10 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white font-bold">JD</div>
<!-- With online status -->
<div class="relative">
  <div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">AB</div>
  <span class="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 ring-2 ring-white"></span>
</div>
<!-- Avatar group -->
<div class="flex -space-x-2">
  <img class="h-9 w-9 rounded-full ring-2 ring-white" src="..." />
  <div class="h-9 w-9 rounded-full bg-zinc-200 ring-2 ring-white flex items-center justify-center text-xs font-bold">+4</div>
</div>

📊

Cards

Display

Image card with cover, body text, and action button.

🚀

Getting Started

Build beautiful interfaces with our component library.

<div class="w-64 rounded-2xl border border-zinc-200 bg-white shadow-sm overflow-hidden">
  <div class="h-32 bg-gradient-to-br from-blue-500 to-indigo-600"></div>
  <div class="p-4">
    <h3 class="font-semibold text-zinc-800 text-sm">Card Title</h3>
    <p class="mt-1 text-xs text-zinc-500 leading-relaxed">Card description goes here.</p>
    <button class="mt-3 w-full rounded-lg bg-blue-600 py-1.5 text-xs font-semibold text-white hover:bg-blue-700">Action</button>
  </div>
</div>

📊

Stat Card

Display

KPI metric cards with trend indicators — common in dashboards.

Total Revenue

$48,295

↑ +12.5%

Active Users

3,842

↓ -2.1%

Orders

1,293

↑ +8.3%

Conversion

3.24%

↑ +0.4%

<div class="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm">
  <p class="text-xs font-medium text-zinc-500">Total Revenue</p>
  <p class="mt-1 text-2xl font-bold text-zinc-800">$48,295</p>
  <span class="mt-1 inline-flex items-center text-xs font-semibold text-emerald-600">↑ +12.5%</span>
</div>

🧭

Breadcrumb

Navigation

Navigation breadcrumb trail with separator and current page.

<nav class="flex items-center gap-1.5 text-sm">
  <a href="/" class="font-medium text-blue-600 hover:underline">Dashboard</a>
  <svg class="h-3.5 w-3.5 text-zinc-400" .../>
  <a href="/settings" class="font-medium text-blue-600 hover:underline">Settings</a>
  <svg class="h-3.5 w-3.5 text-zinc-400" .../>
  <span class="font-medium text-zinc-500">Profile</span>
</nav>

🧭

Tabs

Navigation

Underline-style tab navigation with active state.

Content for Overview tab.

<div class="flex border-b border-zinc-200">
  <button class="px-4 py-2 text-sm font-medium border-b-2 border-blue-600 text-blue-600 -mb-px">Overview</button>
  <button class="px-4 py-2 text-sm font-medium border-b-2 border-transparent text-zinc-500 hover:text-zinc-700">Analytics</button>
  <button class="px-4 py-2 text-sm font-medium border-b-2 border-transparent text-zinc-500 hover:text-zinc-700">Reports</button>
</div>

🧭

Pagination

Navigation

Page navigation with prev/next, active page, and ellipsis.

<nav class="flex items-center gap-1">
  <button class="h-9 w-9 rounded-lg text-sm font-medium text-zinc-600 hover:bg-zinc-100">←</button>
  <button class="h-9 px-3 rounded-lg text-sm font-medium text-zinc-600 hover:bg-zinc-100">1</button>
  <button class="h-9 px-3 rounded-lg bg-blue-600 text-sm font-medium text-white shadow-sm">2</button>
  <button class="h-9 px-3 rounded-lg text-sm font-medium text-zinc-600 hover:bg-zinc-100">3</button>
  <span class="px-1 text-zinc-400">...</span>
  <button class="h-9 w-9 rounded-lg text-sm font-medium text-zinc-600 hover:bg-zinc-100">→</button>
</nav>

⚡

Progress Bars

Feedback

Linear progress bars in multiple color states.

Uploading...72%

Success100%

Warning48%

Error30%

<div>
  <div class="mb-1 flex justify-between text-xs font-medium text-zinc-600">
    <span>Uploading...</span><span>72%</span>
  </div>
  <div class="h-2 w-full rounded-full bg-zinc-200">
    <div class="h-2 w-[72%] rounded-full bg-blue-500 transition-all"></div>
  </div>
</div>

⚡

Spinners

Feedback

Border spinner and bouncing dots in multiple colors.

<!-- Border spinner -->
<div class="h-8 w-8 animate-spin rounded-full border-4 border-zinc-200 border-t-blue-600"></div>
<!-- Dot bounce -->
<div class="flex gap-1.5">
  <div class="h-2.5 w-2.5 rounded-full bg-blue-500 animate-bounce" style="animation-delay:0s"></div>
  <div class="h-2.5 w-2.5 rounded-full bg-blue-500 animate-bounce" style="animation-delay:.15s"></div>
  <div class="h-2.5 w-2.5 rounded-full bg-blue-500 animate-bounce" style="animation-delay:.3s"></div>
</div>

⚡

Skeleton Loader

Feedback

Content placeholder shimmer animations for cards and lists.

<div class="rounded-2xl border border-zinc-200 bg-white p-4 space-y-3">
  <div class="flex items-center gap-3">
    <div class="h-10 w-10 rounded-full bg-zinc-200 animate-pulse"></div>
    <div class="flex-1 space-y-2">
      <div class="h-3 w-24 rounded-full bg-zinc-200 animate-pulse"></div>
      <div class="h-2.5 w-16 rounded-full bg-zinc-200 animate-pulse"></div>
    </div>
  </div>
  <div class="h-24 rounded-xl bg-zinc-200 animate-pulse"></div>
</div>

✏️

Text Input

Forms & Inputs

Default, icon-prefixed, and error-state input fields.

This field is required.

<input class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-2.5 text-sm placeholder-zinc-400 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition" placeholder="Enter text..." />
<div class="relative">
  <svg class="absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" .../>
  <input class="w-full rounded-xl border border-zinc-300 bg-white py-2.5 pl-10 pr-4 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100" placeholder="Email" />
</div>

✏️

Select Dropdown

Forms & Inputs

Native select with custom chevron icon styling.

<div class="relative">
  <select class="w-full appearance-none rounded-xl border border-zinc-300 bg-white px-4 py-2.5 pr-10 text-sm text-zinc-700 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition">
    <option value="">Select a country</option>
    <option>United States</option>
    <option>United Kingdom</option>
  </select>
  <svg class="pointer-events-none absolute right-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" .../>
</div>

✏️

Toggle Switch

Forms & Inputs

On/off toggle with label and color variants.

NotificationsDark ModeAuto-save

<label class="flex items-center gap-3 cursor-pointer">
  <span class="text-sm font-medium text-zinc-700">Notifications</span>
  <div class="relative">
    <input type="checkbox" class="sr-only peer" />
    <div class="h-6 w-11 rounded-full bg-zinc-300 peer-checked:bg-blue-500 transition-colors"></div>
    <div class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-5"></div>
  </div>
</label>

✏️

Checkbox & Radio

Forms & Inputs

Custom checkbox groups and radio button groups.

Design

Development

Marketing

Monthly

Yearly

Lifetime

<label class="flex items-center gap-2.5 cursor-pointer">
  <input type="checkbox" class="h-5 w-5 rounded-md border-zinc-300 text-blue-600 accent-blue-600 cursor-pointer" />
  <span class="text-sm text-zinc-700">Design</span>
</label>
<label class="flex items-center gap-2.5 cursor-pointer">
  <input type="radio" name="plan" class="h-5 w-5 accent-blue-600 cursor-pointer" />
  <span class="text-sm text-zinc-700">Monthly</span>
</label>

📊

Data Table

Display

Striped data table with status badges and action buttons.

Name	Role	Status
Alice Martin	Designer	Active
Bob Chen	Engineer	Away
Carol Davis	Manager	Inactive

<div class="overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm">
  <table class="w-full text-left text-sm">
    <thead class="bg-zinc-50 border-b border-zinc-200">
      <tr>
        <th class="px-4 py-3 text-xs font-semibold uppercase tracking-wide text-zinc-500">Name</th>
        <th class="px-4 py-3 text-xs font-semibold uppercase tracking-wide text-zinc-500">Status</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-zinc-100">
      <tr class="hover:bg-zinc-50">
        <td class="px-4 py-3 font-medium text-zinc-800">Alice Martin</td>
        <td class="px-4 py-3"><span class="rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-700">Active</span></td>
      </tr>
    </tbody>
  </table>
</div>

🪟

Modal Dialog

Overlay

Centered modal with backdrop, header, body, and footer actions.

<div class="fixed inset-0 z-50 flex items-center justify-center">
  <div class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
  <div class="relative w-full max-w-md rounded-2xl bg-white shadow-2xl mx-4">
    <div class="flex items-center justify-between border-b border-zinc-100 px-6 py-4">
      <h3 class="font-semibold text-zinc-800">Confirm Action</h3>
      <button class="rounded-lg p-1 text-zinc-400 hover:bg-zinc-100">✕</button>
    </div>
    <div class="px-6 py-4 text-sm text-zinc-600">Modal body content here...</div>
    <div class="flex justify-end gap-2 border-t border-zinc-100 px-6 py-4">
      <button class="rounded-lg border border-zinc-200 px-4 py-2 text-sm">Cancel</button>
      <button class="rounded-lg bg-red-500 px-4 py-2 text-sm font-semibold text-white">Delete</button>
    </div>
  </div>
</div>

🪟

Dropdown Menu

Overlay

Popover menu with icons, dividers, and keyboard-accessible items.

<div class="relative">
  <button class="inline-flex items-center gap-2 rounded-xl border border-zinc-200 bg-white px-4 py-2 text-sm font-medium shadow-sm hover:bg-zinc-50">
    Options <svg .../> <!-- ChevronDown -->
  </button>
  <div class="absolute right-0 mt-2 w-48 rounded-xl border border-zinc-200 bg-white shadow-xl py-1">
    <button class="flex w-full items-center gap-2.5 px-4 py-2.5 text-sm text-zinc-700 hover:bg-zinc-50">Profile</button>
    <div class="my-1 border-t border-zinc-100"></div>
    <button class="flex w-full items-center gap-2.5 px-4 py-2.5 text-sm text-red-500 hover:bg-red-50">Sign out</button>
  </div>
</div>

🪟

Tooltip

Overlay

Hover tooltips in 4 directions with smooth fade.

Tooltip on Top

Tooltip on Bottom

Tooltip on Left

Tooltip on Right

<!-- Tooltip top -->
<div class="group relative inline-block">
  <button class="rounded-lg border border-zinc-200 bg-white px-3 py-1.5 text-sm">Hover me</button>
  <div class="pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg bg-zinc-800 px-3 py-1.5 text-xs font-medium text-white opacity-0 transition-opacity group-hover:opacity-100">
    Tooltip text
  </div>
</div>

📊

Accordion

Display

Collapsible accordion with smooth toggle animation.

Up to 5 projects, 2 GB storage, and basic support.

<div class="space-y-2">
  <div class="rounded-xl border border-zinc-200 bg-white overflow-hidden">
    <button class="flex w-full items-center justify-between px-4 py-3.5 text-sm font-medium text-zinc-800 hover:bg-zinc-50">
      What is included?
      <svg class="h-4 w-4 text-zinc-400 transition-transform" .../>
    </button>
    <div class="border-t border-zinc-100 px-4 py-3.5 text-sm text-zinc-500">
      Answer content goes here.
    </div>
  </div>
</div>

📊

Timeline

Display

Vertical timeline for activity feeds, history logs, and steps.

09:00

Project Kickoff

Team aligned on goals.

11:30

Design Review

Wireframes approved.

14:00

Dev Sprint Start

Tickets assigned.

17:00

Deployment

v1.2 shipped to production.

<div class="flex gap-4">
  <div class="flex flex-col items-center">
    <div class="flex h-9 w-9 items-center justify-center rounded-full bg-blue-500 text-white shadow">🚀</div>
    <div class="w-px flex-1 bg-zinc-200 my-1"></div>
  </div>
  <div class="pb-6 pt-1">
    <p class="text-sm font-semibold text-zinc-800">Project Launched</p>
    <p class="text-xs text-zinc-400 mt-0.5">2 hours ago</p>
    <p class="mt-1 text-xs text-zinc-500">Initial version deployed.</p>
  </div>
</div>

⚡

Toast Notification

Feedback

Stacked toast messages with icon, title, and dismiss button.

✅

Saved!

Your changes have been saved.

❌

Error

Something went wrong. Try again.

<div class="fixed bottom-4 right-4 z-50 space-y-2 w-72">
  <div class="flex items-start gap-3 rounded-xl border border-emerald-200 bg-white p-4 shadow-lg">
    <span class="mt-0.5 text-lg">✅</span>
    <div class="flex-1">
      <p class="text-sm font-semibold text-zinc-800">Saved!</p>
      <p class="text-xs text-zinc-500 mt-0.5">Your changes have been saved.</p>
    </div>
    <button class="text-zinc-300 hover:text-zinc-500">✕</button>
  </div>
</div>

🧭

Stepper

Navigation

Multi-step progress indicator with completed, active, and pending states.

Account

Personal

Payment

Review

<div class="flex items-center">
  <div class="flex flex-col items-center">
    <div class="flex h-9 w-9 items-center justify-center rounded-full border-2 border-blue-600 bg-blue-600 text-white font-bold">✓</div>
    <span class="mt-1.5 text-xs font-medium text-zinc-500">Account</span>
  </div>
  <div class="mx-2 h-0.5 flex-1 bg-blue-600"></div>
  <div class="flex flex-col items-center">
    <div class="flex h-9 w-9 items-center justify-center rounded-full border-2 border-blue-600 bg-white text-blue-600 font-bold">2</div>
    <span class="mt-1.5 text-xs font-medium text-blue-600">Personal</span>
  </div>
  <div class="mx-2 h-0.5 flex-1 bg-zinc-200"></div>
  <div class="flex flex-col items-center">
    <div class="flex h-9 w-9 items-center justify-center rounded-full border-2 border-zinc-300 bg-white text-zinc-400 font-bold">3</div>
    <span class="mt-1.5 text-xs font-medium text-zinc-400">Payment</span>
  </div>
</div>

✏️

Search Bar

Forms & Inputs

Rounded search with icon prefix, clear button, and keyboard shortcut.

⌘K

<div class="relative">
  <svg class="absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" .../>
  <input class="w-full rounded-xl border border-zinc-300 bg-white py-2.5 pl-10 pr-4 text-sm placeholder-zinc-400 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition" placeholder="Search..." />
</div>
<!-- Pill search with ⌘K hint -->
<div class="relative">
  <svg class="absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" .../>
  <input class="w-full rounded-full border border-zinc-300 bg-zinc-50 py-2.5 pl-10 pr-16 text-sm outline-none" placeholder="Quick search..." />
  <kbd class="absolute right-3 top-1/2 -translate-y-1/2 rounded border border-zinc-200 bg-white px-1.5 py-0.5 text-[10px] font-mono text-zinc-400">⌘K</kbd>
</div>

📊

Notification Bell

Display

Icon button with dot or count badge — common in nav bars.

99+

<!-- Dot badge -->
<div class="relative">
  <button class="rounded-xl border border-zinc-200 bg-white p-2.5 hover:bg-zinc-50"><svg .../><!-- Bell --></button>
  <span class="absolute -right-1 -top-1 h-3.5 w-3.5 rounded-full bg-red-500 ring-2 ring-white"></span>
</div>
<!-- Count badge -->
<div class="relative">
  <button class="rounded-xl border border-zinc-200 bg-white p-2.5 hover:bg-zinc-50"><svg .../></button>
  <span class="absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white ring-2 ring-white">9</span>
</div>

📊

List Group

Display

Clickable list items with icon, label, sub-label, and chevron.

Design Team

8 members

Active

Engineering

24 members

Active

Marketing

6 members

Paused

Operations

12 members

Active

<div class="divide-y divide-zinc-100 rounded-2xl border border-zinc-200 bg-white shadow-sm overflow-hidden">
  <button class="flex w-full items-center gap-3 px-4 py-3.5 hover:bg-zinc-50 transition text-left">
    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-50 text-blue-500">
      <svg .../>
    </div>
    <div class="flex-1">
      <p class="text-sm font-medium text-zinc-800">Profile</p>
      <p class="text-xs text-zinc-400">Manage your account</p>
    </div>
    <svg class="h-4 w-4 text-zinc-300" .../><!-- ChevronRight -->
  </button>
</div>

✏️

Input Group

Forms & Inputs

Input with prefix/suffix addons — great for URLs, currencies.

https://

$USD

<!-- URL group -->
<div class="flex overflow-hidden rounded-xl border border-zinc-300 shadow-sm focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-100">
  <span class="flex items-center bg-zinc-100 px-3 text-sm text-zinc-500 border-r border-zinc-300 font-medium">https://</span>
  <input class="flex-1 bg-white px-3 py-2.5 text-sm outline-none" placeholder="example.com" />
</div>
<!-- Currency group -->
<div class="flex overflow-hidden rounded-xl border border-zinc-300 shadow-sm">
  <span class="flex items-center bg-zinc-100 px-3 text-sm text-zinc-500 border-r border-zinc-300">$</span>
  <input type="number" class="flex-1 bg-white px-3 py-2.5 text-sm outline-none" placeholder="0.00" />
  <span class="flex items-center bg-zinc-100 px-3 text-sm text-zinc-500 border-l border-zinc-300">USD</span>
</div>

✏️

Button Group

Forms & Inputs

Horizontally joined button groups for toggle, filter, and segmented controls.

<!-- Segmented control -->
<div class="inline-flex rounded-xl overflow-hidden border border-zinc-200 shadow-sm">
  <button class="px-4 py-2 text-sm font-medium bg-white text-zinc-700 hover:bg-zinc-50">Left</button>
  <button class="px-4 py-2 text-sm font-medium bg-blue-600 text-white border-l border-zinc-200">Center</button>
  <button class="px-4 py-2 text-sm font-medium bg-white text-zinc-700 hover:bg-zinc-50 border-l border-zinc-200">Right</button>
</div>

<!-- Period selector -->
<div class="inline-flex rounded-xl overflow-hidden border border-zinc-200 shadow-sm">
  <button class="px-3 py-1.5 text-xs font-semibold bg-white text-zinc-600 hover:bg-zinc-50">Day</button>
  <button class="px-3 py-1.5 text-xs font-semibold bg-white text-zinc-600 border-l border-zinc-200">Week</button>
  <button class="px-3 py-1.5 text-xs font-semibold bg-zinc-800 text-white border-l border-zinc-200">Month</button>
  <button class="px-3 py-1.5 text-xs font-semibold bg-white text-zinc-600 border-l border-zinc-200">Year</button>
</div>

📊

Carousel / Slider

Display

Image/content slider with prev/next arrows, dot indicators, and auto-play support.

🚀

Launch Faster

<div class="relative overflow-hidden rounded-2xl">
  <!-- Slide -->
  <div class="flex h-48 items-center justify-center bg-gradient-to-br from-blue-500 to-indigo-600 text-white">
    <p class="font-bold text-2xl">Slide 1</p>
  </div>
  <!-- Arrows -->
  <button class="absolute left-2 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow">‹</button>
  <button class="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow">›</button>
  <!-- Dots -->
  <div class="flex justify-center gap-1.5 py-3 bg-white">
    <button class="h-2 w-6 rounded-full bg-blue-600"></button>
    <button class="h-2 w-2 rounded-full bg-zinc-300"></button>
    <button class="h-2 w-2 rounded-full bg-zinc-300"></button>
  </div>
</div>

📊

Ribbon / Badge Cards

Display

Corner ribbon labels on cards — popular for highlighting featured or sale items.

Popular

⭐

Premium Card

Special offer

Sale

🎉

Premium Card

Special offer

New

✨

Premium Card

Special offer

<div class="relative overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm">
  <!-- Corner ribbon -->
  <div class="absolute right-0 top-0 h-16 w-16">
    <div class="absolute right-[-1.5rem] top-[1rem] w-[5rem] rotate-45 bg-blue-600 py-1 text-center text-[10px] font-bold text-white shadow-sm">
      Popular
    </div>
  </div>
  <!-- Card content -->
  <div class="h-24 bg-gradient-to-br from-blue-500 to-indigo-600"></div>
  <div class="p-3">
    <p class="text-xs font-semibold text-zinc-800">Premium Card</p>
  </div>
</div>

🪟

Popover

Overlay

Click-triggered popover with rich content, action buttons, and close arrow.

<div class="relative inline-block">
  <button class="rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm font-medium text-zinc-700 shadow-sm hover:bg-zinc-50">Info</button>

  <!-- Popover -->
  <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-20 w-56 rounded-xl border border-zinc-200 bg-white p-3 shadow-xl">
    <div class="flex items-start gap-2">
      <span class="text-lg">ℹ️</span>
      <p class="text-xs text-zinc-600 leading-relaxed">Rich content with actions and links.</p>
    </div>
    <div class="mt-2 flex gap-2">
      <button class="rounded-lg bg-blue-600 px-2.5 py-1 text-[11px] font-semibold text-white hover:bg-blue-700">Action</button>
      <button class="rounded-lg border border-zinc-200 px-2.5 py-1 text-[11px] text-zinc-600">Close</button>
    </div>
    <!-- Arrow -->
    <div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-zinc-200"></div>
  </div>
</div>

✏️

Range Slider

Forms & Inputs

Custom styled range input with live value display and color variants.

Volume60%

Brightness35%

<div>
  <div class="mb-2 flex justify-between text-xs font-medium text-zinc-600">
    <span>Volume</span><span class="font-bold text-zinc-800">60%</span>
  </div>
  <!-- Track -->
  <div class="relative h-2 rounded-full bg-zinc-200">
    <div class="absolute inset-y-0 left-0 w-[60%] rounded-full bg-blue-600"></div>
    <input type="range" min="0" max="100" value="60"
      class="absolute inset-0 h-full w-full cursor-pointer opacity-0" />
  </div>
</div>

✏️

Star Rating

Forms & Inputs

Interactive star rating with hover state, label, and rating breakdown bar.

Average (3/5)

5★

68%

4★

20%

3★

2★

1★

<!-- Interactive stars -->
<div class="flex gap-1">
  <button class="text-3xl text-amber-400 hover:scale-110 transition">★</button>
  <button class="text-3xl text-amber-400 hover:scale-110 transition">★</button>
  <button class="text-3xl text-amber-400 hover:scale-110 transition">★</button>
  <button class="text-3xl text-zinc-200 hover:scale-110 transition">★</button>
  <button class="text-3xl text-zinc-200 hover:scale-110 transition">★</button>
</div>
<!-- Rating bar -->
<div class="flex items-center gap-1.5 text-xs text-zinc-500">
  <span>5★</span>
  <div class="h-1.5 w-24 rounded-full bg-zinc-200">
    <div class="h-1.5 w-[68%] rounded-full bg-amber-400"></div>
  </div>
  <span>68%</span>
</div>

✏️

Tag Input

Forms & Inputs

Multi-tag input with Enter/comma to add, click to remove badges.

ReactTypeScript

Press Enter or comma to add a tag

<!-- Tag input container -->
<div class="flex flex-wrap gap-2 rounded-xl border border-zinc-300 bg-white p-3 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-100 transition min-h-[3rem]">
  <!-- Tag badge -->
  <span class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-semibold text-blue-700">
    React
    <button class="text-blue-400 hover:text-blue-700 leading-none">×</button>
  </span>
  <!-- Input -->
  <input class="flex-1 min-w-[80px] text-sm outline-none text-zinc-700 placeholder-zinc-400" placeholder="Add tag…" />
</div>
<p class="mt-1 text-[10px] text-zinc-400">Press Enter or comma to add a tag</p>

✏️

File Upload

Forms & Inputs

Drag-and-drop upload zone with file progress indicator.

📁

Drop files here

PNG, JPG, PDF, FIG up to 10MB

<!-- Drop zone -->
<div class="flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-zinc-300 bg-white p-6 text-center hover:border-blue-400 hover:bg-blue-50 transition cursor-pointer">
  <span class="text-2xl">📂</span>
  <p class="text-sm font-medium text-zinc-700">Drop files here</p>
  <p class="text-xs text-zinc-400">or <span class="text-blue-600 font-medium">browse files</span></p>
  <p class="text-[10px] text-zinc-400">PNG, JPG, PDF up to 10MB</p>
</div>

<!-- File progress row -->
<div class="rounded-xl border border-zinc-200 bg-white p-3 flex items-center gap-3">
  <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-50 text-blue-600">📄</div>
  <div class="flex-1">
    <p class="text-xs font-medium text-zinc-800">design-specs.pdf</p>
    <div class="mt-1 h-1.5 rounded-full bg-zinc-100">
      <div class="h-1.5 w-3/4 rounded-full bg-blue-500"></div>
    </div>
    <p class="mt-0.5 text-[10px] text-zinc-400">75% · 2.4 MB</p>
  </div>
  <button class="text-zinc-300 hover:text-zinc-500">×</button>
</div>

✏️

Textarea

Forms & Inputs

Styled multiline textarea with character counter variant.

0 / 200

<!-- Basic textarea -->
<textarea rows="3" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-sm placeholder-zinc-400 shadow-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition resize-none" placeholder="Write your message…"></textarea>

<!-- With character counter -->
<div class="relative">
  <textarea rows="3" maxlength="200" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 pb-8 text-sm placeholder-zinc-400 shadow-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition resize-none" placeholder="Max 200 chars…"></textarea>
  <span class="absolute bottom-2.5 right-3 text-[10px] text-zinc-400">0 / 200</span>
</div>

📊

Kanban Board

Display

Three-column task board with status labels and draggable card layout.

To Do2

Design mockups

Write tests

In Progress2

Build API

Auth flow

Done2

Setup repo

CI/CD

<div class="flex gap-3">
  <!-- Column -->
  <div class="flex-1 rounded-xl border border-zinc-200 bg-white p-3">
    <div class="flex items-center justify-between mb-3">
      <span class="rounded-full bg-zinc-100 px-2 py-0.5 text-[10px] font-bold text-zinc-600">To Do</span>
      <span class="text-[10px] text-zinc-400">2</span>
    </div>
    <!-- Card -->
    <div class="rounded-lg border border-zinc-100 bg-zinc-50 px-3 py-2 text-xs text-zinc-700 font-medium shadow-sm cursor-grab hover:shadow transition">Design mockups</div>
  </div>
  <!-- In Progress Column -->
  <div class="flex-1 rounded-xl border border-blue-100 bg-white p-3">
    <span class="rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-bold text-blue-700">In Progress</span>
  </div>
  <!-- Done Column -->
  <div class="flex-1 rounded-xl border border-emerald-100 bg-white p-3">
    <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-[10px] font-bold text-emerald-700">Done</span>
  </div>
</div>

📊

Chat Bubbles

Display

Message UI with sent/received bubbles, timestamps, and online status.

Alex Johnson

● Online

Hey! How's the project going?

10:21 AM

Going great! Just pushed the latest build 🚀

10:22 AM

Awesome! Let me review the PR.

10:23 AM

Sure, link is in Slack 👍

10:24 AM

<!-- Chat container -->
<div class="rounded-2xl border border-zinc-200 bg-white shadow-sm overflow-hidden">
  <!-- Header -->
  <div class="flex items-center gap-3 border-b border-zinc-100 px-4 py-3">
    <div class="h-8 w-8 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-white text-xs font-bold">AJ</div>
    <div><p class="text-sm font-semibold text-zinc-800">Alex Johnson</p><p class="text-[10px] text-emerald-500 font-medium">● Online</p></div>
  </div>
  <!-- Messages -->
  <div class="space-y-3 p-4">
    <!-- Received -->
    <div class="flex justify-start">
      <div class="max-w-[75%] rounded-2xl rounded-bl-sm bg-zinc-100 px-3.5 py-2 text-xs text-zinc-800">Hey! How's it going?</div>
    </div>
    <!-- Sent -->
    <div class="flex justify-end">
      <div class="max-w-[75%] rounded-2xl rounded-br-sm bg-blue-600 px-3.5 py-2 text-xs text-white">Going great! 🚀</div>
    </div>
  </div>
  <!-- Input -->
  <div class="flex items-center gap-2 border-t border-zinc-100 px-3 py-2.5">
    <input class="flex-1 rounded-xl border border-zinc-200 bg-zinc-50 px-3 py-1.5 text-xs outline-none" placeholder="Type a message…" />
    <button class="rounded-xl bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700">Send</button>
  </div>
</div>

📊

Pricing Card

Display

Pricing comparison cards with features list and highlighted popular plan.

Starter

$0/mo

For individuals

✓5 projects
✓2GB storage
✓Email support

Pro

$29/mo

For teams

✓Unlimited projects
✓50GB storage
✓Priority support
✓Analytics

<!-- Free plan -->
<div class="w-44 rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
  <p class="text-xs font-bold uppercase tracking-widest text-blue-600">Starter</p>
  <p class="mt-1 text-3xl font-bold text-zinc-800">$0<span class="text-sm font-normal text-zinc-400">/mo</span></p>
  <ul class="mt-4 space-y-1.5">
    <li class="flex items-center gap-1.5 text-[11px] text-zinc-600"><span class="text-emerald-500">✓</span>5 projects</li>
    <li class="flex items-center gap-1.5 text-[11px] text-zinc-600"><span class="text-emerald-500">✓</span>2GB storage</li>
  </ul>
  <button class="mt-4 w-full rounded-lg bg-blue-600 py-2 text-xs font-semibold text-white hover:bg-blue-700">Get Started</button>
</div>

<!-- Pro plan (highlighted) -->
<div class="w-44 rounded-2xl border border-blue-600 bg-blue-600 p-5 shadow-sm">
  <p class="text-xs font-bold uppercase tracking-widest text-blue-200">Pro</p>
  <p class="mt-1 text-3xl font-bold text-white">$29<span class="text-sm font-normal opacity-70">/mo</span></p>
  <button class="mt-4 w-full rounded-lg bg-white py-2 text-xs font-semibold text-blue-600 hover:bg-blue-50">Start Free Trial</button>
</div>

🧭

Navbar

Navigation

Responsive top navigation with logo, links, notification bell, and avatar.

<nav class="flex items-center justify-between bg-white border-b border-zinc-200 px-4 py-3 shadow-sm">
  <!-- Logo -->
  <div class="flex items-center gap-2">
    <div class="h-7 w-7 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white text-xs font-bold">A</div>
    <span class="font-bold text-zinc-800 text-sm">AppName</span>
  </div>
  <!-- Links -->
  <div class="hidden sm:flex items-center gap-5 text-sm">
    <a href="#" class="font-medium text-blue-600">Dashboard</a>
    <a href="#" class="font-medium text-zinc-500 hover:text-zinc-800">Analytics</a>
    <a href="#" class="font-medium text-zinc-500 hover:text-zinc-800">Reports</a>
  </div>
  <!-- Right side -->
  <div class="flex items-center gap-2">
    <button class="rounded-xl border border-zinc-200 p-1.5 text-zinc-500 hover:bg-zinc-50"><svg .../></button>
    <div class="h-7 w-7 rounded-full bg-gradient-to-br from-purple-400 to-pink-500 flex items-center justify-center text-white text-[10px] font-bold">JD</div>
  </div>
</nav>

🧭

Sidebar

Navigation

Dark sidebar navigation with active state, icon, label, and badge count.

Admin Panel

Dashboard

Welcome back!

—

Users

—

Revenue

—

Orders

—

Tasks

<aside class="w-48 bg-zinc-900 flex flex-col min-h-screen">
  <!-- Brand -->
  <div class="flex items-center gap-2 px-4 py-4 border-b border-zinc-800">
    <div class="h-6 w-6 rounded-md bg-blue-500 flex items-center justify-center text-white text-xs font-bold">A</div>
    <span class="text-xs font-bold text-white">Admin Panel</span>
  </div>
  <!-- Nav -->
  <nav class="flex-1 py-3 space-y-0.5 px-2">
    <!-- Active item -->
    <a href="#" class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-xs font-medium bg-blue-600 text-white">📊 Dashboard</a>
    <!-- Inactive item -->
    <a href="#" class="flex items-center justify-between gap-2.5 rounded-lg px-3 py-2 text-xs font-medium text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100">
      <span class="flex items-center gap-2">💬 Messages</span>
      <span class="rounded-full bg-red-500 px-1.5 py-0.5 text-[9px] font-bold text-white">5</span>
    </a>
  </nav>
</aside>

▦

Divider

Layout

Horizontal dividers in plain, OR text, label badge, and gradient styles.

✦ Section Title

CONTINUE WITH

Vertical Divider

Used for callouts and quotes

<!-- Plain -->
<div class="h-px bg-zinc-200 w-full"></div>

<!-- OR divider -->
<div class="flex items-center gap-3">
  <div class="h-px flex-1 bg-zinc-200"></div>
  <span class="text-xs font-medium text-zinc-400">OR</span>
  <div class="h-px flex-1 bg-zinc-200"></div>
</div>

<!-- Label badge divider -->
<div class="flex items-center gap-3">
  <div class="h-px flex-1 bg-zinc-200"></div>
  <span class="rounded-full border border-zinc-200 bg-white px-3 py-0.5 text-[11px] font-medium text-zinc-500 shadow-sm">✦ Section</span>
  <div class="h-px flex-1 bg-zinc-200"></div>
</div>

<!-- Left accent border -->
<div class="border-l-4 border-blue-500 pl-3">
  <p class="text-xs font-semibold text-zinc-800">Callout Title</p>
  <p class="text-[11px] text-zinc-400">Important note or quote content.</p>
</div>

📊

Code Snippet

Display

Syntax-highlighted code block with macOS chrome, filename, and language badge.

index.tsx

TypeScript

import { useState } from 'react'

function Counter() {

const [count, setCount] = useState(0)

return <button onClick={() => setCount(c+1)}>{count}</button>

}

<div class="overflow-hidden rounded-xl border border-zinc-700 shadow-lg">
  <!-- Chrome bar -->
  <div class="flex items-center justify-between bg-zinc-800 px-4 py-2.5">
    <div class="flex items-center gap-2">
      <div class="flex gap-1.5">
        <span class="h-3 w-3 rounded-full bg-red-500"></span>
        <span class="h-3 w-3 rounded-full bg-yellow-400"></span>
        <span class="h-3 w-3 rounded-full bg-emerald-500"></span>
      </div>
      <span class="ml-2 text-[11px] text-zinc-400 font-mono">index.tsx</span>
    </div>
    <span class="text-[10px] text-zinc-500 font-mono">TypeScript</span>
  </div>
  <!-- Code body -->
  <pre class="bg-zinc-950 px-4 py-4 font-mono text-[11.5px] leading-6 text-zinc-300 overflow-x-auto"><code>
<span class="text-purple-400">import</span> <span class="text-zinc-300">{ useState }</span> <span class="text-purple-400">from</span> <span class="text-emerald-400">'react'</span>
  </code></pre>
</div>

📊

Image Gallery

Display

Responsive grid image gallery with thumbnail strip for lightbox-style layouts.

<!-- 3-column grid -->
<div class="grid grid-cols-3 gap-1.5">
  <div class="aspect-square rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 hover:scale-105 transition cursor-pointer"></div>
  <div class="aspect-square rounded-lg bg-gradient-to-br from-rose-400 to-pink-500 hover:scale-105 transition cursor-pointer"></div>
  <div class="aspect-square rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 hover:scale-105 transition cursor-pointer"></div>
  <div class="aspect-square rounded-lg bg-gradient-to-br from-emerald-400 to-teal-500 hover:scale-105 transition cursor-pointer"></div>
  <div class="aspect-square rounded-lg bg-gradient-to-br from-purple-400 to-violet-500 hover:scale-105 transition cursor-pointer"></div>
  <div class="aspect-square rounded-lg bg-gradient-to-br from-cyan-400 to-blue-500 hover:scale-105 transition cursor-pointer"></div>
</div>

📊

Video Card

Display

Video thumbnail card with play button overlay, duration badge, and meta info.

12:34

Getting Started with React Hooks

DevTube · 24K views

58:21

Build a Full-Stack App in 1 Hour

CodeWorld · 84K views

<div class="rounded-2xl border border-zinc-200 bg-white shadow-sm overflow-hidden">
  <!-- Thumbnail with play -->
  <div class="relative h-36 bg-zinc-900 flex items-center justify-center cursor-pointer group">
    <img src="thumbnail.jpg" alt="" class="absolute inset-0 h-full w-full object-cover opacity-80" />
    <!-- Play button -->
    <div class="relative flex h-12 w-12 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm border border-white/30 group-hover:bg-white/30 transition">
      <span class="text-white text-xl ml-0.5">▶</span>
    </div>
    <!-- Duration -->
    <div class="absolute bottom-2 right-2 rounded-md bg-black/60 px-1.5 py-0.5 text-[10px] font-mono text-white">4:32</div>
  </div>
  <!-- Meta -->
  <div class="p-3.5">
    <p class="text-sm font-semibold text-zinc-800">Getting Started with Tailwind CSS</p>
    <div class="mt-2 flex items-center gap-2">
      <div class="h-6 w-6 rounded-full bg-blue-500 flex items-center justify-center text-white text-[9px] font-bold">T</div>
      <span class="text-xs text-zinc-500">TailAdmin · 12K views</span>
    </div>
  </div>
</div>

📊

Empty State

Display

Friendly empty state UI with icon, heading, description, and CTA button.

📭

No results found

We couldn't find what you're looking for. Try adjusting your search or filters.

<div class="flex flex-col items-center justify-center py-12 text-center">
  <!-- Icon / illustration -->
  <div class="flex h-20 w-20 items-center justify-center rounded-full bg-zinc-100 text-4xl mb-4">📭</div>
  <h3 class="text-sm font-bold text-zinc-800">No results found</h3>
  <p class="mt-1.5 text-xs text-zinc-400 leading-relaxed max-w-[200px]">
    We couldn't find what you're looking for. Try adjusting your search or filters.
  </p>
  <button class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-xs font-semibold text-white hover:bg-blue-700 transition">
    Clear Filters
  </button>
</div>

📊

Link Styles

Display

Styled anchor variants — underline, filled, border-bottom, muted, and hashtag.

Default link Underline style Border bottom

Filled link →↗ External Muted link

#React #TypeScript #NextJS #TailwindCSS

<!-- Default blue link -->
<a href="#" class="text-sm text-blue-600 hover:text-blue-700 font-medium hover:underline transition">Default link</a>

<!-- Underline offset -->
<a href="#" class="text-sm font-medium text-zinc-600 underline underline-offset-2 decoration-zinc-300 hover:decoration-zinc-600 transition">Underline style</a>

<!-- Border bottom -->
<a href="#" class="text-sm font-medium text-zinc-700 border-b-2 border-transparent hover:border-blue-600 hover:text-blue-600 transition">Border bottom</a>

<!-- Filled pill -->
<a href="#" class="inline-flex items-center gap-1 rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-semibold text-blue-700 hover:bg-blue-100 transition">Filled link →</a>

<!-- Hashtag / topic links -->
<a href="#" class="text-xs font-medium text-blue-600 hover:underline">#React</a>

📊

Notification Panel

Display

Dropdown notification feed with unread dot, mark-all-read, and view-all link.

<div class="relative">
  <!-- Bell trigger with badge -->
  <button class="relative rounded-xl border border-zinc-200 bg-white p-2.5 hover:bg-zinc-50">
    <svg .../><!-- Bell -->
    <span class="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[9px] font-bold text-white ring-2 ring-white">2</span>
  </button>

  <!-- Panel -->
  <div class="absolute right-0 top-full mt-2 w-72 rounded-2xl border border-zinc-200 bg-white shadow-xl overflow-hidden">
    <div class="flex items-center justify-between px-4 py-3 border-b border-zinc-100">
      <p class="text-sm font-semibold text-zinc-800">Notifications</p>
      <button class="text-[11px] font-medium text-blue-600 hover:underline">Mark all read</button>
    </div>
    <!-- Notification item -->
    <div class="flex items-start gap-3 px-4 py-3 bg-blue-50/30 hover:bg-zinc-50 transition">
      <span class="text-xl">🚀</span>
      <div class="flex-1">
        <p class="text-xs font-semibold text-zinc-800">New deployment</p>
        <p class="text-[11px] text-zinc-500">v2.4.1 deployed to production</p>
        <p class="text-[10px] text-zinc-400 mt-0.5">2m ago</p>
      </div>
      <span class="mt-1.5 h-2 w-2 rounded-full bg-blue-500"></span>
    </div>
    <div class="border-t border-zinc-100 px-4 py-2.5 text-center">
      <button class="text-xs font-medium text-blue-600 hover:underline">View all notifications</button>
    </div>
  </div>
</div>

📊

FAQ Section

Display

FAQ list with question/answer cards and section header — great for landing pages.

FAQ

Frequently Asked

Is it free to use?

Yes! The core library is completely free and open-source.

Do I need a backend?

No backend required — all processing is client-side in the browser.

Can I customize themes?

Absolutely. Every color, size, and style is fully customizable via CSS variables.

<div class="space-y-3">
  <!-- Header -->
  <div class="text-center mb-4">
    <span class="text-xs font-bold uppercase tracking-widest text-blue-600">FAQ</span>
    <h3 class="mt-1 text-sm font-bold text-zinc-800">Frequently Asked</h3>
  </div>
  <!-- FAQ item -->
  <div class="rounded-xl border border-zinc-200 bg-white p-4">
    <div class="flex items-start gap-3">
      <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">Q</span>
      <div>
        <p class="text-xs font-semibold text-zinc-800">Is it free to use?</p>
        <p class="mt-1 text-[11px] text-zinc-500 leading-relaxed">Yes! The core library is completely free and open-source.</p>
      </div>
    </div>
  </div>
</div>

📊

Profile Card

Display

User profile with cover, avatar overlay, bio, stats, and follow button.

Jane Doe

Senior Product Designer

142

Posts

8.2K

Followers

234

Following

<div class="w-56 rounded-2xl border border-zinc-200 bg-white shadow-sm overflow-hidden">
  <div class="h-20 bg-gradient-to-br from-blue-500 via-indigo-500 to-purple-500"></div>
  <div class="px-4 pb-4">
    <div class="relative -mt-8 mb-3">
      <img class="h-14 w-14 rounded-full border-2 border-white shadow-md" src="avatar.jpg" alt="" />
    </div>
    <h3 class="text-sm font-bold text-zinc-800">Jane Doe</h3>
    <p class="text-xs text-zinc-500">Senior Product Designer</p>
    <div class="mt-3 flex gap-4 text-center">
      <div><p class="text-sm font-bold text-zinc-800">142</p><p class="text-[10px] text-zinc-400">Posts</p></div>
      <div><p class="text-sm font-bold text-zinc-800">8.2K</p><p class="text-[10px] text-zinc-400">Followers</p></div>
    </div>
    <button class="mt-3 w-full rounded-lg bg-blue-600 py-1.5 text-xs font-semibold text-white hover:bg-blue-700">Follow</button>
  </div>
</div>

✏️

Floating Label Input

Forms & Inputs

Label that floats above on focus — clean, modern form pattern.

Email address

Full name

Company

<div class="relative">
  <input placeholder=" " class="peer w-full rounded-xl border border-zinc-300 bg-white px-4 pb-2.5 pt-5 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition" />
  <label class="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-sm text-zinc-400 transition-all
    peer-focus:top-3 peer-focus:-translate-y-0 peer-focus:text-[10px] peer-focus:font-semibold peer-focus:text-blue-600
    peer-not-placeholder-shown:top-3 peer-not-placeholder-shown:-translate-y-0 peer-not-placeholder-shown:text-[10px] peer-not-placeholder-shown:font-semibold">
    Email address
  </label>
</div>

✏️

OTP / Verification Code

Forms & Inputs

Six-box one-time password input with auto-focus and fill highlight.

Enter verification code

Sent to ••••••••@email.com

<div class="flex justify-center gap-2">
  <input type="text" maxlength="1" class="h-11 w-10 rounded-xl border-2 border-zinc-300 bg-white text-center text-lg font-bold outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition" />
  <input type="text" maxlength="1" class="h-11 w-10 rounded-xl border-2 border-blue-600 bg-blue-50 text-center text-lg font-bold text-blue-700 outline-none" />
  <!-- Repeat for 6 boxes -->
</div>

✏️

Password Strength

Forms & Inputs

Password field with animated strength meter and requirement checklist.

○Uppercase

○Number

○Special char

○8+ chars

<div class="space-y-2">
  <input type="password" class="w-full rounded-xl border border-zinc-300 px-4 py-2.5 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100" placeholder="Enter password…" />
  <!-- Strength bars -->
  <div class="flex gap-1.5">
    <div class="h-1.5 flex-1 rounded-full bg-red-500"></div>
    <div class="h-1.5 flex-1 rounded-full bg-red-500"></div>
    <div class="h-1.5 flex-1 rounded-full bg-zinc-200"></div>
    <div class="h-1.5 flex-1 rounded-full bg-zinc-200"></div>
  </div>
  <p class="text-xs font-semibold text-red-500">Weak</p>
  <!-- Requirements -->
  <div class="grid grid-cols-2 gap-1">
    <div class="flex items-center gap-1.5 text-[11px] text-emerald-600"><span>✓</span>Uppercase</div>
    <div class="flex items-center gap-1.5 text-[11px] text-zinc-400"><span>○</span>Number</div>
  </div>
</div>

✏️

Number Stepper

Forms & Inputs

Increment/decrement counter input — great for quantity, booking, and settings.

Adults

Children

Rooms

<div class="flex items-center justify-between">
  <span class="text-sm font-medium text-zinc-700">Adults</span>
  <div class="flex items-center rounded-xl border border-zinc-200 overflow-hidden shadow-sm">
    <button class="h-9 w-9 flex items-center justify-center text-zinc-500 hover:bg-zinc-50 font-bold text-lg transition">−</button>
    <span class="w-8 text-center text-sm font-bold text-zinc-800">1</span>
    <button class="h-9 w-9 flex items-center justify-center text-zinc-500 hover:bg-zinc-50 font-bold text-lg transition">+</button>
  </div>
</div>

✏️

Color Picker Input

Forms & Inputs

Color swatch + HEX input with preset palette swatches.

HEX

<!-- Color input row -->
<div class="flex items-center gap-3 rounded-xl border border-zinc-300 bg-white px-3 py-2.5 shadow-sm">
  <div class="relative h-8 w-8 rounded-lg overflow-hidden border border-zinc-200 cursor-pointer" style="background:#3b82f6">
    <input type="color" value="#3b82f6" class="absolute inset-0 opacity-0 w-full h-full cursor-pointer" />
  </div>
  <input value="#3B82F6" class="flex-1 bg-transparent font-mono text-sm text-zinc-700 outline-none uppercase" maxlength="7" />
  <span class="text-xs text-zinc-400 font-medium">HEX</span>
</div>
<!-- Preset swatches -->
<div class="flex gap-1.5 flex-wrap mt-2">
  <button class="h-7 w-7 rounded-lg border-2 border-transparent hover:scale-110 transition" style="background:#ef4444"></button>
  <button class="h-7 w-7 rounded-lg border-2 border-zinc-700 scale-110" style="background:#3b82f6"></button>
</div>

✏️

Phone Number Input

Forms & Inputs

Country code selector + phone number field combined input.

We'll send a verification code to this number

<div class="flex overflow-hidden rounded-xl border border-zinc-300 shadow-sm focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-100 transition">
  <select class="shrink-0 appearance-none bg-zinc-100 px-3 text-sm font-medium text-zinc-700 outline-none border-r border-zinc-300 cursor-pointer">
    <option>+1</option>
    <option>+44</option>
    <option>+91</option>
  </select>
  <input type="tel" placeholder="(555) 000-0000" class="flex-1 bg-white px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 outline-none" />
</div>

✏️

Date & Date Range

Forms & Inputs

Single date input and date range picker with icon prefix.

📅

→

📅

<!-- Single date -->
<div class="relative">
  <span class="absolute left-3.5 top-1/2 -translate-y-1/2">📅</span>
  <input type="date" class="w-full rounded-xl border border-zinc-300 bg-white py-2.5 pl-10 pr-4 text-sm text-zinc-700 shadow-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition" />
</div>
<!-- Date range -->
<div class="flex items-center gap-2">
  <div class="relative flex-1">
    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm">📅</span>
    <input type="date" class="w-full rounded-xl border border-zinc-300 bg-white py-2 pl-8 pr-2 text-xs outline-none focus:border-blue-500 transition" />
  </div>
  <span class="text-zinc-400">→</span>
  <div class="relative flex-1">
    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm">📅</span>
    <input type="date" class="w-full rounded-xl border border-zinc-300 bg-white py-2 pl-8 pr-2 text-xs outline-none focus:border-blue-500 transition" />
  </div>
</div>

✏️

Multi-Select

Forms & Inputs

Dropdown with checkboxes — select multiple options with badge chips.

<!-- Trigger with selected chips -->
<div class="flex flex-wrap items-center gap-1.5 rounded-xl border border-zinc-300 bg-white p-2.5 min-h-[2.75rem] cursor-pointer">
  <span class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-semibold text-blue-700">
    Design <span class="cursor-pointer text-blue-400 hover:text-blue-700">×</span>
  </span>
  <svg class="ml-auto h-3.5 w-3.5 text-zinc-400" .../><!-- ChevronDown -->
</div>
<!-- Dropdown -->
<div class="mt-1 rounded-xl border border-zinc-200 bg-white shadow-xl py-1">
  <button class="flex w-full items-center gap-2.5 px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-50">
    <div class="h-4 w-4 rounded border-2 border-blue-600 bg-blue-600 flex items-center justify-center"><svg .../></div>
    Design
  </button>
</div>

✏️

Credit Card Form

Forms & Inputs

Animated credit card preview with number, expiry, and CVV fields.

Credit Card

💳

•••• •••• •••• ••••

Card Holder

John Doe

Expires

12/26

<!-- Card preview -->
<div class="rounded-2xl bg-gradient-to-br from-zinc-800 to-zinc-900 p-5 text-white shadow-xl">
  <div class="flex justify-between"><span class="text-[10px] font-bold tracking-widest text-zinc-400">CREDIT CARD</span><span class="text-2xl">💳</span></div>
  <div class="mt-4 font-mono text-lg tracking-widest">•••• •••• •••• ••••</div>
  <div class="mt-3 flex justify-between text-[10px] text-zinc-400">
    <div><div class="uppercase text-[9px]">Card Holder</div><div class="text-white text-xs font-medium mt-0.5">John Doe</div></div>
    <div class="text-right"><div class="uppercase text-[9px]">Expires</div><div class="text-white text-xs font-medium mt-0.5">12/26</div></div>
  </div>
</div>
<!-- Fields -->
<input placeholder="1234 5678 9012 3456" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-2.5 font-mono text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 mt-3" />
<div class="flex gap-3 mt-3">
  <input placeholder="MM/YY" class="flex-1 rounded-xl border border-zinc-300 bg-white px-4 py-2.5 text-sm outline-none focus:border-blue-500" />
  <input placeholder="CVV" class="w-20 rounded-xl border border-zinc-300 bg-white px-4 py-2.5 text-sm outline-none focus:border-blue-500" />
</div>

✏️

Switch Group

Forms & Inputs

Grouped notification preference toggles with label and sub-label.

Email Notifications

Receive updates via email

Push Notifications

Alerts on your device

SMS Alerts

Text message notifications

Weekly Digest

Summary every Monday

<div class="divide-y divide-zinc-100 rounded-2xl border border-zinc-200 bg-white overflow-hidden shadow-sm">
  <div class="flex items-center justify-between px-4 py-3.5">
    <div>
      <p class="text-sm font-medium text-zinc-800">Email Notifications</p>
      <p class="text-[11px] text-zinc-400 mt-0.5">Receive updates via email</p>
    </div>
    <!-- Toggle -->
    <button class="relative h-6 w-11 rounded-full bg-blue-600 shrink-0 ml-4">
      <span class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow translate-x-5"></span>
    </button>
  </div>
</div>

📊

Donut Chart

Display

CSS + SVG donut chart with legend — no library required.

Storage Usage

Used68%

Available22%

Reserved10%

<div class="flex items-center gap-6">
  <svg width="100" height="100" viewBox="0 0 100 100" class="-rotate-90">
    <!-- Track -->
    <circle cx="50" cy="50" r="40" fill="none" stroke="#e4e4e7" stroke-width="12" />
    <!-- Blue segment 35% -->
    <circle cx="50" cy="50" r="40" fill="none" stroke="#3b82f6" stroke-width="12"
      stroke-dasharray="87.96 163.36" stroke-dashoffset="0" />
    <!-- Green segment 45% -->
    <circle cx="50" cy="50" r="40" fill="none" stroke="#10b981" stroke-width="12"
      stroke-dasharray="113.1 138.22" stroke-dashoffset="-87.96" />
  </svg>
  <div class="space-y-2">
    <div class="flex items-center gap-2 text-xs"><span class="h-2.5 w-2.5 rounded-full bg-blue-500"></span>Design <span class="font-bold ml-auto">35%</span></div>
    <div class="flex items-center gap-2 text-xs"><span class="h-2.5 w-2.5 rounded-full bg-emerald-500"></span>Dev <span class="font-bold ml-auto">45%</span></div>
  </div>
</div>

📊

Bar Chart

Display

Simple vertical bar chart with value labels — pure CSS, no library.

Monthly Sales

8,246

+12%

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Mon

<div class="flex items-end justify-between gap-2 h-28">
  <!-- Bar -->
  <div class="flex flex-col items-center gap-1 flex-1">
    <span class="text-[9px] font-bold text-zinc-500">65</span>
    <div class="w-full rounded-t-md bg-gradient-to-t from-blue-600 to-blue-400 hover:from-blue-700 hover:to-blue-500 transition cursor-pointer" style="height:52px"></div>
  </div>
  <!-- Repeat per data point -->
</div>
<div class="flex justify-between mt-1">
  <span class="flex-1 text-center text-[9px] text-zinc-400">Mon</span>
  <!-- Repeat labels -->
</div>

📊

Testimonial Card

Display

Social proof quote card with star rating, avatar, and role.

★★★★★

“This is hands down the best component library I’ve used. Saved our team weeks of work and the code quality is exceptional.”

Sarah Miller

CTO at TechCorp

<div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
  <div class="flex gap-0.5 mb-3">
    <span class="text-amber-400 text-sm">★</span><!-- ×5 -->
  </div>
  <p class="text-sm text-zinc-600 leading-relaxed italic">
    "This is hands down the best component library I've used. Saved our team weeks of work."
  </p>
  <div class="mt-4 flex items-center gap-3">
    <div class="h-9 w-9 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-white text-xs font-bold">SM</div>
    <div>
      <p class="text-sm font-semibold text-zinc-800">Sarah Miller</p>
      <p class="text-xs text-zinc-400">CTO at TechCorp</p>
    </div>
  </div>
</div>

📊

Social Feed Post

Display

Social media post card with avatar, actions (like, comment, share), and image.

Jane Doe

2 hours ago · 🌍

Just shipped the new design system! 🎉 Took 3 months but it's finally live. Check out the docs and let me know what you think!

🎨

<div class="rounded-2xl border border-zinc-200 bg-white shadow-sm overflow-hidden">
  <!-- Header -->
  <div class="flex items-center justify-between p-4">
    <div class="flex items-center gap-3">
      <div class="h-9 w-9 rounded-full bg-rose-400 flex items-center justify-center text-white text-xs font-bold">JD</div>
      <div><p class="text-sm font-semibold text-zinc-800">Jane Doe</p><p class="text-xs text-zinc-400">2 hours ago</p></div>
    </div>
    <button class="text-zinc-400">⋯</button>
  </div>
  <p class="px-4 pb-3 text-sm text-zinc-700 leading-relaxed">Just shipped the new design system! 🎉</p>
  <!-- Image -->
  <div class="h-28 bg-gradient-to-br from-blue-500 to-indigo-600"></div>
  <!-- Actions -->
  <div class="flex items-center gap-4 px-4 py-3 border-t border-zinc-100">
    <button class="flex items-center gap-1.5 text-xs font-medium text-red-500">❤️ 142</button>
    <button class="flex items-center gap-1.5 text-xs font-medium text-zinc-500">💬 24</button>
    <button class="flex items-center gap-1.5 text-xs font-medium text-zinc-500">↗️ Share</button>
  </div>
</div>

📊

Comment Thread

Display

Nested comment list with input field, reply counts, and live submission.

You

Alex Chen

5m ago

Great component! Love the clean design.

Maria López

12m ago

How do I customize the colors?

<!-- Add comment row -->
<div class="flex gap-3">
  <div class="h-8 w-8 shrink-0 rounded-full bg-blue-500 flex items-center justify-center text-white text-[10px] font-bold">You</div>
  <div class="flex-1 flex gap-2">
    <input placeholder="Add a comment…" class="flex-1 rounded-xl border border-zinc-300 bg-white px-3 py-2 text-xs outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100" />
    <button class="rounded-xl bg-blue-600 px-3 text-xs font-semibold text-white hover:bg-blue-700">Post</button>
  </div>
</div>
<!-- Comment -->
<div class="flex gap-3">
  <div class="h-8 w-8 shrink-0 rounded-full bg-zinc-400 flex items-center justify-center text-white text-[9px] font-bold">AC</div>
  <div class="flex-1 rounded-xl bg-white border border-zinc-100 px-3 py-2.5 shadow-sm">
    <div class="flex items-center gap-2"><p class="text-xs font-semibold text-zinc-800">Alex Chen</p><p class="text-[10px] text-zinc-400">5m ago</p></div>
    <p class="mt-0.5 text-xs text-zinc-600">Great component! Love the clean design.</p>
  </div>
</div>

📊

File Cards

Display

File and document cards with icon, name, size, and hover effect.

🎨

design-system.fig

24.5 MB

📄

report-Q4.pdf

2.1 MB

📊

data-export.xlsx

856 KB

📦

assets.zip

128 MB

<div class="grid grid-cols-2 gap-2">
  <div class="rounded-xl border border-zinc-200 bg-white p-3 hover:shadow-md transition cursor-pointer group">
    <div class="h-10 w-10 rounded-xl bg-purple-100 text-purple-600 flex items-center justify-center text-xl mb-2">🎨</div>
    <p class="text-xs font-semibold text-zinc-800 truncate group-hover:text-blue-600 transition">design-system.fig</p>
    <p class="text-[10px] text-zinc-400 mt-0.5">24.5 MB</p>
  </div>
  <div class="rounded-xl border border-zinc-200 bg-white p-3 hover:shadow-md transition cursor-pointer group">
    <div class="h-10 w-10 rounded-xl bg-red-100 text-red-600 flex items-center justify-center text-xl mb-2">📄</div>
    <p class="text-xs font-semibold text-zinc-800 truncate group-hover:text-blue-600 transition">report-Q4.pdf</p>
    <p class="text-[10px] text-zinc-400 mt-0.5">2.1 MB</p>
  </div>
</div>

📊

Comparison Table

Display

Feature comparison matrix with ✓ / — for free, pro, and enterprise plans.

Feature	Free	Pro	Enterprise
Unlimited projects	✓	✓	✓
Custom domain	–	✓	✓
Analytics	–	✓	✓
API access	–	✓	✓
Priority support	–	–	✓
White label	–	–	✓

<table class="w-full text-xs text-center">
  <thead>
    <tr>
      <th class="text-left py-2 text-zinc-500 font-medium text-[11px]">Feature</th>
      <th class="py-2 font-bold text-[11px] text-zinc-700">Free</th>
      <th class="py-2 font-bold text-[11px] text-blue-600">Pro</th>
      <th class="py-2 font-bold text-[11px] text-zinc-700">Enterprise</th>
    </tr>
  </thead>
  <tbody class="divide-y divide-zinc-100">
    <tr class="hover:bg-zinc-50">
      <td class="py-2 text-left text-[11px] text-zinc-600">Unlimited projects</td>
      <td class="py-2"><span class="text-emerald-500 font-bold">✓</span></td>
      <td class="py-2"><span class="text-emerald-500 font-bold">✓</span></td>
      <td class="py-2"><span class="text-emerald-500 font-bold">✓</span></td>
    </tr>
    <tr class="hover:bg-zinc-50">
      <td class="py-2 text-left text-[11px] text-zinc-600">API access</td>
      <td class="py-2"><span class="text-zinc-300">–</span></td>
      <td class="py-2"><span class="text-emerald-500 font-bold">✓</span></td>
      <td class="py-2"><span class="text-emerald-500 font-bold">✓</span></td>
    </tr>
  </tbody>
</table>

📊

Team Card Grid

Display

Team member cards with gradient avatar, name, role, and social links.

Alex Chen

CEO

Sara Kim

Design

Tom Lee

Engineer

Mia Wang

Marketing

<div class="grid grid-cols-2 gap-3">
  <div class="rounded-2xl border border-zinc-200 bg-white p-4 text-center hover:shadow-md transition">
    <div class="mx-auto h-12 w-12 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-white font-bold text-sm mb-2">AC</div>
    <p class="text-xs font-bold text-zinc-800">Alex Chen</p>
    <p class="text-[10px] text-zinc-400 mt-0.5">CEO</p>
    <div class="mt-2 flex justify-center gap-2">
      <button class="h-6 w-6 rounded-full bg-zinc-100 hover:bg-zinc-200 text-[10px] text-zinc-500 transition flex items-center justify-center">𝕏</button>
      <button class="h-6 w-6 rounded-full bg-zinc-100 hover:bg-zinc-200 text-[10px] text-zinc-500 transition flex items-center justify-center">in</button>
    </div>
  </div>
</div>

📊

Order Summary

Display

E-commerce order summary with items, subtotal, tax, and checkout button.

Order Summary

Pro Plan

×1

$29.00

Extra Seat

×3

$27.00

Storage Add-on

×1

$5.00

Subtotal$61

Tax (10%)$6.10

Total$67.10

<div class="rounded-2xl border border-zinc-200 bg-white shadow-sm overflow-hidden">
  <div class="border-b border-zinc-100 px-4 py-3"><p class="text-sm font-bold text-zinc-800">Order Summary</p></div>
  <div class="divide-y divide-zinc-50 px-4">
    <div class="flex items-center justify-between py-2.5">
      <div><p class="text-xs font-medium text-zinc-800">Pro Plan</p><p class="text-[10px] text-zinc-400">×1</p></div>
      <p class="text-xs font-semibold text-zinc-700">$29.00</p>
    </div>
  </div>
  <div class="border-t border-zinc-200 px-4 py-3 space-y-1.5">
    <div class="flex justify-between text-xs text-zinc-500"><span>Subtotal</span><span>$43.00</span></div>
    <div class="flex justify-between text-xs text-zinc-500"><span>Tax (10%)</span><span>$4.30</span></div>
    <div class="flex justify-between text-sm font-bold text-zinc-800 pt-1 border-t border-zinc-100"><span>Total</span><span>$47.30</span></div>
  </div>
  <div class="px-4 pb-4"><button class="w-full rounded-xl bg-blue-600 py-2.5 text-sm font-bold text-white hover:bg-blue-700 transition">Checkout</button></div>
</div>

📊

Metric + Sparkline

Display

KPI card with an inline SVG sparkline trend line — no library needed.

Revenue

$12,845

+18%

Users

4,291

+6%

Bounce Rate

32.4%

-3%

Sessions

9,832

+12%

<div class="rounded-xl border border-zinc-200 bg-white p-3 shadow-sm">
  <p class="text-[10px] font-medium text-zinc-400 uppercase tracking-wide">Revenue</p>
  <p class="mt-1 text-lg font-bold text-zinc-800">$12,845</p>
  <!-- SVG sparkline -->
  <svg viewBox="0 0 100 100" class="h-8 w-full my-2" preserveAspectRatio="none">
    <polyline fill="none" stroke="#3b82f6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
      points="0,70 11,55 22,72 33,40 44,25 55,48 66,10 77,32 88,15 100,5" />
  </svg>
  <span class="text-[10px] font-bold text-emerald-600">+18%</span>
</div>

📊

Activity Heatmap

Display

GitHub-style contribution heatmap grid with color intensity legend.

Activity Heatmap

248 contributions

SMTWTFS

Less

<!-- Heatmap row (repeat per day) -->
<div class="flex items-center gap-1">
  <span class="w-6 text-[9px] text-zinc-400 text-right">Mon</span>
  <div class="h-3 w-3 rounded-sm bg-zinc-100"></div>
  <div class="h-3 w-3 rounded-sm bg-emerald-200"></div>
  <div class="h-3 w-3 rounded-sm bg-emerald-500"></div>
  <!-- Repeat cells per week -->
</div>
<!-- Legend -->
<div class="flex items-center gap-1 mt-1">
  <span class="text-[9px] text-zinc-400">Less</span>
  <div class="h-2.5 w-2.5 rounded-sm bg-zinc-100"></div>
  <div class="h-2.5 w-2.5 rounded-sm bg-emerald-200"></div>
  <div class="h-2.5 w-2.5 rounded-sm bg-emerald-500"></div>
  <div class="h-2.5 w-2.5 rounded-sm bg-emerald-700"></div>
  <span class="text-[9px] text-zinc-400">More</span>
</div>

📊

Blockquote Styles

Display

Styled blockquote variants — colored accent, dark, and pull quote.

“Design is not just what it looks like and feels like. Design is how it works.”
— Steve Jobs

“
Any sufficiently advanced technology is indistinguishable from magic.
— Arthur C. Clarke

<!-- Blue accent quote -->
<blockquote class="rounded-2xl border-l-4 border-blue-500 bg-blue-50 px-5 py-4">
  <p class="text-sm text-blue-900 italic leading-relaxed">"Design is not just what it looks like and feels like. Design is how it works."</p>
  <footer class="mt-2 text-xs font-semibold text-blue-600">— Steve Jobs</footer>
</blockquote>
<!-- Dark quote -->
<blockquote class="rounded-2xl bg-zinc-900 px-5 py-4">
  <p class="text-2xl text-zinc-400 font-serif leading-none mb-2">"</p>
  <p class="text-sm text-zinc-300 leading-relaxed">Any sufficiently advanced technology is indistinguishable from magic.</p>
  <footer class="mt-2 text-xs text-zinc-500">— Arthur C. Clarke</footer>
</blockquote>

📊

Image Overlay Card

Display

Image card with gradient overlay, title, badge, and hover zoom effect.

Mountain Vista

Photography

🔍

New

Sunset Glow

★★★★★

<div class="relative w-40 h-28 rounded-2xl overflow-hidden group cursor-pointer">
  <img src="..." alt="" class="absolute inset-0 h-full w-full object-cover group-hover:scale-110 transition duration-500" />
  <!-- Or gradient placeholder -->
  <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-purple-700"></div>
  <!-- Overlay content -->
  <div class="absolute inset-0 flex flex-col justify-end p-3 bg-gradient-to-t from-black/70 via-transparent">
    <p class="text-white text-xs font-bold">Mountain Vista</p>
    <p class="text-white/70 text-[10px]">Photography</p>
  </div>
  <!-- Hover overlay -->
  <div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
    <span class="text-white text-2xl">🔍</span>
  </div>
</div>

🧭

Bottom Navigation

Navigation

Mobile-style tab bar with active indicator, badge, and icons.

App Content

<nav class="flex bg-white border-t border-zinc-200 safe-area-inset-bottom">
  <!-- Active tab -->
  <button class="relative flex flex-1 flex-col items-center py-2.5 gap-0.5 text-blue-600">
    <span class="text-lg leading-none">🏠</span>
    <span class="text-[9px] font-medium">Home</span>
    <span class="absolute bottom-0 left-1/2 -translate-x-1/2 h-0.5 w-5 rounded-full bg-blue-600"></span>
  </button>
  <!-- Inactive tab with badge -->
  <button class="relative flex flex-1 flex-col items-center py-2.5 gap-0.5 text-zinc-400 hover:text-zinc-600">
    <span class="text-lg leading-none">🔔</span>
    <span class="text-[9px] font-medium">Alerts</span>
    <span class="absolute top-1.5 right-3 h-3.5 min-w-[14px] rounded-full bg-red-500 text-[8px] font-bold text-white flex items-center justify-center px-0.5">3</span>
  </button>
</nav>

🧭

Drawer / Side Panel

Navigation

Slide-in side drawer with overlay backdrop and content sections.

<!-- Trigger -->
<button class="rounded-lg bg-zinc-800 px-4 py-2 text-sm font-semibold text-white">Open Drawer</button>

<!-- Drawer -->
<div class="fixed inset-0 z-50 flex">
  <!-- Backdrop -->
  <div class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
  <!-- Panel -->
  <div class="relative ml-auto h-full w-72 bg-white shadow-2xl flex flex-col">
    <div class="flex items-center justify-between border-b border-zinc-100 px-5 py-4">
      <h3 class="font-semibold text-zinc-800">Side Panel</h3>
      <button class="rounded-lg p-1 text-zinc-400 hover:bg-zinc-100">✕</button>
    </div>
    <div class="flex-1 overflow-y-auto p-5 space-y-1">
      <button class="flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-sm text-zinc-700 hover:bg-zinc-50">Account settings <span>›</span></button>
    </div>
    <div class="border-t p-4">
      <button class="w-full rounded-xl bg-blue-600 py-2.5 text-sm font-semibold text-white">Upgrade Plan</button>
    </div>
  </div>
</div>

🧭

Command Palette

Navigation

Spotlight-style ⌘K search modal with filtered command results.

<!-- Trigger -->
<button class="inline-flex items-center gap-2 rounded-xl border border-zinc-200 bg-white px-4 py-2 text-sm text-zinc-500 shadow-sm hover:bg-zinc-50">
  <svg .../> Search commands…<kbd class="ml-2 rounded border border-zinc-200 bg-zinc-50 px-1.5 py-0.5 font-mono text-[10px]">⌘K</kbd>
</button>
<!-- Modal -->
<div class="fixed inset-0 z-50 flex items-start justify-center pt-[15vh] bg-black/50 backdrop-blur-sm">
  <div class="w-full max-w-md rounded-2xl bg-white shadow-2xl overflow-hidden">
    <div class="flex items-center gap-3 border-b border-zinc-100 px-4 py-3">
      <svg .../> <input placeholder="Search commands…" class="flex-1 text-sm outline-none" />
    </div>
    <div class="py-2">
      <button class="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-zinc-700 hover:bg-blue-50 hover:text-blue-700">
        <span class="text-zinc-400">→</span>Dashboard
      </button>
    </div>
  </div>
</div>

🧭

Floating Action Button

Navigation

FAB with expandable action items — common in mobile and dashboard UIs.

App Background

<div class="fixed bottom-6 right-6 flex flex-col-reverse items-end gap-3">
  <!-- Action items (shown when open) -->
  <div class="flex items-center gap-2">
    <span class="rounded-lg bg-white shadow-md px-2.5 py-1 text-xs font-medium text-zinc-700">New post</span>
    <button class="h-10 w-10 rounded-full bg-white shadow-md flex items-center justify-center text-base hover:scale-110 transition">✏️</button>
  </div>
  <!-- Main FAB -->
  <button class="h-14 w-14 rounded-full bg-blue-600 shadow-lg flex items-center justify-center text-white text-2xl hover:bg-blue-700 transition rotate-45">+</button>
</div>

🧭

Back to Top

Navigation

Scroll-to-top button variants — icon only, with label, and pill style.

Scroll-triggered back-to-top button

Fixed bottom-right after scrolling 300px

<!-- Icon only -->
<button onclick="window.scrollTo({top:0,behavior:'smooth'})"
  class="fixed bottom-6 right-6 h-10 w-10 rounded-full bg-blue-600 shadow-lg flex items-center justify-center text-white text-lg hover:bg-blue-700 hover:-translate-y-1 transition-all z-50">↑</button>

<!-- With label -->
<button onclick="window.scrollTo({top:0,behavior:'smooth'})"
  class="fixed bottom-6 right-6 flex items-center gap-2 rounded-full bg-white border border-zinc-200 shadow-lg px-4 py-2 text-xs font-semibold text-zinc-700 hover:-translate-y-1 transition-all z-50">↑ Back to top</button>

⚡

Circular Progress

Feedback

SVG ring progress indicators for storage, CPU, and memory metrics.

75%

Storage

48%

CPU

92%

Memory

<div class="relative">
  <svg width="80" height="80" viewBox="0 0 80 80" class="-rotate-90">
    <!-- Track -->
    <circle cx="40" cy="40" r="30" fill="none" stroke="#e4e4e7" stroke-width="8" />
    <!-- Progress (75%) -->
    <circle cx="40" cy="40" r="30" fill="none" stroke="#3b82f6" stroke-width="8"
      stroke-dasharray="141.37 188.5" stroke-linecap="round" />
  </svg>
  <div class="absolute inset-0 flex items-center justify-center">
    <span class="text-sm font-bold text-zinc-800">75%</span>
  </div>
</div>

⚡

Status Banner

Feedback

Colored announcement banners for info, success, warning, and critical states.

📢

System maintenance on Dec 31 at 2AM UTC.

✅

All systems are operational.

⚠️

Degraded performance on API v2.

🚨

Critical incident in progress. Team notified.

<!-- Info -->
<div class="bg-blue-600 flex items-center gap-3 rounded-xl px-4 py-2.5">
  <span class="text-base shrink-0">📢</span>
  <p class="flex-1 text-xs font-medium text-white">System maintenance on Dec 31 at 2AM UTC.</p>
  <button class="shrink-0 rounded-lg bg-white/20 hover:bg-white/30 px-2.5 py-1 text-[10px] font-bold text-white transition">Learn more</button>
</div>
<!-- Critical -->
<div class="bg-red-600 flex items-center gap-3 rounded-xl px-4 py-2.5">
  <span class="text-base shrink-0">🚨</span>
  <p class="flex-1 text-xs font-medium text-white">Critical incident in progress. Team notified.</p>
  <button class="shrink-0 rounded-lg bg-white/20 px-2.5 py-1 text-[10px] font-bold text-white">Updates</button>
</div>

⚡

Confirm Dialog

Feedback

Destructive action confirmation modal with icon, warning copy, and yes/cancel.

<!-- Trigger -->
<button class="rounded-lg bg-red-500 px-4 py-2 text-sm font-semibold text-white hover:bg-red-600">Delete Account</button>

<!-- Dialog -->
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
  <div class="w-80 mx-4 rounded-2xl bg-white shadow-2xl p-6 text-center">
    <div class="mx-auto h-12 w-12 rounded-full bg-red-100 flex items-center justify-center text-2xl mb-4">🗑️</div>
    <h3 class="font-bold text-zinc-800">Delete Account?</h3>
    <p class="mt-2 text-xs text-zinc-500 leading-relaxed">This will permanently delete your account and all data.</p>
    <div class="mt-5 flex gap-2">
      <button class="flex-1 rounded-xl border border-zinc-200 py-2.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50">Cancel</button>
      <button class="flex-1 rounded-xl bg-red-500 py-2.5 text-sm font-bold text-white hover:bg-red-600">Yes, delete</button>
    </div>
  </div>
</div>

⚡

Loading Overlay

Feedback

Full-content loading overlay with spinner and message — press button to try.

<div class="relative rounded-2xl border border-zinc-200 bg-white overflow-hidden">
  <!-- Loading overlay (conditionally shown) -->
  <div class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 bg-white/90 backdrop-blur-sm rounded-2xl">
    <div class="h-10 w-10 animate-spin rounded-full border-4 border-zinc-200 border-t-blue-600"></div>
    <p class="text-sm font-semibold text-zinc-700">Loading data…</p>
  </div>
  <!-- Content behind overlay -->
  <div class="p-5 space-y-3">
    <div class="h-3 w-3/4 rounded-full bg-zinc-200"></div>
    <div class="h-3 w-full rounded-full bg-zinc-200"></div>
  </div>
</div>

⚡

Multi-Step Progress

Feedback

Horizontal progress bar linked to step dots with prev/next navigation.

✓

Details

Payment

Review

Done

<div class="space-y-4">
  <!-- Progress bar + dots -->
  <div class="relative">
    <div class="h-2 w-full rounded-full bg-zinc-200">
      <div class="h-2 w-[50%] rounded-full bg-gradient-to-r from-blue-500 to-blue-600 transition-all duration-500"></div>
    </div>
    <div class="mt-2 flex justify-between">
      <div class="flex flex-col items-center gap-1 text-[10px] font-medium text-blue-600">
        <div class="-mt-5 h-4 w-4 rounded-full border-2 border-blue-600 bg-white flex items-center justify-center"><span class="text-[8px] text-blue-600">✓</span></div>
        Details
      </div>
      <!-- Repeat for each step -->
    </div>
  </div>
  <div class="flex gap-2">
    <button class="rounded-lg border border-zinc-200 px-4 py-2 text-xs font-medium text-zinc-600 hover:bg-zinc-50 flex-1">Back</button>
    <button class="rounded-lg bg-blue-600 px-4 py-2 text-xs font-semibold text-white hover:bg-blue-700 flex-1">Next →</button>
  </div>
</div>

🪟

Context Menu

Overlay

Right-click context menu with icons, divider, and danger item.

Right-click anywhere here

<!-- Right-click zone -->
<div oncontextmenu="..." class="flex h-24 items-center justify-center rounded-xl border-2 border-dashed border-zinc-300 bg-white text-xs text-zinc-400 cursor-context-menu select-none">
  Right-click anywhere here
</div>

<!-- Context menu (shown on right-click) -->
<div class="absolute rounded-xl border border-zinc-200 bg-white shadow-xl py-1 w-40" style="left:80px;top:40px">
  <button class="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-50">✏️ Edit</button>
  <button class="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-50">📋 Copy</button>
  <div class="my-1 border-t border-zinc-100"></div>
  <button class="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-red-500 hover:bg-red-50">🗑️ Delete</button>
</div>

🪟

Bottom Sheet

Overlay

Mobile slide-up sheet with drag handle, share actions, and cancel button.

<!-- Trigger -->
<button class="rounded-lg bg-zinc-800 px-4 py-2 text-sm font-semibold text-white">Open Sheet</button>

<!-- Sheet (slides up from bottom) -->
<div class="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
  <div class="w-full max-w-md rounded-t-3xl bg-white shadow-2xl">
    <div class="flex justify-center pt-3 pb-1"><div class="h-1 w-10 rounded-full bg-zinc-200"></div></div>
    <div class="px-6 pb-2 pt-3"><h3 class="font-bold text-zinc-800">Share this post</h3></div>
    <div class="grid grid-cols-4 gap-3 px-6 py-4">
      <button class="flex flex-col items-center gap-1.5 rounded-xl p-2 hover:bg-zinc-50">
        <span class="text-xl">📘</span><span class="text-[10px] text-zinc-500">Facebook</span>
      </button>
    </div>
    <div class="px-6 pb-6">
      <button class="w-full rounded-xl border border-zinc-200 py-3 text-sm font-medium text-zinc-600">Cancel</button>
    </div>
  </div>
</div>

🪟

Image Lightbox

Overlay

Click any thumbnail to open a fullscreen lightbox with prev/next navigation.

🏔️

🌸

🌅

🌊

<!-- Thumbnails grid -->
<div class="grid grid-cols-4 gap-1.5">
  <div onclick="openLightbox(0)" class="aspect-square rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-xl cursor-zoom-in hover:scale-105 transition">🏔️</div>
  <!-- Repeat -->
</div>

<!-- Lightbox overlay -->
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-sm">
  <button class="absolute left-4 h-12 w-12 rounded-full bg-white/10 text-white text-2xl hover:bg-white/20">‹</button>
  <div class="h-64 w-64 rounded-3xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-7xl shadow-2xl">🏔️</div>
  <button class="absolute right-4 h-12 w-12 rounded-full bg-white/10 text-white text-2xl hover:bg-white/20">›</button>
  <button class="absolute top-4 right-4 h-8 w-8 rounded-full bg-white/10 text-white text-sm hover:bg-white/20 flex items-center justify-center">✕</button>
</div>

🪟

Detail Side Panel

Overlay

Flyout detail panel for user profiles, record views, and quick edits.

<!-- Trigger -->
<button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white">View Details</button>

<!-- Side panel flyout -->
<div class="fixed inset-0 z-50 flex">
  <div class="absolute inset-0 bg-black/30 backdrop-blur-sm"></div>
  <div class="relative ml-auto h-full w-80 bg-white shadow-2xl flex flex-col overflow-hidden">
    <!-- Gradient header -->
    <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-5 py-6 text-white">
      <div class="flex items-start justify-between">
        <div>
          <div class="h-12 w-12 rounded-full bg-white/20 flex items-center justify-center text-lg font-bold mb-2">JD</div>
          <h3 class="font-bold text-lg">Jane Doe</h3>
          <p class="text-blue-200 text-xs">Senior Designer · SF</p>
        </div>
        <button class="text-white/60 hover:text-white">✕</button>
      </div>
    </div>
    <!-- Details -->
    <div class="flex-1 overflow-y-auto p-5 space-y-4">
      <div><p class="text-[10px] font-bold uppercase tracking-widest text-zinc-400">Email</p><p class="mt-0.5 text-sm text-zinc-700">jane@company.com</p></div>
    </div>
    <div class="border-t border-zinc-100 p-4 flex gap-2">
      <button class="flex-1 rounded-xl border border-zinc-200 py-2 text-sm text-zinc-600">Message</button>
      <button class="flex-1 rounded-xl bg-blue-600 py-2 text-sm font-semibold text-white">Edit</button>
    </div>
  </div>
</div>

🪟

Cookie Banner

Overlay

GDPR cookie consent banner with accept, reject, and manage preferences.

🍪

We use cookies

We use cookies to enhance your experience, analyze site traffic, and serve personalized content.

<!-- Simple banner -->
<div class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:max-w-sm rounded-2xl border border-zinc-200 bg-white p-4 shadow-xl z-50">
  <div class="flex items-start gap-3">
    <span class="text-2xl">🍪</span>
    <div class="flex-1">
      <p class="text-sm font-semibold text-zinc-800">We use cookies</p>
      <p class="mt-0.5 text-xs text-zinc-500 leading-relaxed">We use cookies to enhance your experience and analyze site traffic.</p>
    </div>
  </div>
  <div class="mt-3 flex gap-2">
    <button class="flex-1 rounded-xl bg-blue-600 py-2 text-xs font-bold text-white hover:bg-blue-700">Accept All</button>
    <button class="flex-1 rounded-xl border border-zinc-200 py-2 text-xs font-medium text-zinc-600 hover:bg-zinc-50">Manage</button>
    <button class="flex-1 rounded-xl border border-zinc-200 py-2 text-xs font-medium text-zinc-600 hover:bg-zinc-50">Reject</button>
  </div>
</div>

▦

Hero Section

Layout

Dark gradient hero with badge, headline, sub-copy, and dual CTA buttons.

✦ New release v2.0

Build faster with
beautiful UI

Production-ready components for your next project. No design skills needed.

<div class="relative bg-gradient-to-br from-zinc-900 via-blue-950 to-indigo-900 px-8 py-16 text-center overflow-hidden">
  <!-- Badge -->
  <span class="inline-flex items-center gap-1.5 rounded-full bg-blue-500/20 border border-blue-400/30 px-3 py-1 text-[10px] font-semibold text-blue-300 mb-4">✦ New release v2.0</span>
  <!-- Headline -->
  <h1 class="text-3xl font-black text-white leading-tight">Build faster with<br/><span class="text-blue-400">beautiful UI</span></h1>
  <!-- Sub-copy -->
  <p class="mt-3 text-sm text-zinc-400 leading-relaxed max-w-sm mx-auto">Production-ready components for your next project. No design skills needed.</p>
  <!-- CTAs -->
  <div class="mt-6 flex gap-3 justify-center">
    <button class="rounded-xl bg-blue-600 px-5 py-2.5 text-sm font-bold text-white hover:bg-blue-500 transition">Get started →</button>
    <button class="rounded-xl border border-zinc-700 px-5 py-2.5 text-sm font-medium text-zinc-300 hover:border-zinc-500 transition">View docs</button>
  </div>
</div>

▦

Feature Cards

Layout

Icon + title + description feature grid — common on landing pages.

⚡

Lightning Fast

Optimized for speed.

🔒

Secure

Built-in security.

📱

Responsive

Works everywhere.

🎨

Customizable

Fully themeable.

<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
  <div class="rounded-2xl border border-zinc-200 bg-white p-5 hover:shadow-md transition">
    <div class="h-10 w-10 rounded-xl bg-amber-100 text-amber-600 flex items-center justify-center text-xl mb-4">⚡</div>
    <h3 class="text-sm font-bold text-zinc-800">Lightning Fast</h3>
    <p class="mt-1.5 text-xs text-zinc-400 leading-relaxed">Optimized for maximum performance.</p>
  </div>
  <!-- Repeat per feature -->
</div>

▦

CTA Banner

Layout

Call-to-action strip variants — gradient, white card, and inline.

Start free today

No credit card required.

Upgrade to Pro

Unlock all features.

<!-- Gradient CTA -->
<div class="rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 p-5 flex items-center justify-between gap-4">
  <div>
    <p class="text-sm font-bold text-white">Start free today</p>
    <p class="text-xs text-blue-200 mt-0.5">No credit card required.</p>
  </div>
  <button class="shrink-0 rounded-xl bg-white px-3 py-2 text-xs font-bold text-blue-600 hover:bg-blue-50 transition whitespace-nowrap">Get Started →</button>
</div>

<!-- Card CTA -->
<div class="rounded-2xl border border-zinc-200 bg-white p-5 flex items-center justify-between gap-4 shadow-sm">
  <div>
    <p class="text-sm font-bold text-zinc-800">Upgrade to Pro</p>
    <p class="text-xs text-zinc-400 mt-0.5">Unlock all features.</p>
  </div>
  <button class="shrink-0 rounded-xl bg-blue-600 px-3 py-2 text-xs font-bold text-white hover:bg-blue-700 transition">Upgrade</button>
</div>

▦

Footer

Layout

Dark site footer with logo, tagline, social links, and multi-column link grid.

AppName

Building the future of developer tooling, one component at a time.

Product

Features

Pricing

Changelog

Company

About

Blog

Careers

Legal

Privacy

Terms

<footer class="bg-zinc-900">
  <div class="px-5 py-6">
    <div class="flex items-center gap-2 mb-3">
      <div class="h-6 w-6 rounded-lg bg-blue-500 flex items-center justify-center text-white text-xs font-bold">A</div>
      <span class="text-sm font-bold text-white">AppName</span>
    </div>
    <p class="text-xs text-zinc-400 leading-relaxed">Building the future of developer tooling.</p>
    <div class="mt-3 flex gap-2">
      <button class="h-7 w-7 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-400 hover:text-white text-xs flex items-center justify-center">𝕏</button>
    </div>
  </div>
  <div class="bg-zinc-800 px-5 py-4 grid grid-cols-3 gap-4">
    <div><p class="text-[10px] font-bold uppercase tracking-widest text-zinc-500 mb-2">Product</p>
      <p class="text-[10px] text-zinc-400 hover:text-zinc-200 cursor-pointer mb-1">Features</p></div>
  </div>
  <div class="bg-zinc-900 border-t border-zinc-800 px-5 py-3">
    <p class="text-[10px] text-zinc-600">© 2024 AppName. All rights reserved.</p>
  </div>
</footer>

▦

Grid System

Layout

Responsive column grid demo — 2-col, 3-col, mixed, and full-width layouts.

1/2

1/3

1/4

1/2

1/4

3/4

Full

Responsive grid system demo

<!-- 2 equal columns -->
<div class="grid grid-cols-2 gap-4">
  <div class="rounded-lg border-2 border-dashed border-zinc-300 bg-blue-50 py-3 text-center text-xs font-bold text-blue-500">1/2</div>
  <div class="rounded-lg border-2 border-dashed border-zinc-300 bg-blue-50 py-3 text-center text-xs font-bold text-blue-500">1/2</div>
</div>
<!-- Mixed: 1/4 + 3/4 -->
<div class="grid grid-cols-4 gap-4">
  <div class="rounded-lg border-2 border-dashed border-zinc-300 bg-blue-50 py-3 text-center text-xs font-bold text-blue-500">1/4</div>
  <div class="col-span-3 rounded-lg border-2 border-dashed border-zinc-300 bg-blue-50 py-3 text-center text-xs font-bold text-blue-500">3/4</div>
</div>

🧭

Breadcrumb with Icons

Navigation

Icon-prefixed breadcrumb and pill-style breadcrumb variants.

<!-- Icon breadcrumb -->
<nav class="flex items-center gap-1.5 text-sm">
  <a href="/" class="flex items-center gap-1 rounded-lg px-2.5 py-1 text-xs font-medium text-blue-600 hover:bg-blue-50 transition">🏠 Home</a>
  <span class="text-zinc-300">/</span>
  <a href="/users" class="flex items-center gap-1 rounded-lg px-2.5 py-1 text-xs font-medium text-blue-600 hover:bg-blue-50 transition">👥 Users</a>
  <span class="text-zinc-300">/</span>
  <span class="flex items-center gap-1 rounded-lg px-2.5 py-1 text-xs font-medium bg-zinc-100 text-zinc-600">✏️ Edit</span>
</nav>

<!-- Card-style breadcrumb -->
<nav class="flex items-center rounded-xl border border-zinc-200 bg-white px-4 py-2 shadow-sm text-xs w-fit">
  <a href="/" class="text-blue-600 hover:underline">Dashboard</a>
  <svg class="mx-1.5 h-3 w-3 text-zinc-300" .../><!-- ChevronRight -->
  <a href="/projects" class="text-blue-600 hover:underline">Projects</a>
  <svg class="mx-1.5 h-3 w-3 text-zinc-300" .../>
  <span class="font-semibold text-zinc-800">Settings</span>
</nav>

📊

Timeline

Display

Vertical event timeline with colored dots, timestamps, and connector lines.

09:00

Project Kickoff

Team aligned on goals.

11:30

Design Review

Wireframes approved.

14:00

Dev Sprint Start

Tickets assigned.

17:00

Deployment

v1.2 shipped to production.

<div class="flex flex-col gap-0">
  <!-- Event -->
  <div class="flex gap-3">
    <div class="flex flex-col items-center">
      <div class="mt-1 h-2.5 w-2.5 rounded-full bg-blue-500 shrink-0"></div>
      <div class="my-1 w-px flex-1 bg-zinc-200"></div>
    </div>
    <div class="pb-4">
      <p class="text-[10px] font-mono text-zinc-400">09:00</p>
      <p class="text-sm font-semibold text-zinc-800">Project Kickoff</p>
      <p class="text-xs text-zinc-500">Team aligned on goals.</p>
    </div>
  </div>
  <!-- Repeat for more events -->
</div>

⚡

Skeleton Loader

Feedback

Animated placeholder that mimics content layout while data loads.

<div class="rounded-xl border border-zinc-200 bg-white p-4 space-y-3 w-72">
  <div class="flex items-center gap-3">
    <div class="h-9 w-9 rounded-full bg-zinc-200 animate-pulse"></div>
    <div class="flex-1 space-y-1.5">
      <div class="h-2.5 w-2/3 rounded-full bg-zinc-200 animate-pulse"></div>
      <div class="h-2 w-1/3 rounded-full bg-zinc-100 animate-pulse"></div>
    </div>
  </div>
  <div class="space-y-1.5">
    <div class="h-2 w-full rounded-full bg-zinc-200 animate-pulse"></div>
    <div class="h-2 w-5/6 rounded-full bg-zinc-200 animate-pulse"></div>
    <div class="h-2 w-3/4 rounded-full bg-zinc-100 animate-pulse"></div>
  </div>
</div>

📊

Avatar Group

Display

Stacked overlapping avatars with overflow count indicator and size variants.

13 team members

<div class="flex items-center">
  <div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500 text-[11px] font-bold text-white ring-2 ring-white">JD</div>
  <div class="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-500 text-[11px] font-bold text-white ring-2 ring-white -ml-2.5">KL</div>
  <div class="flex h-10 w-10 items-center justify-center rounded-full bg-purple-500 text-[11px] font-bold text-white ring-2 ring-white -ml-2.5">MP</div>
  <div class="flex h-10 w-10 items-center justify-center rounded-full bg-zinc-200 text-[11px] font-bold text-zinc-600 ring-2 ring-white -ml-2.5">+8</div>
</div>

🧭

Split Button

Navigation

Primary action combined with a dropdown for secondary actions.

<div class="relative flex">
  <button class="rounded-l-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 transition border-r border-blue-500">
    Save
  </button>
  <button class="rounded-r-lg bg-blue-600 px-2.5 py-2 text-sm text-white hover:bg-blue-700 transition">▼</button>
  <!-- Dropdown (toggled) -->
  <div class="absolute top-full right-0 mt-1 w-44 rounded-xl border border-zinc-200 bg-white shadow-xl z-10 py-1">
    <button class="w-full px-4 py-2 text-left text-sm text-zinc-700 hover:bg-zinc-50">Save & Close</button>
    <button class="w-full px-4 py-2 text-left text-sm text-zinc-700 hover:bg-zinc-50">Save as Draft</button>
    <button class="w-full px-4 py-2 text-left text-sm text-zinc-700 hover:bg-zinc-50">Publish</button>
  </div>
</div>

✏️

File Upload Dropzone

Forms & Inputs

Drag-and-drop upload zone with file name display and clear action.

📁

Drop files here

PNG, JPG, PDF, FIG up to 10MB

<div class="rounded-xl border-2 border-dashed border-zinc-300 bg-white p-6 text-center hover:border-zinc-400 transition cursor-pointer">
  <div class="text-2xl mb-2">📁</div>
  <p class="text-sm font-semibold text-zinc-700">Drop files here</p>
  <p class="text-xs text-zinc-400 mt-1">or <a class="text-blue-600 underline">browse files</a></p>
  <p class="text-[10px] text-zinc-400 mt-2">PNG, JPG, PDF up to 10MB</p>
</div>

✏️

Inline Edit

Forms & Inputs

Click-to-edit field with confirm and cancel actions — no separate edit page.

Project Name

Click the field to edit inline

<!-- View mode -->
<button class="group flex w-full items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-semibold text-zinc-800 hover:bg-zinc-100 transition text-left">
  Untitled Project
  <span class="opacity-0 group-hover:opacity-100 text-zinc-400 text-xs ml-auto transition">✏️ edit</span>
</button>
<!-- Edit mode -->
<div class="flex items-center gap-2">
  <input class="flex-1 rounded-lg border border-blue-400 bg-white px-3 py-1.5 text-sm outline-none ring-2 ring-blue-100" value="Untitled Project" />
  <button class="rounded-lg bg-blue-600 px-2.5 py-1.5 text-xs font-bold text-white">✓</button>
  <button class="rounded-lg border border-zinc-200 px-2.5 py-1.5 text-xs text-zinc-500">✕</button>
</div>

📊

Sortable Data Table

Display

Table with sortable column headers, status badges, and hover row highlight.

name ↑	role	status
Alice Kim	Designer	Active
Bob Patel	Engineer	Idle
Carol Wu	PM	Active
Dan Rose	Engineer	Away

<div class="overflow-x-auto rounded-xl border border-zinc-200 bg-white">
  <table class="w-full text-sm">
    <thead class="border-b border-zinc-100 bg-zinc-50">
      <tr>
        <th class="cursor-pointer px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500">Name ↑</th>
        <th class="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500">Role</th>
        <th class="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-zinc-50 hover:bg-zinc-50 transition">
        <td class="px-4 py-2.5 font-medium text-zinc-800">Alice Kim</td>
        <td class="px-4 py-2.5 text-zinc-500">Designer</td>
        <td class="px-4 py-2.5"><span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-[10px] font-semibold text-emerald-700">Active</span></td>
      </tr>
    </tbody>
  </table>
</div>

🧭

Vertical Stepper

Navigation

Multi-step wizard with completed, current, and upcoming states and back/next controls.

Account

Enter your email & password

Profile

Add your name and avatar

Plan

Choose a subscription tier

Done

Review and confirm setup

<div class="flex flex-col gap-0">
  <!-- Completed step -->
  <div class="flex gap-3">
    <div class="flex flex-col items-center">
      <div class="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-500 border-2 border-emerald-500 text-white text-xs font-bold">✓</div>
      <div class="my-0.5 w-0.5 flex-1 min-h-[20px] bg-emerald-300"></div>
    </div>
    <div class="pb-4 pt-1"><p class="text-sm font-semibold text-zinc-800">Account</p><p class="text-xs text-zinc-500">Enter your email & password</p></div>
  </div>
  <!-- Active step -->
  <div class="flex gap-3">
    <div class="flex flex-col items-center">
      <div class="flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 border-2 border-blue-600 text-white text-xs font-bold">2</div>
      <div class="my-0.5 w-0.5 flex-1 min-h-[20px] bg-zinc-200"></div>
    </div>
    <div class="pb-4 pt-1"><p class="text-sm font-semibold text-zinc-800">Profile</p><p class="text-xs text-zinc-500">Add your name and avatar</p></div>
  </div>
</div>

📊

KPI Card Group

Display

Metric summary cards with value, label, and trend indicators.

Revenue

$48.2K

+12.5%

Users

3,841

+8.1%

Churn

2.4%

-0.3%

<div class="grid grid-cols-3 gap-2">
  <div class="rounded-xl border border-zinc-200 bg-white p-3 text-center shadow-sm">
    <p class="text-[10px] text-zinc-400 font-medium">Revenue</p>
    <p class="text-lg font-bold text-zinc-900 mt-0.5">$48.2K</p>
    <span class="text-[10px] font-semibold text-emerald-600">+12.5%</span>
  </div>
  <div class="rounded-xl border border-zinc-200 bg-white p-3 text-center shadow-sm">
    <p class="text-[10px] text-zinc-400 font-medium">Users</p>
    <p class="text-lg font-bold text-zinc-900 mt-0.5">3,841</p>
    <span class="text-[10px] font-semibold text-emerald-600">+8.1%</span>
  </div>
  <div class="rounded-xl border border-zinc-200 bg-white p-3 text-center shadow-sm">
    <p class="text-[10px] text-zinc-400 font-medium">Churn</p>
    <p class="text-lg font-bold text-zinc-900 mt-0.5">2.4%</p>
    <span class="text-[10px] font-semibold text-rose-500">-0.3%</span>
  </div>
</div>

📊

Color Swatch Palette

Display

Clickable color palette with selection ring and HEX code display.

#3B82F6

<div class="flex flex-wrap gap-2 max-w-[200px]">
  <button style="background:#3B82F6" class="h-8 w-8 rounded-lg ring-2 ring-offset-2 ring-zinc-600 hover:scale-110 transition"></button>
  <button style="background:#8B5CF6" class="h-8 w-8 rounded-lg hover:scale-110 transition"></button>
  <button style="background:#10B981" class="h-8 w-8 rounded-lg hover:scale-110 transition"></button>
  <!-- more colors -->
</div>
<div class="flex items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-1.5 mt-2 w-fit">
  <div class="h-4 w-4 rounded" style="background:#3B82F6"></div>
  <code class="text-xs font-mono text-zinc-700">#3B82F6</code>
</div>

✏️

Chip / Tag Input

Forms & Inputs

Removable pill tags with keyboard-friendly add-on-enter input field.

ReactTypeScriptTailwindNext.js

<div class="space-y-2">
  <div class="flex flex-wrap gap-1.5">
    <span class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-semibold text-blue-700">
      React <button class="opacity-60 hover:opacity-100">✕</button>
    </span>
    <span class="inline-flex items-center gap-1 rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-semibold text-purple-700">
      TypeScript <button class="opacity-60 hover:opacity-100">✕</button>
    </span>
  </div>
  <div class="flex gap-2">
    <input placeholder="Add tag…" class="flex-1 rounded-lg border border-zinc-300 bg-white px-3 py-1.5 text-xs outline-none focus:border-blue-400" />
    <button class="rounded-lg bg-zinc-800 px-3 py-1.5 text-xs font-semibold text-white">Add</button>
  </div>
</div>

⚡

Progress Ring

Feedback

SVG circular progress indicators with percentage labels and color variants.

CPU

RAM

Disk

<!-- CPU ring (75%) -->
<div class="flex flex-col items-center gap-1.5">
  <svg width="60" height="60" viewBox="0 0 60 60">
    <circle cx="30" cy="30" r="22" fill="none" stroke="#e4e4e7" stroke-width="5"/>
    <circle cx="30" cy="30" r="22" fill="none" stroke="#3B82F6" stroke-width="5"
      stroke-dasharray="103.67 138.23" stroke-linecap="round" transform="rotate(-90 30 30)"/>
    <text x="30" y="34" text-anchor="middle" fill="#18181b" font-size="11" font-weight="700">75%</text>
  </svg>
  <span class="text-[10px] font-semibold text-zinc-500">CPU</span>
</div>

▦

Page Header

Layout

Breadcrumb navigation + title + action buttons — standard page header pattern.

Project Alpha

Last updated 2 hours ago

<div class="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm">
  <nav class="flex items-center gap-1 text-xs text-zinc-400 mb-3">
    <a class="text-blue-600 hover:underline">Dashboard</a>
    <span>›</span>
    <a class="text-blue-600 hover:underline">Projects</a>
    <span>›</span>
    <span class="text-zinc-600 font-medium">Alpha</span>
  </nav>
  <div class="flex items-start justify-between gap-2">
    <div>
      <h2 class="text-base font-bold text-zinc-900">Project Alpha</h2>
      <p class="text-xs text-zinc-500 mt-0.5">Last updated 2 hours ago</p>
    </div>
    <div class="flex gap-1.5">
      <button class="rounded-lg border border-zinc-200 px-2.5 py-1 text-xs font-medium text-zinc-600 hover:bg-zinc-50">Share</button>
      <button class="rounded-lg bg-blue-600 px-2.5 py-1 text-xs font-semibold text-white hover:bg-blue-700">Edit</button>
    </div>
  </div>
</div>

🪟

Notification Center

Overlay

Grouped notification list with unread badge, mark-all-read, and click-to-read.

Notifications2

💬

New comment

Alice left a comment on Alpha.

✅

Task completed

Design review marked done.

🚀

Deploy success

v1.3 deployed to production.

<div class="rounded-xl border border-zinc-200 bg-white shadow-sm overflow-hidden w-80">
  <div class="flex items-center justify-between px-4 py-3 border-b border-zinc-100">
    <div class="flex items-center gap-2">
      <span class="text-sm font-semibold text-zinc-800">Notifications</span>
      <span class="rounded-full bg-blue-600 px-1.5 py-0.5 text-[9px] font-bold text-white">2</span>
    </div>
    <button class="text-xs text-blue-600 hover:underline">Mark all read</button>
  </div>
  <div class="flex items-start gap-3 px-4 py-3 hover:bg-blue-50/40 cursor-pointer border-b border-zinc-50">
    <span class="text-base mt-0.5">💬</span>
    <div class="flex-1 min-w-0">
      <p class="text-xs font-semibold text-zinc-800">New comment</p>
      <p class="text-xs text-zinc-500 truncate">Alice left a comment on Alpha.</p>
    </div>
    <span class="text-[10px] text-zinc-400">2m</span>
    <div class="mt-1.5 h-1.5 w-1.5 rounded-full bg-blue-500"></div>
  </div>
</div>

📊

Media Player

Display

Audio player UI with album art, progress bar, volume control, and playback buttons.

🎵

Midnight Drive

Neon Echoes

1:212:47

🔈

🔊

<div class="rounded-2xl bg-zinc-800 p-4 shadow-xl w-72">
  <div class="flex items-center gap-3 mb-4">
    <div class="h-12 w-12 rounded-lg bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center text-xl">🎵</div>
    <div><p class="text-sm font-semibold text-white">Midnight Drive</p><p class="text-xs text-zinc-400">Neon Echoes</p></div>
  </div>
  <div class="h-1.5 w-full rounded-full bg-zinc-700 mb-4">
    <div class="h-full w-[35%] rounded-full bg-gradient-to-r from-purple-500 to-blue-500"></div>
  </div>
  <div class="flex items-center justify-center gap-4 mb-4">
    <button class="text-zinc-400 hover:text-white text-lg">⏮</button>
    <button class="flex h-10 w-10 items-center justify-center rounded-full bg-white text-zinc-900 font-bold">▶</button>
    <button class="text-zinc-400 hover:text-white text-lg">⏭</button>
  </div>
</div>

📊

Pricing Toggle

Display

Monthly / Annual billing toggle with dynamic price update and discount badge.

MonthlyAnnual -20%

Starter

$9/mo

5 projects
10GB storage
Email support

ProPopular

$29/mo

Unlimited projects
100GB storage
Priority support

<div class="space-y-3">
  <div class="flex items-center justify-center gap-3">
    <span class="text-xs font-semibold text-zinc-900">Monthly</span>
    <button class="relative h-6 w-11 rounded-full bg-blue-600">
      <span class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow translate-x-5"></span>
    </button>
    <span class="text-xs font-semibold text-zinc-400">Annual <span class="text-emerald-600">-20%</span></span>
  </div>
  <div class="grid grid-cols-2 gap-2">
    <div class="rounded-xl border-2 border-zinc-200 bg-white p-3">
      <p class="text-xs font-bold text-zinc-700">Starter</p>
      <p class="text-xl font-bold text-zinc-900 mt-1">$9<span class="text-[10px] text-zinc-400">/mo</span></p>
    </div>
    <div class="rounded-xl border-2 border-blue-500 bg-white p-3">
      <p class="text-xs font-bold text-zinc-700">Pro</p>
      <p class="text-xl font-bold text-zinc-900 mt-1">$29<span class="text-[10px] text-zinc-400">/mo</span></p>
    </div>
  </div>
</div>

🧭

Segmented Control

Navigation

iOS-style pill segment switcher — great for view mode or filter toggles.

<div class="inline-flex rounded-xl bg-zinc-100 p-1 gap-0.5">
  <button class="rounded-lg bg-white px-4 py-1.5 text-xs font-semibold text-zinc-900 shadow-sm">Day</button>
  <button class="rounded-lg px-4 py-1.5 text-xs font-semibold text-zinc-500 hover:text-zinc-700">Week</button>
  <button class="rounded-lg px-4 py-1.5 text-xs font-semibold text-zinc-500 hover:text-zinc-700">Month</button>
  <button class="rounded-lg px-4 py-1.5 text-xs font-semibold text-zinc-500 hover:text-zinc-700">Year</button>
</div>

✏️

Rich Text Toolbar

Forms & Inputs

Formatting toolbar for rich text editors — bold, italic, headings, lists.

Start typing your content here…

<div class="flex items-center gap-1 rounded-xl border border-zinc-200 bg-white px-2 py-1.5">
  <button class="h-7 w-7 rounded-lg bg-blue-600 text-white text-sm font-bold">B</button>
  <button class="h-7 w-7 rounded-lg text-zinc-600 text-sm italic hover:bg-zinc-100">I</button>
  <button class="h-7 w-7 rounded-lg text-zinc-600 text-sm underline hover:bg-zinc-100">U</button>
  <div class="h-5 w-px bg-zinc-200 mx-1"></div>
  <button class="rounded-lg px-2 py-0.5 text-xs font-bold text-zinc-600 hover:bg-zinc-100">H1</button>
  <button class="rounded-lg px-2 py-0.5 text-xs font-bold text-zinc-600 hover:bg-zinc-100">H2</button>
  <div class="h-5 w-px bg-zinc-200 mx-1"></div>
  <button class="rounded-lg px-2 py-0.5 text-xs text-zinc-600 hover:bg-zinc-100">• List</button>
  <button class="rounded-lg px-2 py-0.5 text-xs text-zinc-600 hover:bg-zinc-100">— Quote</button>
</div>

✏️

Autocomplete Input

Forms & Inputs

Search input with live filtered dropdown suggestions.

<div class="relative w-64">
  <input placeholder="Search languages…" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-2.5 text-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100" />
  <!-- Dropdown -->
  <div class="absolute z-10 mt-1 w-full rounded-xl border border-zinc-200 bg-white shadow-xl overflow-hidden">
    <button class="flex w-full items-center gap-2 px-4 py-2.5 text-sm text-zinc-700 hover:bg-blue-50 hover:text-blue-700">🔍 JavaScript</button>
    <button class="flex w-full items-center gap-2 px-4 py-2.5 text-sm text-zinc-700 hover:bg-blue-50 hover:text-blue-700">🔍 TypeScript</button>
    <button class="flex w-full items-center gap-2 px-4 py-2.5 text-sm text-zinc-700 hover:bg-blue-50 hover:text-blue-700">🔍 Python</button>
  </div>
</div>

✏️

Transfer List

Forms & Inputs

Move items between two lists — classic dual-list picker pattern.

Available

Analytics

Reports

Export

API

Selected

Dashboard

Users

<div class="flex items-center gap-2">
  <!-- Left list -->
  <div class="h-28 w-32 overflow-y-auto rounded-xl border border-zinc-200 bg-white py-1">
    <div class="bg-blue-600 text-white px-3 py-1.5 text-xs cursor-pointer">Analytics</div>
    <div class="text-zinc-700 px-3 py-1.5 text-xs hover:bg-zinc-50 cursor-pointer">Reports</div>
  </div>
  <!-- Arrow buttons -->
  <div class="flex flex-col gap-1.5">
    <button class="rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs font-bold">→</button>
    <button class="rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs font-bold">←</button>
  </div>
  <!-- Right list -->
  <div class="h-28 w-32 overflow-y-auto rounded-xl border border-zinc-200 bg-white py-1">
    <div class="text-zinc-700 px-3 py-1.5 text-xs hover:bg-zinc-50 cursor-pointer">Dashboard</div>
  </div>
</div>

📊

Activity Feed

Display

GitHub-style activity log with icons, user actions, and timestamps.

🟢

Alice pushed to main

2m ago

💬

Bob commented on PR #42

18m ago

🔀

Carol merged feature/auth

1h ago

🐛

Dan opened issue #91

3h ago

<div class="space-y-2">
  <div class="flex items-start gap-3 rounded-xl border border-emerald-100 bg-emerald-50 px-3 py-2.5">
    <span class="text-base">🟢</span>
    <div><p class="text-xs text-zinc-700"><strong>Alice</strong> pushed to main</p><p class="text-[10px] text-zinc-400 mt-0.5">2m ago</p></div>
  </div>
  <div class="flex items-start gap-3 rounded-xl border border-blue-100 bg-blue-50 px-3 py-2.5">
    <span class="text-base">💬</span>
    <div><p class="text-xs text-zinc-700"><strong>Bob</strong> commented on PR #42</p><p class="text-[10px] text-zinc-400 mt-0.5">18m ago</p></div>
  </div>
</div>

📊

Leaderboard

Display

Ranked list with medal icons, avatar initials, and score display.

🥇

Alice Kim9,820

🥈

Bob Patel8,750

🥉

Carol Wu7,430

Dan Rose6,210

Eve Stone5,980

<div class="rounded-xl border border-zinc-200 bg-white overflow-hidden">
  <div class="flex items-center gap-3 border-b border-zinc-50 bg-amber-50 px-4 py-2.5">
    <span class="w-5 text-center">🥇</span>
    <div class="flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-purple-500 text-[10px] font-bold text-white">AK</div>
    <span class="flex-1 text-sm font-medium text-zinc-800">Alice Kim</span>
    <span class="text-xs font-bold text-zinc-600">9,820</span>
  </div>
  <div class="flex items-center gap-3 border-b border-zinc-50 px-4 py-2.5">
    <span class="w-5 text-center">🥈</span>
    <div class="flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-emerald-500 to-teal-500 text-[10px] font-bold text-white">BP</div>
    <span class="flex-1 text-sm font-medium text-zinc-800">Bob Patel</span>
    <span class="text-xs font-bold text-zinc-600">8,750</span>
  </div>
</div>

📊

Gauge Meter

Display

SVG speedometer gauge with dynamic color zones — drag slider to update.

68%

● Good● Warn● Critical

<!-- Gauge is SVG-based -->
<svg width="140" height="90" viewBox="0 0 140 90">
  <!-- Background arc -->
  <path d="M15 80 A55 55 0 0 1 125 80" fill="none" stroke="#e4e4e7" stroke-width="10" stroke-linecap="round"/>
  <!-- Value arc (68%) -->
  <path d="M15 80 A55 55 0 0 1 125 80" fill="none" stroke="#f59e0b" stroke-width="10" stroke-linecap="round"
    stroke-dasharray="117.5 172.8"/>
  <!-- Needle -->
  <line x1="70" y1="80" x2="107" y2="47" stroke="#18181b" stroke-width="2.5" stroke-linecap="round"/>
  <circle cx="70" cy="80" r="4" fill="#18181b"/>
  <text x="70" y="70" text-anchor="middle" fill="#f59e0b" font-size="14" font-weight="700">68%</text>
</svg>

📊

Radar / Spider Chart

Display

SVG spider chart for visualizing multi-axis scores and skill sets.

<!-- Radar is SVG-based — use a charting lib in production -->
<svg width="150" height="150" viewBox="0 0 150 150">
  <!-- Grid polygons, axis lines, and data polygon via SVG -->
  <!-- See CSS snippet for structure guidance -->
</svg>

📊

User / Profile Card

Display

Social-style profile card with cover image, avatar, stats, and follow button.

Alice Kim

Senior Product Designer · SF

142

Posts

8.4K

Followers

320

Following

<div class="rounded-2xl border border-zinc-200 bg-white shadow-sm overflow-hidden w-56">
  <!-- Cover -->
  <div class="h-16 bg-gradient-to-r from-blue-500 to-violet-500"></div>
  <div class="px-4 pb-4">
    <div class="flex items-end justify-between -mt-7 mb-3">
      <div class="h-14 w-14 rounded-2xl border-4 border-white bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-lg font-bold text-white shadow">AK</div>
      <button class="rounded-full bg-blue-600 px-3 py-1 text-xs font-semibold text-white hover:bg-blue-700">Follow</button>
    </div>
    <p class="text-sm font-bold text-zinc-900">Alice Kim</p>
    <p class="text-xs text-zinc-400 mb-2">Senior Product Designer · SF</p>
    <div class="flex gap-4 text-center">
      <div><p class="text-xs font-bold text-zinc-900">142</p><p class="text-[10px] text-zinc-400">Posts</p></div>
      <div><p class="text-xs font-bold text-zinc-900">8.4K</p><p class="text-[10px] text-zinc-400">Followers</p></div>
    </div>
  </div>
</div>

📊

Gantt Chart

Display

Simple sprint Gantt / timeline bar chart for project planning views.

Research

Design

Build

Test

Launch

<div class="space-y-1.5">
  <!-- Week labels -->
  <div class="flex items-center gap-1 pl-16 mb-2">
    <div class="flex-1 text-center text-[9px] font-bold text-zinc-400">W1</div>
    <!-- ...repeat for W2–W8 -->
  </div>
  <!-- Task row -->
  <div class="flex items-center gap-2">
    <span class="w-14 text-[11px] font-medium text-zinc-600 text-right shrink-0">Research</span>
    <div class="flex flex-1 gap-1">
      <div class="flex-1 h-6 rounded-sm bg-blue-400"></div><!-- W1 filled -->
      <div class="flex-1 h-6 rounded-sm bg-blue-400"></div><!-- W2 filled -->
      <div class="flex-1 h-6 rounded-sm bg-zinc-100"></div><!-- W3 empty -->
    </div>
  </div>
</div>

🧭

Mega Menu

Navigation

Multi-column dropdown menu with icons and descriptions for complex navs.

<div class="relative">
  <button class="inline-flex items-center gap-1.5 rounded-xl bg-zinc-900 px-4 py-2 text-sm font-semibold text-white">
    Products ▾
  </button>
  <!-- Mega dropdown -->
  <div class="absolute left-0 top-full mt-2 w-80 rounded-2xl border border-zinc-200 bg-white shadow-2xl p-4 z-10">
    <div class="grid grid-cols-2 gap-4">
      <div>
        <p class="mb-2 text-[10px] font-bold uppercase tracking-wider text-zinc-400">Products</p>
        <button class="flex w-full items-start gap-2.5 rounded-xl p-2 hover:bg-zinc-50">
          <span>📊</span>
          <div><p class="text-xs font-semibold text-zinc-800">Analytics</p><p class="text-[10px] text-zinc-400">Track metrics</p></div>
        </button>
      </div>
    </div>
  </div>
</div>

🧭

macOS Dock

Navigation

macOS-style icon dock with magnification effect on hover.

Hover the icons

<div class="flex items-end gap-1.5 rounded-2xl border border-white/10 bg-white/10 px-3 py-2 backdrop-blur-md">
  <button class="flex h-10 w-10 items-center justify-center rounded-xl bg-white/15 text-xl hover:scale-150 hover:-translate-y-3 transition-all duration-150">🌐</button>
  <button class="flex h-10 w-10 items-center justify-center rounded-xl bg-white/15 text-xl hover:scale-150 hover:-translate-y-3 transition-all duration-150">📁</button>
  <button class="flex h-10 w-10 items-center justify-center rounded-xl bg-white/15 text-xl hover:scale-150 hover:-translate-y-3 transition-all duration-150">✉️</button>
  <!-- add more icons -->
</div>

✏️

Survey / NPS Rating

Forms & Inputs

NPS 0–10 scale + emoji satisfaction picker for feedback forms.

How likely are you to recommend us? (NPS)

Rate your experience

<!-- NPS row -->
<div class="flex gap-0.5 flex-wrap">
  <button class="h-7 w-7 rounded-lg text-[10px] font-bold bg-red-500 text-white">0</button>
  <button class="h-7 w-7 rounded-lg text-[10px] font-bold border border-zinc-200 text-zinc-600">1</button>
  <!-- ...0–10 -->
  <button class="h-7 w-7 rounded-lg text-[10px] font-bold bg-emerald-500 text-white">9</button>
</div>
<!-- Emoji row -->
<div class="flex gap-2">
  <button class="text-2xl opacity-40 hover:opacity-100 hover:scale-125 transition-all">😞</button>
  <button class="text-2xl opacity-40 hover:opacity-100 hover:scale-125 transition-all">😕</button>
  <button class="text-2xl scale-125">😐</button>
  <button class="text-2xl opacity-40 hover:opacity-100 hover:scale-125 transition-all">🙂</button>
  <button class="text-2xl opacity-40 hover:opacity-100 hover:scale-125 transition-all">😄</button>
</div>

📊

Typing Indicator

Display

Chat bubbles with animated "..." typing indicator and conversation preview.

Alice is typing…

Hey! How's the project going?

Almost done! Just finishing tests 🚀

<!-- Typing bubble -->
<div class="flex items-end gap-2">
  <div class="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white">AK</div>
  <div class="rounded-2xl rounded-bl-sm bg-white border border-zinc-200 px-4 py-3 shadow-sm">
    <div class="flex items-center gap-1.5">
      <div class="h-2 w-2 rounded-full bg-zinc-400 animate-bounce" style="animation-delay:0ms"></div>
      <div class="h-2 w-2 rounded-full bg-zinc-400 animate-bounce" style="animation-delay:150ms"></div>
      <div class="h-2 w-2 rounded-full bg-zinc-400 animate-bounce" style="animation-delay:300ms"></div>
    </div>
  </div>
</div>

⚡

Upload Progress

Feedback

File upload list with per-file progress bars, sizes, and completion states.

design-assets.zip

24 MB

72%

report-q4.pdf

2.1 MB

100%

video-intro.mp4

180 MB

31%

<div class="rounded-xl border border-zinc-200 bg-white px-3 py-2.5">
  <div class="flex items-center justify-between mb-1.5">
    <div>
      <p class="text-xs font-semibold text-zinc-800">design-assets.zip</p>
      <p class="text-[10px] text-zinc-400">24 MB</p>
    </div>
    <span class="text-[10px] font-bold text-zinc-500">72%</span>
  </div>
  <div class="h-1.5 w-full rounded-full bg-zinc-100">
    <div class="h-full w-[72%] rounded-full bg-blue-500 transition-all"></div>
  </div>
</div>

🪟

Popover Card

Overlay

Rich popover with user bio, role tags, and action buttons on click.

<div class="relative">
  <button class="flex items-center gap-2 rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm font-medium text-zinc-700 shadow-sm hover:bg-zinc-50">
    <div class="h-7 w-7 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-xs font-bold text-white">AK</div>
    Alice Kim
  </button>
  <!-- Popover card -->
  <div class="absolute left-0 top-full mt-2 w-64 rounded-2xl border border-zinc-200 bg-white shadow-2xl p-4 z-10">
    <div class="flex items-start gap-3 mb-3">
      <div class="h-12 w-12 shrink-0 rounded-xl bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-lg font-bold text-white">AK</div>
      <div>
        <p class="font-bold text-zinc-900">Alice Kim</p>
        <p class="text-xs text-zinc-400">Senior Designer · SF</p>
      </div>
    </div>
    <div class="flex gap-2">
      <button class="flex-1 rounded-xl bg-blue-600 py-1.5 text-xs font-semibold text-white">Message</button>
      <button class="flex-1 rounded-xl border border-zinc-200 py-1.5 text-xs font-semibold text-zinc-700">Profile</button>
    </div>
  </div>
</div>

🪟

Global Search Modal

Overlay

Full-screen ⌘K search modal with categorised results and keyboard shortcut.

<!-- Trigger -->
<button class="flex w-full items-center gap-2 rounded-xl border border-zinc-300 bg-white px-4 py-2.5 text-sm text-zinc-400 shadow-sm">
  🔍 Search everything…
  <kbd class="ml-auto rounded bg-zinc-100 px-1.5 py-0.5 text-[10px] font-semibold text-zinc-500">⌘K</kbd>
</button>
<!-- Modal (visible on open) -->
<div class="fixed inset-0 z-50 flex items-start justify-center pt-20 bg-black/40 backdrop-blur-sm">
  <div class="w-full max-w-md rounded-2xl border border-zinc-200 bg-white shadow-2xl overflow-hidden">
    <div class="flex items-center gap-3 border-b border-zinc-100 px-4 py-3">
      <svg class="w-4 h-4 text-zinc-400" .../>
      <input placeholder="Search anything…" class="flex-1 text-sm outline-none"/>
      <kbd class="rounded bg-zinc-100 px-1.5 py-0.5 text-[10px]">esc</kbd>
    </div>
    <div class="py-2">
      <button class="flex w-full items-center gap-3 px-4 py-2.5 hover:bg-zinc-50">
        <span>📄</span><div><p class="text-sm font-medium text-zinc-800">Q4 Report.pdf</p><p class="text-[10px] text-zinc-400">Documents</p></div>
      </button>
    </div>
  </div>
</div>

▦

Masonry Grid

Layout

Pinterest-style variable-height grid layout with two columns.

Analytics

API Docs

Monitoring

Design System

Deploy

Settings

<div class="flex gap-2">
  <!-- Column 1 -->
  <div class="flex flex-1 flex-col gap-2">
    <div class="rounded-xl border border-zinc-200 bg-blue-100 h-20 flex items-center justify-center">
      <p class="text-xs font-semibold text-zinc-700">Analytics</p>
    </div>
    <div class="rounded-xl border border-zinc-200 bg-emerald-100 h-24 flex items-center justify-center">
      <p class="text-xs font-semibold text-zinc-700">API Docs</p>
    </div>
  </div>
  <!-- Column 2 -->
  <div class="flex flex-1 flex-col gap-2">
    <div class="rounded-xl border border-zinc-200 bg-purple-100 h-32 flex items-center justify-center">
      <p class="text-xs font-semibold text-zinc-700">Design System</p>
    </div>
  </div>
</div>

▦

Split Pane Editor

Layout

Resizable split-view layout — code editor on left, output on right.

split-view.tsx

const x = 42

Output

→ 42

50% / 50%

<div class="rounded-xl overflow-hidden border border-zinc-700 bg-zinc-950">
  <!-- Titlebar -->
  <div class="flex items-center gap-2 bg-zinc-800 px-3 py-1.5 border-b border-zinc-700">
    <div class="h-2.5 w-2.5 rounded-full bg-red-500"></div>
    <div class="h-2.5 w-2.5 rounded-full bg-amber-400"></div>
    <div class="h-2.5 w-2.5 rounded-full bg-emerald-500"></div>
  </div>
  <!-- Panes -->
  <div class="flex h-32">
    <div class="w-1/2 bg-zinc-950 p-3 font-mono text-[10px] text-zinc-300 border-r border-zinc-700">
      <span class="text-purple-400">const</span> x = <span class="text-amber-300">42</span>
    </div>
    <div class="flex-1 bg-zinc-900 p-3 text-[10px] text-zinc-400">
      <p class="text-zinc-200 font-semibold mb-1">Output</p>
      <p class="text-emerald-400">→ 42</p>
    </div>
  </div>
</div>

📊

Sticky Header Table

Display

Scrollable table with a sticky top header and frozen first column.

Name	Role	Dept	Status	Score
Alice Kim	Designer	Product	Active	98
Bob Patel	Engineer	Eng	Active	94
Carol Wu	PM	Product	Away	87
Dan Rose	DevOps	Infra	Idle	82
Eve Stone	QA	Eng	Active	79

<div class="overflow-auto rounded-xl border border-zinc-200 bg-white" style="max-height:160px">
  <table class="w-full text-xs">
    <thead class="sticky top-0 z-10">
      <tr class="bg-zinc-100 border-b border-zinc-200">
        <th class="px-3 py-2 text-left font-semibold text-zinc-600">Name</th>
        <th class="px-3 py-2 text-left font-semibold text-zinc-600">Role</th>
        <th class="px-3 py-2 text-left font-semibold text-zinc-600">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-zinc-50 hover:bg-zinc-50">
        <td class="sticky left-0 bg-white px-3 py-2 font-medium text-zinc-800 border-r border-zinc-100">Alice Kim</td>
        <td class="px-3 py-2 text-zinc-500">Designer</td>
        <td class="px-3 py-2"><span class="rounded-full bg-emerald-100 px-2 text-[9px] font-semibold text-emerald-700">Active</span></td>
      </tr>
    </tbody>
  </table>
</div>

📊

Word Cloud / Tag Cloud

Display

Keyword cloud with varying font sizes and colors based on frequency.

TypeScriptReactNext.jsTailwindNodeGraphQLDockerPrismaRustGoAWSVercel

<div class="flex flex-wrap items-center justify-center gap-x-3 gap-y-2 max-w-xs p-4">
  <span class="text-xl font-bold text-blue-600 cursor-default hover:opacity-70 transition">TypeScript</span>
  <span class="text-lg font-bold text-sky-500 cursor-default hover:opacity-70 transition">React</span>
  <span class="text-base font-semibold text-zinc-800 cursor-default hover:opacity-70 transition">Next.js</span>
  <span class="text-lg font-bold text-teal-500 cursor-default hover:opacity-70 transition">Tailwind</span>
  <span class="text-sm font-semibold text-emerald-600 cursor-default hover:opacity-70 transition">Node</span>
  <span class="text-sm font-medium text-pink-500 cursor-default hover:opacity-70 transition">GraphQL</span>
</div>

🧭

Floating Action Menu

Navigation

Radial/vertical FAB menu that expands with labelled action buttons.

Note

Attach

Photo

Chart

<div class="relative flex flex-col items-center gap-2">
  <!-- Actions (shown when open) -->
  <div class="flex flex-col items-center gap-2">
    <div class="flex items-center gap-2">
      <span class="rounded-lg bg-white border px-2 py-0.5 text-[10px] font-semibold text-zinc-600 shadow-sm">Note</span>
      <button class="h-10 w-10 rounded-full bg-blue-500 text-white text-lg shadow-lg flex items-center justify-center hover:scale-110 transition">📝</button>
    </div>
  </div>
  <!-- FAB trigger -->
  <button class="h-12 w-12 rounded-full bg-zinc-900 text-white text-xl shadow-xl flex items-center justify-center hover:bg-zinc-800 transition">+</button>
</div>

🪟

Command Palette

Overlay

Spotlight-style command palette with fuzzy search and keyboard shortcuts.

esc

Commands

<div class="rounded-2xl border border-zinc-200 bg-white shadow-xl overflow-hidden w-80">
  <div class="flex items-center gap-2 border-b border-zinc-100 px-4 py-3">
    🔍 <input placeholder="Type a command…" class="flex-1 text-sm outline-none placeholder-zinc-400"/>
    <kbd class="rounded bg-zinc-100 px-1.5 py-0.5 text-[10px] font-semibold">esc</kbd>
  </div>
  <div class="py-1">
    <p class="px-4 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wider text-zinc-400">Commands</p>
    <button class="flex w-full items-center gap-3 px-4 py-2.5 hover:bg-blue-50 group">
      <span>🏠</span>
      <span class="flex-1 text-sm text-zinc-700 group-hover:text-blue-700">Go to Dashboard</span>
      <kbd class="rounded bg-zinc-100 px-1.5 py-0.5 text-[9px] text-zinc-400">G D</kbd>
    </button>
  </div>
</div>

🧭

Navigation

Docs-style sidebar TOC with active section highlight and indent levels.

On this page

<nav class="border-l border-zinc-200">
  <p class="mb-3 pl-3 text-[10px] font-bold uppercase tracking-wider text-zinc-400">On this page</p>
  <a href="#" class="block py-1 pl-3 text-xs font-semibold text-blue-600 border-l-2 border-blue-600 -ml-px">Installation</a>
  <a href="#" class="block py-1 pl-6 text-xs text-zinc-500 hover:text-zinc-800 border-l-2 border-transparent -ml-px">Configuration</a>
  <a href="#" class="block py-1 pl-9 text-xs text-zinc-500 hover:text-zinc-800 border-l-2 border-transparent -ml-px">Environment vars</a>
  <a href="#" class="block py-1 pl-3 text-xs text-zinc-500 hover:text-zinc-800 border-l-2 border-transparent -ml-px">Usage</a>
</nav>

📊

Invoice Table

Display

Line-item invoice with description, quantity, rate, total, and status badge.

Invoice #INV-0042

Due: Jan 31, 2026

Pending

Description	Qty	Rate	Total
UI Design	8h	$150	$1,200
Frontend Dev	20h	$120	$2,400
API Integration	5h	$180	$900

Subtotal (USD)$4,500

<div class="rounded-xl border border-zinc-200 bg-white overflow-hidden shadow-sm">
  <div class="flex items-center justify-between border-b border-zinc-100 bg-zinc-50 px-4 py-3">
    <div><p class="text-sm font-bold text-zinc-900">Invoice #INV-0042</p><p class="text-[10px] text-zinc-400">Due: Jan 31, 2026</p></div>
    <span class="rounded-full bg-amber-100 px-2.5 py-0.5 text-[10px] font-bold text-amber-700">Pending</span>
  </div>
  <table class="w-full text-xs">
    <thead><tr class="border-b border-zinc-100 text-zinc-400">
      <th class="px-4 py-2 text-left font-semibold">Description</th>
      <th class="px-2 py-2 text-right font-semibold">Qty</th>
      <th class="px-4 py-2 text-right font-semibold">Total</th>
    </tr></thead>
    <tbody>
      <tr class="border-b border-zinc-50">
        <td class="px-4 py-2 text-zinc-700">UI Design</td>
        <td class="px-2 py-2 text-right text-zinc-500">8h</td>
        <td class="px-4 py-2 text-right font-semibold text-zinc-800">$1,200</td>
      </tr>
    </tbody>
  </table>
  <div class="border-t border-zinc-200 px-4 py-3 flex justify-between">
    <span class="text-xs text-zinc-500">Subtotal (USD)</span>
    <span class="text-sm font-bold text-zinc-900">$4,500</span>
  </div>
</div>

🧭

Scroll Spy Nav

Navigation

Sidebar navigation that highlights the currently visible section.

Hero

Features

Pricing

FAQ

Contact

<div class="flex items-start gap-4">
  <!-- Sidebar -->
  <div class="flex flex-col gap-1">
    <button class="flex items-center gap-2 rounded-lg bg-blue-600 px-2.5 py-1.5 text-xs font-semibold text-white">
      <div class="h-1.5 w-1.5 rounded-full bg-white"></div> Hero
    </button>
    <button class="flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs text-zinc-500 hover:text-zinc-800">
      <div class="h-1.5 w-1.5 rounded-full bg-zinc-300"></div> Features
    </button>
    <!-- more sections -->
  </div>
  <!-- Content preview -->
  <div class="flex-1 space-y-2">
    <div class="rounded-xl border border-blue-300 bg-blue-50 p-3"><p class="text-xs font-semibold text-zinc-700">Hero</p></div>
    <div class="rounded-xl border border-zinc-200 bg-white p-3"><p class="text-xs font-semibold text-zinc-700">Features</p></div>
  </div>
</div>

⚡

Announcement Banner

Feedback

Full-width dismissible announcement bar with info, success, warning, and error variants.

ℹ️

New version 2.0 is now available!

<div class="flex items-center gap-3 rounded-xl bg-blue-600 px-4 py-3 text-white">
  <span class="text-base shrink-0">ℹ️</span>
  <p class="flex-1 text-xs font-medium">New version 2.0 is now available!</p>
  <button class="shrink-0 text-white/70 hover:text-white transition">✕</button>
</div>
<!-- Variants -->
<div class="flex items-center gap-3 rounded-xl bg-emerald-600 px-4 py-3 text-white">
  <span>✅</span><p class="flex-1 text-xs font-medium">Deployment succeeded.</p><button>✕</button>
</div>
<div class="flex items-center gap-3 rounded-xl bg-amber-500 px-4 py-3 text-white">
  <span>⚠️</span><p class="flex-1 text-xs font-medium">Scheduled maintenance Jan 15.</p><button>✕</button>
</div>

📊

Permission / Role Gate

Display

Role-based access table showing which permissions each role has.

View✓

Edit✓

Delete✓

Manage Users✓

Billing✓

<!-- Role switcher -->
<div class="flex gap-1.5 mb-3">
  <button class="rounded-full bg-zinc-900 px-3 py-1 text-[10px] font-semibold text-white">admin</button>
  <button class="rounded-full border border-zinc-200 px-3 py-1 text-[10px] font-semibold text-zinc-600">editor</button>
  <button class="rounded-full border border-zinc-200 px-3 py-1 text-[10px] font-semibold text-zinc-600">viewer</button>
</div>
<!-- Permission rows -->
<div class="rounded-xl border border-zinc-200 bg-white overflow-hidden">
  <div class="flex items-center justify-between px-4 py-2.5 border-b border-zinc-50">
    <span class="text-sm text-zinc-700">View</span>
    <span class="flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-[11px] text-emerald-600">✓</span>
  </div>
  <div class="flex items-center justify-between px-4 py-2.5 opacity-40">
    <span class="text-sm text-zinc-700">Delete</span>
    <span class="flex h-5 w-5 items-center justify-center rounded-full bg-zinc-100 text-[11px] text-zinc-400">✕</span>
  </div>
</div>

✏️

Drag & Drop Sortable

Forms & Inputs

Reorder list items by dragging — shows a drop target highlight on hover.

Drag to reorder

⠿🎨 Design#1

⠿💻 Development#2

⠿🧪 Testing#3

⠿🚀 Deploy#4

<div class="space-y-1.5">
  <div class="flex items-center gap-3 rounded-xl border border-zinc-200 bg-white px-4 py-2.5 cursor-grab">
    <span class="text-zinc-300">⠿</span>
    <span class="text-sm font-medium text-zinc-700">🎨 Design</span>
    <span class="ml-auto text-[10px] text-zinc-300">#1</span>
  </div>
  <div class="flex items-center gap-3 rounded-xl border border-blue-400 bg-blue-50 px-4 py-2.5 cursor-grab scale-[1.02]">
    <span class="text-zinc-300">⠿</span>
    <span class="text-sm font-medium text-zinc-700">💻 Development</span>
    <span class="ml-auto text-[10px] text-zinc-300">#2</span>
  </div>
</div>

📊

Animated Counter

Display

Number count-up animation for KPI and stats sections — click to replay.

Total Users

0.0%

Uptime %

Deployments

<div class="grid grid-cols-3 gap-2">
  <div class="rounded-xl border border-zinc-200 bg-white p-3 text-center">
    <p class="text-lg font-black text-blue-600 tabular-nums" id="counter1">12,847</p>
    <p class="text-[10px] text-zinc-400 font-medium mt-0.5">Total Users</p>
  </div>
  <div class="rounded-xl border border-zinc-200 bg-white p-3 text-center">
    <p class="text-lg font-black text-emerald-600 tabular-nums" id="counter2">98.6%</p>
    <p class="text-[10px] text-zinc-400 font-medium mt-0.5">Uptime</p>
  </div>
  <div class="rounded-xl border border-zinc-200 bg-white p-3 text-center">
    <p class="text-lg font-black text-purple-600 tabular-nums" id="counter3">4,392</p>
    <p class="text-[10px] text-zinc-400 font-medium mt-0.5">Deployments</p>
  </div>
</div>

📊

Keyboard Shortcut Badges

Display

Grid of keyboard shortcut reference cards with styled key badges.

Save

⌘S

Find

⌘F

Undo

⌘Z

Copy

⌘C

Paste

⌘V

Select All

⌘A

Command

⌘K

New File

⌘N

<div class="grid grid-cols-2 gap-1.5">
  <div class="flex items-center justify-between rounded-lg border border-zinc-200 bg-white px-3 py-2">
    <span class="text-xs text-zinc-600 font-medium">Save</span>
    <div class="flex gap-0.5">
      <kbd class="rounded-md border border-zinc-200 bg-zinc-100 px-1.5 py-0.5 text-[10px] font-semibold text-zinc-600 shadow-[0_1px_0_#d4d4d8]">⌘</kbd>
      <kbd class="rounded-md border border-zinc-200 bg-zinc-100 px-1.5 py-0.5 text-[10px] font-semibold text-zinc-600 shadow-[0_1px_0_#d4d4d8]">S</kbd>
    </div>
  </div>
  <!-- repeat for other shortcuts -->
</div>

✏️

OAuth / SSO Buttons

Forms & Inputs

Social login buttons for Google, GitHub, Twitter, Apple — with loading state.

<div class="space-y-2">
  <button class="flex w-full items-center justify-center gap-2.5 rounded-xl border border-zinc-300 bg-white py-2.5 text-sm font-semibold text-zinc-700 hover:bg-zinc-50 transition">
    🔵 Continue with Google
  </button>
  <button class="flex w-full items-center justify-center gap-2.5 rounded-xl bg-zinc-900 py-2.5 text-sm font-semibold text-white hover:bg-zinc-800 transition">
    ⚫ Continue with GitHub
  </button>
  <button class="flex w-full items-center justify-center gap-2.5 rounded-xl bg-sky-500 py-2.5 text-sm font-semibold text-white hover:bg-sky-600 transition">
    🐦 Continue with Twitter
  </button>
  <button class="flex w-full items-center justify-center gap-2.5 rounded-xl bg-black py-2.5 text-sm font-semibold text-white hover:bg-zinc-900 transition">
    🍎 Continue with Apple
  </button>
</div>

⚡

Empty State Variants

Feedback

Three empty state variants — no messages, no results, empty folder — with CTAs.

📭

No messages yet

When you receive messages, they'll show up here.

<div class="rounded-2xl border border-zinc-200 bg-white px-6 py-8 shadow-sm text-center">
  <div class="text-4xl mb-3">📭</div>
  <p class="text-sm font-bold text-zinc-800">No messages yet</p>
  <p class="text-xs text-zinc-400 mt-1 leading-relaxed">When you receive messages, they'll show up here.</p>
  <button class="mt-4 rounded-xl border-2 border-blue-600 px-4 py-1.5 text-xs font-semibold text-blue-600 hover:bg-blue-50 transition">
    Compose message
  </button>
</div>

◧

Dashboard Sidebar — Minimal

Aside Nav

Clean icon-and-label sidebar with active highlight and notification badge.

Dashboard

<aside class="flex h-72 w-48 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center gap-2 border-b border-zinc-100 px-4 py-3.5">
    <div class="h-7 w-7 rounded-lg bg-indigo-600 flex items-center justify-center text-white text-xs font-bold">D</div>
    <span class="text-sm font-bold text-zinc-800">Dashboard</span>
  </div>
  <nav class="flex-1 px-2 py-2 space-y-0.5 overflow-auto">
    <a href="#" class="flex items-center gap-2.5 rounded-lg bg-indigo-50 px-2.5 py-2 text-xs font-medium text-indigo-700">
      <span>⊞</span> Dashboard
    </a>
    <a href="#" class="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50 hover:text-zinc-700">
      <span>📊</span> Analytics
    </a>
    <a href="#" class="flex items-center justify-between gap-2.5 rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50 hover:text-zinc-700">
      <span class="flex items-center gap-2.5"><span>💬</span> Messages</span>
      <span class="rounded-full bg-indigo-100 px-1.5 py-0.5 text-[10px] font-bold text-indigo-600">4</span>
    </a>
  </nav>
</aside>

◧

Dashboard Sidebar — Grouped

Aside Nav

Sidebar with section headings grouping related nav items.

Acme Co.

<aside class="flex h-72 w-48 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center gap-2 border-b border-zinc-100 px-4 py-3.5">
    <div class="h-7 w-7 rounded-lg bg-emerald-500 flex items-center justify-center text-white text-xs font-bold">A</div>
    <span class="text-sm font-bold text-zinc-800">Acme Co.</span>
  </div>
  <nav class="flex-1 px-2 py-2 overflow-auto space-y-3">
    <div>
      <p class="px-2.5 mb-1 text-[9px] font-bold tracking-widest text-zinc-400">MAIN</p>
      <a href="#" class="flex items-center gap-2 rounded-lg bg-emerald-50 px-2.5 py-1.5 text-xs font-medium text-emerald-700"><span>🏠</span> Overview</a>
      <a href="#" class="flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>📈</span> Revenue</a>
    </div>
    <div>
      <p class="px-2.5 mb-1 text-[9px] font-bold tracking-widest text-zinc-400">REPORTS</p>
      <a href="#" class="flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>📋</span> Weekly</a>
    </div>
  </nav>
</aside>

◧

Dashboard Sidebar — Dark Collapsible

Aside Nav

Dark sidebar with collapse toggle, badges, and user profile footer.

Vertex

Jane Doe

Admin

<aside class="flex h-72 w-48 flex-col rounded-2xl bg-slate-900 shadow-xl overflow-hidden">
  <div class="flex items-center justify-between border-b border-slate-700/50 px-3 py-3.5">
    <div class="flex items-center gap-2">
      <div class="h-6 w-6 rounded-md bg-violet-500 flex items-center justify-center text-white text-[10px] font-bold">V</div>
      <span class="text-xs font-bold text-white">Vertex</span>
    </div>
    <button class="text-slate-400 hover:text-white text-xs">←</button>
  </div>
  <nav class="flex-1 px-1.5 py-2 space-y-0.5">
    <a href="#" class="flex items-center gap-2.5 rounded-lg bg-violet-600 px-2 py-2 text-xs font-medium text-white"><span>⊞</span> Dashboard</a>
    <a href="#" class="flex items-center justify-between rounded-lg px-2 py-2 text-xs font-medium text-slate-400 hover:bg-slate-800 hover:text-white">
      <span class="flex items-center gap-2.5"><span>📊</span> Analytics</span>
      <span class="rounded-md bg-violet-500 px-1.5 text-[9px] font-bold text-white">New</span>
    </a>
  </nav>
  <div class="flex items-center gap-2 border-t border-slate-700/50 px-3 py-3">
    <div class="h-6 w-6 rounded-full bg-violet-400 flex items-center justify-center text-[10px] font-bold text-white">JD</div>
    <div><p class="text-[10px] font-semibold text-white">Jane Doe</p><p class="text-[9px] text-slate-400">Admin</p></div>
  </div>
</aside>

◧

eCommerce Admin Sidebar

Aside Nav

Shop admin sidebar — orders with pending badge, products, customers, payments.

🛍️ ShopAdmin

<aside class="flex h-72 w-48 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="bg-orange-500 px-4 py-3.5"><span class="text-sm font-bold text-white">🛍️ ShopAdmin</span></div>
  <nav class="flex-1 px-2 py-2 space-y-0.5">
    <a href="#" class="flex items-center justify-between rounded-lg bg-orange-50 px-2.5 py-2 text-xs font-medium text-orange-700">
      <span class="flex items-center gap-2"><span>🛒</span> Orders</span>
      <span class="rounded-full bg-orange-100 px-1.5 py-0.5 text-[10px] font-bold text-orange-600">23</span>
    </a>
    <a href="#" class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>📦</span> Products</a>
    <a href="#" class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>👥</span> Customers</a>
    <a href="#" class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>💳</span> Payments</a>
  </nav>
</aside>

◧

eCommerce Store Category Sidebar

Aside Nav

Storefront category filter sidebar with product counts and search.

eCommerce Catalog Tree Sidebar

Aside Nav

Expandable product category tree with nested sub-categories.

📂 Catalog

<aside class="flex h-72 w-48 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="border-b border-zinc-100 px-4 py-3"><p class="text-xs font-bold text-zinc-800">📂 Catalog</p></div>
  <nav class="flex-1 px-2 py-2 overflow-auto">
    <button class="w-full flex items-center justify-between rounded-lg px-2.5 py-1.5 text-xs font-semibold text-zinc-700 hover:bg-zinc-50">
      <span>Electronics</span><span class="text-zinc-400 text-[10px]">▾</span>
    </button>
    <div class="ml-3 border-l border-zinc-200 pl-2 space-y-0.5">
      <a href="#" class="block rounded-md px-2 py-1.5 text-xs font-semibold text-amber-700">Smartphones</a>
      <a href="#" class="block rounded-md px-2 py-1.5 text-xs text-zinc-500 hover:text-zinc-700">Laptops</a>
    </div>
  </nav>
</aside>

◧

Analytics Sidebar

Aside Nav

Analytics platform sidebar — traffic, funnels, cohorts, heatmaps.

Analytics Pro

<aside class="flex h-72 w-48 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center gap-2 border-b border-zinc-100 px-4 py-3.5">
    <div class="h-6 w-6 rounded-md bg-violet-600 flex items-center justify-center text-white text-[10px] font-bold">A</div>
    <span class="text-xs font-bold text-zinc-800">Analytics Pro</span>
  </div>
  <nav class="flex-1 px-2 py-2 space-y-0.5 overflow-auto">
    <a href="#" class="flex items-center gap-2.5 rounded-lg bg-violet-600 px-2.5 py-2 text-xs font-medium text-white"><span>📊</span> Overview</a>
    <a href="#" class="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-violet-50 hover:text-violet-700"><span>👁️</span> Traffic</a>
    <a href="#" class="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-violet-50 hover:text-violet-700"><span>🔄</span> Funnels</a>
  </nav>
</aside>

◧

Analytics Metrics Nav

Aside Nav

Sidebar showing key metrics with live values and trend indicators.

📈 Key Metrics

<aside class="flex h-72 w-56 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="border-b border-zinc-100 px-4 py-3"><p class="text-xs font-bold text-zinc-800">📈 Key Metrics</p></div>
  <nav class="flex-1 px-2 py-2 space-y-0.5 overflow-auto">
    <a href="#" class="flex items-center justify-between rounded-lg bg-blue-50 px-2.5 py-2 text-xs text-blue-700">
      <span class="font-medium">Sessions</span>
      <span class="flex items-center gap-1.5"><span class="font-bold text-zinc-800">24.3K</span><span class="text-[10px] font-semibold text-emerald-600">+12%</span></span>
    </a>
    <a href="#" class="flex items-center justify-between rounded-lg px-2.5 py-2 text-xs text-zinc-600 hover:bg-zinc-50">
      <span class="font-medium">Revenue</span>
      <span class="flex items-center gap-1.5"><span class="font-bold text-zinc-800">$8.4K</span><span class="text-[10px] font-semibold text-emerald-600">+22%</span></span>
    </a>
  </nav>
</aside>

◧

Analytics Reports Sidebar

Aside Nav

Folder-based report library sidebar with expand/collapse tree.

📁 Reports

<aside class="flex h-72 w-48 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="border-b border-zinc-100 px-4 py-3"><p class="text-xs font-bold text-zinc-800">📁 Reports</p></div>
  <nav class="flex-1 px-2 py-2 overflow-auto">
    <button class="w-full flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-semibold text-zinc-700 hover:bg-zinc-50">
      <span>📂</span><span class="flex-1 text-left">Quarterly</span><span class="text-zinc-400 text-[10px]">▾</span>
    </button>
    <div class="ml-3 border-l-2 border-indigo-100 pl-2 space-y-0.5">
      <a href="#" class="block rounded-md px-2 py-1.5 text-xs font-bold text-indigo-700">Q1 Summary</a>
      <a href="#" class="block rounded-md px-2 py-1.5 text-xs text-zinc-500 hover:text-zinc-700">Q2 Summary</a>
    </div>
  </nav>
</aside>

◧

Marketing Hub Sidebar

Aside Nav

Marketing platform sidebar with campaigns, email, social, SEO, and A/B tests.

🎯 Marketing Hub

<aside class="flex h-72 w-48 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="bg-gradient-to-r from-pink-500 to-rose-500 px-4 py-3.5"><span class="text-xs font-bold text-white">🎯 Marketing Hub</span></div>
  <nav class="flex-1 px-2 py-2 space-y-0.5">
    <a href="#" class="flex items-center justify-between rounded-lg bg-pink-50 px-2.5 py-2 text-xs font-medium text-pink-700">
      <span class="flex items-center gap-2"><span>🚀</span> Campaigns</span>
      <span class="rounded-full bg-pink-100 px-1.5 py-0.5 text-[10px] font-bold text-pink-600">3 live</span>
    </a>
    <a href="#" class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>📧</span> Email</a>
    <a href="#" class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>🔍</span> SEO</a>
  </nav>
</aside>

◧

Campaign Manager Sidebar

Aside Nav

List of campaigns with live/draft/scheduled status indicators.

🚀 Campaigns

2 Live

<aside class="flex h-72 w-52 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center justify-between border-b border-zinc-100 px-3 py-3">
    <p class="text-xs font-bold text-zinc-800">🚀 Campaigns</p>
    <span class="rounded-md bg-fuchsia-100 px-2 py-0.5 text-[10px] font-bold text-fuchsia-700">2 Live</span>
  </div>
  <nav class="flex-1 px-2 py-2 space-y-0.5 overflow-auto">
    <a href="#" class="flex items-center gap-2.5 rounded-lg bg-fuchsia-50 px-2.5 py-2 text-xs text-fuchsia-700">
      <span class="h-2 w-2 rounded-full bg-green-400 shrink-0"></span>
      <span class="flex-1 font-medium">Summer Sale</span><span class="text-[10px] text-zinc-400">Live</span>
    </a>
    <a href="#" class="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-xs text-zinc-600 hover:bg-zinc-50">
      <span class="h-2 w-2 rounded-full bg-zinc-300 shrink-0"></span>
      <span class="flex-1 font-medium">Newsletter #24</span><span class="text-[10px] text-zinc-400">Draft</span>
    </a>
  </nav>
</aside>

◧

Marketing Channels Sidebar

Aside Nav

Channel performance sidebar with reach stats and progress bars.

📡 Channels

<aside class="flex h-72 w-56 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="border-b border-zinc-100 px-4 py-3"><p class="text-xs font-bold text-zinc-800">📡 Channels</p></div>
  <nav class="flex-1 px-2 py-2 space-y-0.5 overflow-auto">
    <a href="#" class="block rounded-lg bg-cyan-50 px-2.5 py-2">
      <div class="flex items-center gap-2 mb-1">
        <span>📧</span><span class="text-xs font-semibold flex-1 text-cyan-700">Email</span><span class="text-[10px] font-bold text-zinc-500">14.2K</span>
      </div>
      <div class="h-1 w-full rounded-full bg-zinc-100"><div class="h-1 rounded-full bg-cyan-400" style="width:74%"></div></div>
    </a>
    <a href="#" class="block rounded-lg px-2.5 py-2 hover:bg-zinc-50">
      <div class="flex items-center gap-2 mb-1">
        <span>📸</span><span class="text-xs font-semibold flex-1 text-zinc-700">Instagram</span><span class="text-[10px] font-bold text-zinc-500">11K</span>
      </div>
      <div class="h-1 w-full rounded-full bg-zinc-100"><div class="h-1 rounded-full bg-cyan-300" style="width:58%"></div></div>
    </a>
  </nav>
</aside>

◧

CRM Sidebar

Aside Nav

CRM sidebar with contacts, companies, deals, and activity counts.

🤝 CRM Suite

<aside class="flex h-72 w-48 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="bg-blue-600 px-4 py-3.5"><span class="text-xs font-bold text-white">🤝 CRM Suite</span></div>
  <nav class="flex-1 px-2 py-2 space-y-0.5">
    <a href="#" class="flex items-center justify-between rounded-lg bg-blue-50 px-2.5 py-2 text-xs font-medium text-blue-700">
      <span class="flex items-center gap-2"><span>👤</span> Contacts</span>
      <span class="rounded-full bg-blue-100 px-1.5 py-0.5 text-[10px] font-bold text-blue-500">1.2K</span>
    </a>
    <a href="#" class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>🏢</span> Companies</a>
    <a href="#" class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>💼</span> Deals</a>
  </nav>
</aside>

◧

CRM Pipeline Sidebar

Aside Nav

Pipeline stage sidebar showing deal counts and total value per stage.

💼 Pipeline

<aside class="flex h-72 w-56 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="border-b border-zinc-100 px-4 py-3"><p class="text-xs font-bold text-zinc-800">💼 Pipeline</p></div>
  <nav class="flex-1 px-2 py-2 space-y-0.5 overflow-auto">
    <a href="#" class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-xs text-zinc-600 hover:bg-zinc-50">
      <span class="h-2.5 w-2.5 rounded-sm bg-zinc-200"></span><span class="flex-1 font-medium">Lead</span><span class="text-[10px] text-zinc-400">42</span><span class="text-[10px] font-bold text-zinc-600">$0</span>
    </a>
    <a href="#" class="flex items-center gap-2 rounded-lg bg-indigo-50 px-2.5 py-2 text-xs text-indigo-700">
      <span class="h-2.5 w-2.5 rounded-sm bg-indigo-300"></span><span class="flex-1 font-medium">Proposal</span><span class="text-[10px] text-zinc-400">9</span><span class="text-[10px] font-bold text-zinc-600">$88K</span>
    </a>
  </nav>
</aside>

◧

CRM Contacts Filter Sidebar

Aside Nav

Contact type filter sidebar with search and recently viewed contacts.

👤 Contacts

🔍Search contacts...

RECENT

Alice Wang

Bob Torres

Carol Kim

<aside class="flex h-72 w-48 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="border-b border-zinc-100 px-3 py-3">
    <p class="text-xs font-bold text-zinc-800 mb-2">👤 Contacts</p>
    <div class="flex items-center gap-1.5 rounded-lg bg-zinc-100 px-2.5 py-1.5 text-xs text-zinc-400">🔍 Search contacts...</div>
  </div>
  <div class="px-2 py-1.5 space-y-0.5">
    <a href="#" class="flex items-center justify-between rounded-lg bg-sky-50 px-2.5 py-1.5 text-xs font-medium text-sky-700"><span>All</span><span class="text-[10px] text-zinc-400">1248</span></a>
    <a href="#" class="flex items-center justify-between rounded-lg px-2.5 py-1.5 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>Leads</span><span class="text-[10px] text-zinc-400">312</span></a>
  </div>
</aside>

◧

Trading App Sidebar

Aside Nav

Dark-mode trading sidebar — portfolio, watchlist, markets, alerts.

TradeView

<aside class="flex h-72 w-48 flex-col rounded-2xl bg-[#0f1117] shadow-xl border border-zinc-800 overflow-hidden">
  <div class="flex items-center gap-2 border-b border-zinc-800 px-4 py-3.5">
    <div class="h-6 w-6 rounded-md bg-emerald-500 flex items-center justify-center text-white text-[10px] font-bold">T</div>
    <span class="text-xs font-bold text-white">TradeView</span>
  </div>
  <nav class="flex-1 px-1.5 py-2 space-y-0.5">
    <a href="#" class="flex items-center gap-2.5 rounded-lg bg-emerald-500/20 px-2.5 py-2 text-xs font-medium text-emerald-400"><span>💼</span> Portfolio</a>
    <a href="#" class="flex items-center justify-between rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-400 hover:bg-zinc-800 hover:text-white">
      <span class="flex items-center gap-2.5"><span>👁️</span> Watchlist</span>
      <span class="rounded-full bg-emerald-500/20 px-1.5 py-0.5 text-[10px] font-bold text-emerald-400">8</span>
    </a>
  </nav>
</aside>

◧

Stock Portfolio Sidebar

Aside Nav

Portfolio holdings sidebar with ticker, price, and daily % change.

💼 Holdings

<aside class="flex h-72 w-56 flex-col rounded-2xl bg-[#0f1117] shadow-xl border border-zinc-800 overflow-hidden">
  <div class="border-b border-zinc-800 px-4 py-3"><p class="text-xs font-bold text-white">💼 Holdings</p></div>
  <nav class="flex-1 px-2 py-2 space-y-0.5 overflow-auto">
    <a href="#" class="flex items-center gap-2 rounded-lg bg-zinc-800 px-2.5 py-2 text-xs">
      <div class="h-6 w-6 rounded-md bg-zinc-700 flex items-center justify-center text-[9px] font-bold text-zinc-200">AA</div>
      <div class="flex-1 min-w-0"><p class="font-semibold text-zinc-200 text-[11px]">AAPL</p><p class="text-[9px] text-zinc-500">Apple</p></div>
      <div class="text-right"><p class="font-bold text-zinc-200 text-[11px]">$182</p><p class="text-[9px] font-semibold text-emerald-400">+1.4%</p></div>
    </a>
  </nav>
</aside>

◧

Watchlist Sidebar

Aside Nav

Tabbed watchlist sidebar — tech, ETFs, crypto with price change.

👁️ Watchlist

AAPL+1.4%

META+2.1%

AMD-0.9%

<aside class="flex h-72 w-52 flex-col rounded-2xl bg-[#0f1117] shadow-xl border border-zinc-800 overflow-hidden">
  <div class="border-b border-zinc-800 px-3 py-2.5">
    <p class="text-xs font-bold text-white mb-2">👁️ Watchlist</p>
    <div class="flex gap-1">
      <button class="rounded-md bg-emerald-500 px-2 py-1 text-[10px] font-semibold text-white">Tech</button>
      <button class="rounded-md bg-zinc-800 px-2 py-1 text-[10px] font-semibold text-zinc-400 hover:bg-zinc-700">ETFs</button>
      <button class="rounded-md bg-zinc-800 px-2 py-1 text-[10px] font-semibold text-zinc-400 hover:bg-zinc-700">Crypto</button>
    </div>
  </div>
  <div class="flex-1 px-2 py-2 space-y-0.5">
    <div class="flex items-center justify-between rounded-lg px-2.5 py-2 hover:bg-zinc-800 transition">
      <div class="h-6 w-6 rounded-md bg-zinc-700 flex items-center justify-center text-[9px] font-bold text-zinc-200">AA</div>
      <span class="flex-1 ml-2 text-xs font-semibold text-zinc-300">AAPL</span>
      <span class="text-xs font-bold text-emerald-400">+1.4%</span>
    </div>
  </div>
</aside>

◧

SaaS App Sidebar

Aside Nav

Workspace-switcher sidebar with projects, team, inbox, and integrations.

<aside class="flex h-72 w-48 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="border-b border-zinc-100 px-3 py-3">
    <select class="w-full rounded-lg border border-zinc-200 bg-zinc-50 px-2 py-1.5 text-xs font-semibold text-zinc-700 focus:outline-none">
      <option>Acme Inc.</option><option>Side Project</option>
    </select>
  </div>
  <nav class="flex-1 px-2 py-2 space-y-0.5">
    <a href="#" class="flex items-center gap-2.5 rounded-lg bg-slate-900 px-2.5 py-2 text-xs font-medium text-white"><span>🏠</span> Workspace</a>
    <a href="#" class="flex items-center justify-between rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50 hover:text-zinc-700">
      <span class="flex items-center gap-2"><span>📋</span> Projects</span>
      <span class="rounded-full bg-zinc-100 px-1.5 py-0.5 text-[10px] font-bold text-zinc-500">4</span>
    </a>
  </nav>
</aside>

◧

SaaS Settings Sidebar

Aside Nav

Settings sidebar grouped into Account, Workspace, and Developer sections.

⚙️

Settings

<aside class="flex h-72 w-48 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center gap-2 border-b border-zinc-100 px-4 py-3"><span>⚙️</span><p class="text-xs font-bold text-zinc-800">Settings</p></div>
  <nav class="flex-1 px-2 py-2 overflow-auto space-y-2">
    <div>
      <p class="px-2.5 mb-0.5 text-[9px] font-bold tracking-widest text-zinc-400">ACCOUNT</p>
      <a href="#" class="block rounded-lg bg-zinc-900 px-2.5 py-1.5 text-xs font-medium text-white">General</a>
      <a href="#" class="block rounded-lg px-2.5 py-1.5 text-xs font-medium text-zinc-500 hover:bg-zinc-50 hover:text-zinc-700">Profile</a>
      <a href="#" class="block rounded-lg px-2.5 py-1.5 text-xs font-medium text-zinc-500 hover:bg-zinc-50 hover:text-zinc-700">Billing</a>
    </div>
    <div>
      <p class="px-2.5 mb-0.5 text-[9px] font-bold tracking-widest text-zinc-400">DEVELOPER</p>
      <a href="#" class="block rounded-lg px-2.5 py-1.5 text-xs font-medium text-zinc-500 hover:bg-zinc-50 hover:text-zinc-700">API Keys</a>
    </div>
  </nav>
</aside>

◧

SaaS Admin Panel Sidebar

Aside Nav

Admin sidebar for SaaS ops — users, subscriptions, feature flags, alerts.

🔑 Admin Panel

<aside class="flex h-72 w-48 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="bg-rose-600 px-4 py-3 flex items-center gap-2"><span class="text-white text-xs font-bold">🔑 Admin Panel</span></div>
  <nav class="flex-1 px-2 py-2 space-y-0.5 overflow-auto">
    <a href="#" class="flex items-center justify-between rounded-lg bg-rose-50 px-2.5 py-2 text-xs font-medium text-rose-700">
      <span class="flex items-center gap-2"><span>👥</span> Users</span>
      <span class="rounded-full bg-rose-100 px-1.5 py-0.5 text-[10px] font-bold text-rose-500">2.4K</span>
    </a>
    <a href="#" class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>💳</span> Subscriptions</a>
    <a href="#" class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>🚦</span> Feature Flags</a>
  </nav>
</aside>

◧

Logistics Sidebar

Aside Nav

Logistics platform sidebar — shipments, routes, fleet, warehouses.

🚛 LogiTrack

<aside class="flex h-72 w-48 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="bg-teal-700 px-4 py-3.5"><span class="text-xs font-bold text-white">🚛 LogiTrack</span></div>
  <nav class="flex-1 px-2 py-2 space-y-0.5">
    <a href="#" class="flex items-center justify-between rounded-lg bg-teal-50 px-2.5 py-2 text-xs font-medium text-teal-700">
      <span class="flex items-center gap-2"><span>📦</span> Shipments</span>
      <span class="rounded-full bg-teal-100 px-1.5 py-0.5 text-[10px] font-bold text-teal-600">18</span>
    </a>
    <a href="#" class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>🗺️</span> Routes</a>
    <a href="#" class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>🚚</span> Fleet</a>
  </nav>
</aside>

◧

Shipments Status Sidebar

Aside Nav

Shipment filter sidebar with color-coded status counts.

📦 Shipments

142 total this month

<aside class="flex h-72 w-52 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="border-b border-zinc-100 px-4 py-3">
    <p class="text-xs font-bold text-zinc-800">📦 Shipments</p>
    <p class="text-[10px] text-zinc-400 mt-0.5">142 total this month</p>
  </div>
  <nav class="flex-1 px-2 py-2 space-y-0.5">
    <a href="#" class="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-xs text-zinc-600 hover:bg-zinc-50">
      <span class="h-2 w-2 rounded-full bg-zinc-400"></span><span class="flex-1 font-medium">All Shipments</span><span class="font-bold text-zinc-500 text-[10px]">142</span>
    </a>
    <a href="#" class="flex items-center gap-2.5 rounded-lg bg-blue-50 px-2.5 py-2 text-xs text-blue-700">
      <span class="h-2 w-2 rounded-full bg-blue-500"></span><span class="flex-1 font-medium">In Transit</span><span class="font-bold text-zinc-500 text-[10px]">58</span>
    </a>
    <a href="#" class="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-xs text-zinc-600 hover:bg-zinc-50">
      <span class="h-2 w-2 rounded-full bg-emerald-500"></span><span class="flex-1 font-medium">Delivered</span><span class="font-bold text-zinc-500 text-[10px]">64</span>
    </a>
  </nav>
</aside>

◧

Fleet Management Sidebar

Aside Nav

Fleet status sidebar with vehicle ID, driver, status badge, and route progress bar.

🚚 Fleet Status

<aside class="flex h-72 w-56 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="border-b border-zinc-100 px-4 py-3"><p class="text-xs font-bold text-zinc-800">🚚 Fleet Status</p></div>
  <nav class="flex-1 px-2 py-2 space-y-1 overflow-auto">
    <a href="#" class="block rounded-lg border border-teal-200 bg-teal-50 px-2.5 py-2">
      <div class="flex items-center justify-between mb-1">
        <span class="text-xs font-bold text-zinc-800">TRK-001</span>
        <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-[9px] font-semibold text-emerald-700">On Route</span>
      </div>
      <div class="flex items-center gap-2">
        <div class="flex-1 h-1 rounded-full bg-zinc-100"><div class="h-1 rounded-full bg-emerald-400" style="width:68%"></div></div>
        <span class="text-[10px] text-zinc-400">Mike R.</span>
      </div>
    </a>
  </nav>
</aside>

✦

AI Studio Sidebar

AI Tools

Dark AI studio sidebar with Text, Image, Code, Video generators and credit counter.

✦

AI Studio

Pro Plan

850 credits left

<aside class="flex h-72 w-52 flex-col rounded-2xl border border-slate-700 bg-gradient-to-b from-slate-900 to-slate-800 shadow-2xl overflow-hidden">
  <div class="flex items-center gap-2 border-b border-slate-700 px-4 py-3.5">
    <div class="h-7 w-7 rounded-xl bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white text-sm">✦</div>
    <span class="text-sm font-bold text-white">AI Studio</span>
  </div>
  <nav class="flex-1 px-2 py-2 space-y-0.5">
    <a href="#" class="flex items-center gap-2 rounded-xl bg-violet-600/80 px-2.5 py-2 text-xs font-medium text-white shadow-lg"><span>✍️</span> Text Generator <span class="ml-auto rounded-md bg-slate-700 px-1.5 text-[9px] font-bold text-slate-300">GPT-4</span></a>
    <a href="#" class="flex items-center gap-2 rounded-xl px-2.5 py-2 text-xs font-medium text-slate-400 hover:bg-slate-700 hover:text-white"><span>🎨</span> Image Generator</a>
    <a href="#" class="flex items-center gap-2 rounded-xl px-2.5 py-2 text-xs font-medium text-slate-400 hover:bg-slate-700 hover:text-white"><span>💻</span> Code Generator</a>
    <a href="#" class="flex items-center justify-between rounded-xl px-2.5 py-2 text-xs font-medium text-slate-400 hover:bg-slate-700 hover:text-white"><span class="flex items-center gap-2"><span>🎬</span> Video Generator</span><span class="rounded-md bg-emerald-500 px-1.5 text-[9px] font-bold text-white">New</span></a>
  </nav>
  <div class="flex items-center gap-2 border-t border-slate-700 px-3 py-3">
    <div class="h-6 w-6 rounded-full bg-violet-500 flex items-center justify-center text-[10px] font-bold text-white">U</div>
    <div><p class="text-[10px] font-semibold text-white">Pro Plan</p><p class="text-[9px] text-slate-400">850 credits left</p></div>
  </div>
</aside>

✦

AI Text Generator Sidebar

AI Tools

Text generator sidebar with model selector, templates, and prompt history.

✍️ Text Generator

TEMPLATES

RECENT

Explain quantum computing

Write a cold email for...

Summarize this article

<aside class="flex h-72 w-52 flex-col rounded-2xl border border-slate-700 bg-slate-900 shadow-2xl overflow-hidden">
  <div class="border-b border-slate-700 px-3 py-3">
    <p class="text-xs font-bold text-white mb-2">✍️ Text Generator</p>
    <select class="w-full rounded-lg bg-slate-800 border border-slate-600 text-[11px] text-slate-300 px-2 py-1.5 focus:outline-none">
      <option>GPT-4o</option><option>Claude 3.5</option><option>Gemini Pro</option>
    </select>
  </div>
  <div class="px-2 py-2 border-b border-slate-700">
    <p class="px-2.5 text-[9px] font-bold text-slate-500 mb-1">TEMPLATES</p>
    <a href="#" class="flex items-center rounded-lg bg-violet-600 px-2.5 py-1.5 text-xs text-white">Blog Post</a>
    <a href="#" class="flex items-center rounded-lg px-2.5 py-1.5 text-xs text-slate-400 hover:bg-slate-800">Email Draft</a>
  </div>
</aside>

✦

AI Image Generator Sidebar

AI Tools

Image generator sidebar — art style selector, aspect ratio, and quality picker.

🎨 Image Generator

STYLE

ASPECT RATIO

QUALITY

<aside class="flex h-72 w-52 flex-col rounded-2xl border border-slate-700 bg-slate-900 shadow-2xl overflow-hidden">
  <div class="border-b border-slate-700 px-3 py-3"><p class="text-xs font-bold text-white">🎨 Image Generator</p></div>
  <div class="flex-1 px-3 py-2 overflow-auto space-y-3">
    <div>
      <p class="text-[9px] font-bold text-slate-400 mb-1.5 tracking-widest">STYLE</p>
      <a href="#" class="block rounded-lg bg-pink-600 px-2.5 py-1.5 text-xs text-white mb-0.5">Photorealistic</a>
      <a href="#" class="block rounded-lg px-2.5 py-1.5 text-xs text-slate-400 hover:bg-slate-800">Illustration</a>
    </div>
    <div>
      <p class="text-[9px] font-bold text-slate-400 mb-1.5 tracking-widest">ASPECT RATIO</p>
      <div class="flex gap-1">
        <button class="rounded-lg bg-pink-600 px-3 py-1 text-[10px] font-bold text-white">1:1</button>
        <button class="rounded-lg bg-slate-800 px-3 py-1 text-[10px] font-bold text-slate-400">16:9</button>
        <button class="rounded-lg bg-slate-800 px-3 py-1 text-[10px] font-bold text-slate-400">9:16</button>
      </div>
    </div>
  </div>
</aside>

✦

AI Code Generator Sidebar

AI Tools

Code generator sidebar — language tags and action modes (generate, refactor, debug).

💻 Code Generator

LANGUAGE

ACTION

<aside class="flex h-72 w-52 flex-col rounded-2xl border border-slate-700 bg-slate-900 shadow-2xl overflow-hidden">
  <div class="border-b border-slate-700 px-3 py-3"><p class="text-xs font-bold text-white">💻 Code Generator</p></div>
  <div class="flex-1 px-3 py-2 overflow-auto space-y-3">
    <div>
      <p class="text-[9px] font-bold text-slate-400 mb-1.5 tracking-widest">LANGUAGE</p>
      <div class="flex flex-wrap gap-1">
        <button class="rounded-md bg-blue-600 px-2 py-1 text-[10px] font-semibold text-white">TypeScript</button>
        <button class="rounded-md bg-slate-800 px-2 py-1 text-[10px] font-semibold text-slate-400 hover:bg-slate-700">Python</button>
        <button class="rounded-md bg-slate-800 px-2 py-1 text-[10px] font-semibold text-slate-400 hover:bg-slate-700">Go</button>
      </div>
    </div>
    <div>
      <p class="text-[9px] font-bold text-slate-400 mb-1.5 tracking-widest">ACTION</p>
      <a href="#" class="block rounded-lg bg-blue-600 px-2.5 py-1.5 text-xs text-white mb-0.5">Generate</a>
      <a href="#" class="block rounded-lg px-2.5 py-1.5 text-xs text-slate-400 hover:bg-slate-800">Refactor</a>
    </div>
  </div>
</aside>

✦

AI Video Generator Sidebar

AI Tools

Video generator sidebar — mode selector, duration, and quality options.

🎬 Video Generator

New

MODE

DURATION

QUALITY

<aside class="flex h-72 w-52 flex-col rounded-2xl border border-slate-700 bg-slate-900 shadow-2xl overflow-hidden">
  <div class="flex items-center justify-between border-b border-slate-700 px-3 py-3">
    <p class="text-xs font-bold text-white">🎬 Video Generator</p>
    <span class="rounded-md bg-emerald-500 px-2 py-0.5 text-[9px] font-bold text-white">New</span>
  </div>
  <div class="flex-1 px-3 py-2 overflow-auto space-y-3">
    <div>
      <p class="text-[9px] font-bold text-slate-400 mb-1.5 tracking-widest">MODE</p>
      <a href="#" class="block rounded-lg bg-rose-600 px-2.5 py-1.5 text-xs text-white mb-0.5">Text to Video</a>
      <a href="#" class="block rounded-lg px-2.5 py-1.5 text-xs text-slate-400 hover:bg-slate-800">Image to Video</a>
    </div>
    <div>
      <p class="text-[9px] font-bold text-slate-400 mb-1.5 tracking-widest">DURATION</p>
      <div class="flex flex-wrap gap-1">
        <button class="rounded-md bg-slate-800 px-2.5 py-1 text-[10px] font-bold text-slate-400">5s</button>
        <button class="rounded-md bg-rose-600 px-2.5 py-1 text-[10px] font-bold text-white">15s</button>
        <button class="rounded-md bg-slate-800 px-2.5 py-1 text-[10px] font-bold text-slate-400">30s</button>
      </div>
    </div>
  </div>
</aside>

✦

AI Generation History Sidebar

AI Tools

AI generation history sidebar with type icon, truncated prompt, tag, and timestamp.

🕐 History

<aside class="flex h-72 w-60 flex-col rounded-2xl border border-slate-700 bg-slate-900 shadow-2xl overflow-hidden">
  <div class="flex items-center justify-between border-b border-slate-700 px-3 py-3">
    <p class="text-xs font-bold text-white">🕐 History</p>
    <button class="text-[10px] text-slate-400 hover:text-slate-200">Clear all</button>
  </div>
  <div class="flex-1 px-2 py-2 space-y-0.5 overflow-auto">
    <button class="w-full rounded-xl bg-slate-700 px-2.5 py-2 text-left">
      <div class="flex items-center gap-2 mb-0.5"><span>✍️</span><span class="flex-1 text-[11px] font-semibold text-slate-200 truncate">Write a product launch email for...</span></div>
      <div class="flex items-center gap-2 pl-6"><span class="rounded-md bg-slate-700 px-1.5 py-0.5 text-[9px] font-bold text-slate-400">Text</span><span class="text-[9px] text-slate-500">2m ago</span></div>
    </button>
    <button class="w-full rounded-xl px-2.5 py-2 text-left hover:bg-slate-800">
      <div class="flex items-center gap-2 mb-0.5"><span>🎨</span><span class="flex-1 text-[11px] font-semibold text-slate-200 truncate">Futuristic city at night, neon lights...</span></div>
      <div class="flex items-center gap-2 pl-6"><span class="rounded-md bg-slate-700 px-1.5 py-0.5 text-[9px] font-bold text-slate-400">Image</span><span class="text-[9px] text-slate-500">14m ago</span></div>
    </button>
  </div>
</aside>

✦

AI Model Selection Sidebar

AI Tools

AI model picker showing provider, speed, quality rating, and free/best badges.

🤖 Select Model

<aside class="flex h-72 w-60 flex-col rounded-2xl border border-slate-700 bg-slate-900 shadow-2xl overflow-hidden">
  <div class="border-b border-slate-700 px-3 py-3"><p class="text-xs font-bold text-white">🤖 Select Model</p></div>
  <div class="flex-1 px-2 py-2 space-y-1 overflow-auto">
    <button class="w-full rounded-xl border border-violet-500 bg-violet-600/20 px-3 py-2 text-left">
      <div class="flex items-center justify-between"><span class="text-xs font-bold text-violet-300">GPT-4o</span><span class="rounded-md bg-violet-500/30 px-1.5 py-0.5 text-[9px] font-bold text-violet-300">Best</span></div>
      <div class="flex items-center gap-3 mt-0.5"><span class="text-[9px] text-slate-500">OpenAI</span><span class="text-[9px] text-slate-500">Speed: ⚡⚡⚡</span></div>
    </button>
    <button class="w-full rounded-xl border border-transparent px-3 py-2 text-left hover:bg-slate-800">
      <div class="flex items-center justify-between"><span class="text-xs font-bold text-slate-200">Claude 3.5</span></div>
      <div class="flex items-center gap-3 mt-0.5"><span class="text-[9px] text-slate-500">Anthropic</span><span class="text-[9px] text-slate-500">Speed: ⚡⚡⚡</span></div>
    </button>
  </div>
</aside>

✦

AI Saved Prompts Sidebar

AI Tools

Saved prompts library with category tabs, usage counts, and favourite star.

📝 Saved Prompts

Product launch email

142 uses

Bug report template

98 uses

SEO meta description

204 uses

LinkedIn headline

67 uses

<aside class="flex h-72 w-60 flex-col rounded-2xl border border-slate-700 bg-slate-900 shadow-2xl overflow-hidden">
  <div class="border-b border-slate-700 px-3 py-3"><p class="text-xs font-bold text-white">📝 Saved Prompts</p></div>
  <div class="flex gap-1 border-b border-slate-700 px-2 py-2">
    <button class="rounded-md bg-violet-600 px-2 py-1 text-[10px] font-semibold text-white">All</button>
    <button class="rounded-md bg-slate-800 px-2 py-1 text-[10px] font-semibold text-slate-400">Marketing</button>
    <button class="rounded-md bg-slate-800 px-2 py-1 text-[10px] font-semibold text-slate-400">Dev</button>
    <button class="rounded-md bg-slate-800 px-2 py-1 text-[10px] font-semibold text-slate-400">SEO</button>
  </div>
  <div class="flex-1 px-2 py-2 space-y-0.5 overflow-auto">
    <div class="flex items-center gap-2 rounded-xl px-2.5 py-2 hover:bg-slate-800 transition">
      <div class="flex-1 min-w-0"><p class="text-xs font-medium text-slate-200 truncate">Product launch email</p><p class="text-[9px] text-slate-500">142 uses</p></div>
      <span class="text-yellow-400 text-sm">★</span>
    </div>
  </div>
</aside>

✦

AI Settings Sidebar

AI Tools

AI settings sidebar — streaming toggle, memory toggle, temperature slider, API keys.

⚙️ AI Settings

Streaming

Real-time token output

Memory

Remember past chats

Temperature

0.7

PreciseCreative

API & KEYS

API Keys

Usage & Billing

Rate Limits

PREFERENCES

Default Model

Language

Timezone

<aside class="flex h-72 w-60 flex-col rounded-2xl border border-slate-700 bg-slate-900 shadow-2xl overflow-hidden">
  <div class="border-b border-slate-700 px-3 py-3"><p class="text-xs font-bold text-white">⚙️ AI Settings</p></div>
  <div class="flex-1 px-3 py-2 overflow-auto space-y-3">
    <div class="flex items-center justify-between">
      <div><p class="text-xs font-semibold text-slate-200">Streaming</p><p class="text-[9px] text-slate-500">Real-time token output</p></div>
      <div class="relative h-5 w-9 rounded-full bg-violet-600 cursor-pointer"><span class="absolute top-0.5 left-4 h-4 w-4 rounded-full bg-white transition-all" /></div>
    </div>
    <div>
      <div class="flex items-center justify-between mb-1"><p class="text-xs font-semibold text-slate-200">Temperature</p><span class="text-xs font-bold text-violet-400">0.7</span></div>
      <input type="range" class="w-full accent-violet-500" value="70" max="100" />
    </div>
    <div><p class="text-[9px] font-bold text-slate-500 mb-1 tracking-widest">API & KEYS</p>
      <p class="py-1 text-xs text-slate-400 cursor-pointer hover:text-slate-200">API Keys</p>
      <p class="py-1 text-xs text-slate-400 cursor-pointer hover:text-slate-200">Usage & Billing</p>
    </div>
  </div>
</aside>

🛍️

eCommerce Full Sidebar

eCommerce

Full eCommerce app sidebar — grouped Store, Finances, Customers, and Settings.

🛍

ShopFlow

<aside class="flex h-80 w-48 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center gap-2 border-b border-zinc-100 px-4 py-3.5">
    <div class="h-7 w-7 rounded-xl bg-orange-500 flex items-center justify-center text-white text-xs font-bold">🛍</div>
    <span class="text-sm font-bold text-zinc-800">ShopFlow</span>
  </div>
  <nav class="flex-1 px-2 py-1.5 overflow-auto space-y-2">
    <div><p class="px-2.5 mb-0.5 text-[9px] font-bold tracking-widest text-zinc-400">STORE</p>
      <a href="#" class="flex items-center gap-2 rounded-lg bg-orange-50 px-2.5 py-1.5 text-xs font-medium text-orange-700"><span>⊞</span> Dashboard</a>
      <a href="#" class="flex items-center justify-between rounded-lg px-2.5 py-1.5 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span class="flex items-center gap-2"><span>📦</span> Products</span><span class="rounded-full bg-orange-100 px-1.5 text-[9px] font-bold text-orange-600">248</span></a>
    </div>
    <div><p class="px-2.5 mb-0.5 text-[9px] font-bold tracking-widest text-zinc-400">FINANCES</p>
      <a href="#" class="flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>💳</span> Billing</a>
      <a href="#" class="flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>🧾</span> Invoices</a>
    </div>
  </nav>
</aside>

🛍️

Products Filter Sidebar

eCommerce

Products sidebar with search, sort dropdown, and status filter tabs.

🔍Search products...

Status filter

<aside class="flex h-72 w-52 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center gap-2 border-b border-zinc-100 px-3 py-3">
    <div class="flex flex-1 items-center gap-1.5 rounded-lg bg-zinc-100 px-2.5 py-1.5 text-xs text-zinc-400">🔍 Search products...</div>
    <button class="rounded-lg bg-orange-500 px-2.5 py-1.5 text-[10px] font-bold text-white">+ Add</button>
  </div>
  <nav class="flex-1 px-2 py-1.5 space-y-0.5 overflow-auto">
    <a href="#" class="flex items-center justify-between rounded-lg bg-orange-50 px-2.5 py-2 text-xs font-medium text-orange-700"><span>All Products</span><span class="text-[10px] text-orange-400">248</span></a>
    <a href="#" class="flex items-center justify-between rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>Active</span><span class="text-[10px] text-zinc-400">189</span></a>
    <a href="#" class="flex items-center justify-between rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>Draft</span><span class="text-[10px] text-zinc-400">42</span></a>
    <a href="#" class="flex items-center justify-between rounded-lg px-2.5 py-2 text-xs font-medium text-zinc-500 hover:bg-zinc-50"><span>Out of Stock</span><span class="text-[10px] text-zinc-400">6</span></a>
  </nav>
</aside>

🛍️

Add Product Stepper Sidebar

eCommerce

Multi-step product creation stepper with progress bar — 6 steps.

📦 Add Product

Step 2 of 6

<aside class="flex h-72 w-52 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="border-b border-zinc-100 px-4 py-3"><p class="text-xs font-bold text-zinc-800">📦 Add Product</p><p class="text-[9px] text-zinc-400 mt-0.5">Step 2 of 6</p></div>
  <div class="h-1 bg-zinc-100"><div class="h-1 bg-orange-500" style="width:33%"></div></div>
  <nav class="flex-1 px-3 py-2 overflow-auto">
    <div class="flex items-center gap-3 rounded-lg px-2 py-2">
      <div class="h-6 w-6 rounded-full bg-orange-500 border-2 border-orange-500 text-white text-xs font-bold flex items-center justify-center">✓</div>
      <div><p class="text-xs font-semibold text-zinc-600">Basic Info</p><p class="text-[9px] text-zinc-400">Name, SKU, category</p></div>
    </div>
    <div class="flex items-center gap-3 rounded-lg bg-orange-50 px-2 py-2">
      <div class="h-6 w-6 rounded-full border-2 border-orange-500 text-orange-600 text-xs font-bold flex items-center justify-center">2</div>
      <div><p class="text-xs font-semibold text-orange-700">Pricing</p><p class="text-[9px] text-zinc-400">Price, compare, tax</p></div>
    </div>
  </nav>
</aside>

🛍️

Billing Sidebar

eCommerce

Billing sidebar with live plan card, quota bar, and billing navigation.

💳 Billing

CURRENT PLAN

Pro

$49/mo

Renews May 15, 2026

68% of quota used

<aside class="flex h-72 w-52 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="border-b border-zinc-100 px-4 py-3"><p class="text-xs font-bold text-zinc-800">💳 Billing</p></div>
  <div class="bg-gradient-to-br from-emerald-500 to-teal-600 mx-2 mt-2 rounded-xl px-3 py-2.5">
    <div class="flex items-center justify-between"><p class="text-[10px] font-bold text-emerald-100">CURRENT PLAN</p><span class="rounded-md bg-white/20 px-1.5 py-0.5 text-[9px] font-bold text-white">Pro</span></div>
    <p class="text-lg font-bold text-white mt-0.5">$49/mo</p>
    <div class="mt-1.5 h-1 rounded-full bg-white/20"><div class="h-1 rounded-full bg-white" style="width:68%"></div></div>
    <p class="text-[9px] text-emerald-100 mt-0.5">68% of quota used</p>
  </div>
  <nav class="flex-1 px-2 py-2 space-y-0.5 overflow-auto">
    <a href="#" class="block rounded-lg bg-emerald-50 px-2.5 py-1.5 text-xs font-medium text-emerald-700">Overview</a>
    <a href="#" class="block rounded-lg px-2.5 py-1.5 text-xs font-medium text-zinc-500 hover:bg-zinc-50">Payment Methods</a>
    <a href="#" class="block rounded-lg px-2.5 py-1.5 text-xs font-medium text-zinc-500 hover:bg-zinc-50">Billing History</a>
  </nav>
</aside>

🛍️

Invoices List Sidebar

eCommerce

Invoice sidebar with status tabs (Paid/Pending/Overdue) and recent invoice list.

🧾 Invoices

INV-2024

Acme Corp

$1,200

Paid

INV-2023

Beta LLC

$840

Pending

INV-2022

Gamma Inc

$2,400

Paid

<aside class="flex h-72 w-56 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center justify-between border-b border-zinc-100 px-4 py-3">
    <p class="text-xs font-bold text-zinc-800">🧾 Invoices</p>
    <button class="rounded-lg bg-blue-600 px-2 py-1 text-[10px] font-bold text-white">+ New</button>
  </div>
  <div class="flex gap-1 border-b border-zinc-100 px-2 py-2">
    <button class="flex items-center gap-1 rounded-lg bg-blue-50 px-2 py-1 text-[10px] font-semibold text-blue-700"><span class="h-1.5 w-1.5 rounded-full bg-zinc-400"></span>All (47)</button>
    <button class="rounded-lg px-2 py-1 text-[10px] font-semibold text-zinc-500 hover:bg-zinc-50">Paid</button>
    <button class="rounded-lg px-2 py-1 text-[10px] font-semibold text-zinc-500 hover:bg-zinc-50">Pending</button>
  </div>
  <div class="flex-1 px-2 py-1.5 overflow-auto">
    <div class="flex items-center gap-2 rounded-lg px-2.5 py-2 hover:bg-zinc-50">
      <div class="flex-1"><p class="text-xs font-semibold text-zinc-800">INV-2024</p><p class="text-[9px] text-zinc-500">Acme Corp</p></div>
      <div class="text-right"><p class="text-xs font-bold text-zinc-800">$1,200</p><p class="text-[9px] font-semibold text-emerald-600">Paid</p></div>
    </div>
  </div>
</aside>

🛍️

Single Invoice Detail Sidebar

eCommerce

Invoice detail sidebar — client, dates, line items breakdown, and total.

INV-2024-001

Apr 1 – Apr 30, 2026

Paid

Client

Acme Corp

Issued

Apr 1, 2026

Due

Apr 30, 2026

Consulting (10h)

$800

Design work

$400

Tax (10%)

$120

Total

$1,320

<aside class="flex h-72 w-56 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center justify-between border-b border-zinc-100 px-4 py-3">
    <div><p class="text-xs font-bold text-zinc-800">INV-2024-001</p><p class="text-[9px] text-zinc-400">Apr 1–30, 2026</p></div>
    <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-[10px] font-bold text-emerald-700">Paid</span>
  </div>
  <div class="flex-1 px-4 py-3 overflow-auto space-y-2">
    <div class="flex items-center justify-between py-1 border-b border-zinc-100"><p class="text-[10px] text-zinc-500">Client</p><p class="text-[10px] font-semibold text-zinc-800">Acme Corp</p></div>
    <div class="rounded-xl bg-zinc-50 px-3 py-2 space-y-1">
      <div class="flex justify-between"><p class="text-[11px] text-zinc-600">Consulting</p><p class="text-[11px] font-semibold">$800</p></div>
      <div class="flex justify-between"><p class="text-[11px] text-zinc-600">Design</p><p class="text-[11px] font-semibold">$400</p></div>
    </div>
    <div class="flex items-center justify-between rounded-xl bg-blue-600 px-3 py-2.5">
      <p class="text-xs font-bold text-white">Total</p><p class="text-sm font-bold text-white">$1,320</p>
    </div>
  </div>
</aside>

🛍️

Create Invoice Stepper Sidebar

eCommerce

5-step invoice creation wizard sidebar with progress bar and Back/Next controls.

🧾 Create Invoice

Step 1 of 5

<aside class="flex h-72 w-52 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="border-b border-zinc-100 px-4 py-3">
    <p class="text-xs font-bold text-zinc-800">🧾 Create Invoice</p>
    <div class="mt-2 h-1.5 rounded-full bg-zinc-100"><div class="h-1.5 rounded-full bg-blue-600" style="width:20%"></div></div>
    <p class="text-[9px] text-zinc-400 mt-1">Step 1 of 5</p>
  </div>
  <nav class="flex-1 px-3 py-2 overflow-auto space-y-1">
    <div class="flex items-center gap-3 rounded-xl bg-blue-50 px-2.5 py-2">
      <div class="h-7 w-7 rounded-full border-2 border-blue-600 text-blue-600 text-xs font-bold flex items-center justify-center">1</div>
      <span class="text-xs font-semibold text-blue-700">Client Details</span>
    </div>
    <div class="flex items-center gap-3 rounded-xl px-2.5 py-2 hover:bg-zinc-50">
      <div class="h-7 w-7 rounded-full border-2 border-zinc-200 text-zinc-400 text-xs font-bold flex items-center justify-center">2</div>
      <span class="text-xs font-semibold text-zinc-400">Line Items</span>
    </div>
  </nav>
  <div class="border-t border-zinc-100 px-3 py-3 flex gap-2">
    <button class="flex-1 rounded-lg border border-zinc-200 py-1.5 text-xs font-semibold text-zinc-600 opacity-40">Back</button>
    <button class="flex-1 rounded-lg bg-blue-600 py-1.5 text-xs font-semibold text-white">Next</button>
  </div>
</aside>

🛍️

Transactions Sidebar

eCommerce

Transaction sidebar with Income/Expense/Refund tabs and live feed of entries.

💸 Transactions

This month

↑

Order #4821

2h ago

+$248

↓

Stripe Fee

2h ago

-$7.20

↓

Refund #4790

5h ago

-$49

↑

Order #4820

1d ago

+$129

<aside class="flex h-72 w-56 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center justify-between border-b border-zinc-100 px-4 py-3">
    <p class="text-xs font-bold text-zinc-800">💸 Transactions</p>
    <span class="text-[10px] text-zinc-400">This month</span>
  </div>
  <div class="flex gap-1 border-b border-zinc-100 px-2 py-2">
    <button class="flex-1 rounded-lg bg-teal-600 py-1 text-[10px] font-semibold text-white">All</button>
    <button class="flex-1 rounded-lg bg-zinc-100 py-1 text-[10px] font-semibold text-zinc-500">Income</button>
    <button class="flex-1 rounded-lg bg-zinc-100 py-1 text-[10px] font-semibold text-zinc-500">Expense</button>
    <button class="flex-1 rounded-lg bg-zinc-100 py-1 text-[10px] font-semibold text-zinc-500">Refund</button>
  </div>
  <div class="flex-1 px-2 py-1.5 overflow-auto">
    <div class="flex items-center gap-2 rounded-lg px-2.5 py-2 hover:bg-zinc-50">
      <div class="h-6 w-6 rounded-lg bg-emerald-100 flex items-center justify-center text-xs">↑</div>
      <div class="flex-1"><p class="text-xs font-medium text-zinc-800 truncate">Order #4821</p><p class="text-[9px] text-zinc-400">2h ago</p></div>
      <span class="text-xs font-bold text-emerald-600">+$248</span>
    </div>
  </div>
</aside>

🛍️

Single Transaction Sidebar

eCommerce

Transaction detail sidebar — amount hero, metadata rows, and refund CTA.

Transaction Detail

Success

+$248.00

Apr 11, 2026 · 2:34 PM

Order ID

#ORD-4821

Customer

John Smith

Payment

Visa •••• 4242

Net Amount

$240.80

Fee

$7.20 (2.9% + 30¢)

Status

Settled

<aside class="flex h-72 w-56 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center justify-between border-b border-zinc-100 px-4 py-3">
    <p class="text-xs font-bold text-zinc-800">Transaction Detail</p>
    <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-[10px] font-bold text-emerald-700">Success</span>
  </div>
  <div class="flex-1 px-4 py-3 overflow-auto">
    <div class="text-center py-3"><p class="text-2xl font-bold text-zinc-900">+$248.00</p><p class="text-[10px] text-zinc-400 mt-0.5">Apr 11, 2026 · 2:34 PM</p></div>
    <div class="space-y-1">
      <div class="flex justify-between border-b border-zinc-50 py-1"><p class="text-[10px] text-zinc-500">Order ID</p><p class="text-[10px] font-semibold text-zinc-800">#ORD-4821</p></div>
      <div class="flex justify-between border-b border-zinc-50 py-1"><p class="text-[10px] text-zinc-500">Net Amount</p><p class="text-[10px] font-semibold text-zinc-800">$240.80</p></div>
      <div class="flex justify-between border-b border-zinc-50 py-1"><p class="text-[10px] text-zinc-500">Fee</p><p class="text-[10px] font-semibold text-zinc-800">$7.20</p></div>
    </div>
    <button class="mt-3 w-full rounded-xl border border-zinc-200 py-2 text-xs font-semibold text-zinc-600">Issue Refund</button>
  </div>
</aside>

🛍️

Orders Status Sidebar

eCommerce

Orders sidebar with color-dot status filters and pending badge.

🛒 Orders

12 pending

<aside class="flex h-72 w-52 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center justify-between border-b border-zinc-100 px-4 py-3">
    <p class="text-xs font-bold text-zinc-800">🛒 Orders</p>
    <span class="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-bold text-amber-700">12 pending</span>
  </div>
  <nav class="flex-1 px-2 py-2 space-y-0.5 overflow-auto">
    <a href="#" class="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-xs text-zinc-600 hover:bg-zinc-50"><span class="h-2 w-2 rounded-full bg-zinc-300"></span><span class="flex-1 font-medium">All Orders</span><span class="text-[10px] text-zinc-400">142</span></a>
    <a href="#" class="flex items-center gap-2.5 rounded-lg bg-indigo-50 px-2.5 py-2 text-xs text-indigo-700"><span class="h-2 w-2 rounded-full bg-amber-400"></span><span class="flex-1 font-medium">Pending</span><span class="text-[10px] text-zinc-400">12</span></a>
    <a href="#" class="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-xs text-zinc-600 hover:bg-zinc-50"><span class="h-2 w-2 rounded-full bg-emerald-400"></span><span class="flex-1 font-medium">Delivered</span><span class="text-[10px] text-zinc-400">54</span></a>
  </nav>
</aside>

🛍️

Customers Sidebar

eCommerce

Customer segment filter sidebar with search bar and recent customer list.

🔍Search customers...

Alice Wang

$4,820 lifetime

VIP

Bob Torres

$240 lifetime

New

Carol Kim

$1,200 lifetime

Repeat

<aside class="flex h-72 w-52 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="border-b border-zinc-100 px-3 py-3">
    <div class="flex items-center gap-1.5 rounded-lg bg-zinc-100 px-2.5 py-1.5 mb-2 text-xs text-zinc-400">🔍 Search customers...</div>
    <div class="flex flex-wrap gap-1">
      <button class="rounded-md bg-rose-600 px-2 py-0.5 text-[10px] font-semibold text-white">All (1248)</button>
      <button class="rounded-md bg-zinc-100 px-2 py-0.5 text-[10px] font-semibold text-zinc-500">VIP (84)</button>
      <button class="rounded-md bg-zinc-100 px-2 py-0.5 text-[10px] font-semibold text-zinc-500">New (128)</button>
    </div>
  </div>
  <div class="flex-1 px-2 py-2 overflow-auto">
    <div class="flex items-center gap-2 rounded-lg px-2.5 py-2 hover:bg-zinc-50">
      <div class="h-7 w-7 rounded-full bg-rose-100 flex items-center justify-center text-[10px] font-bold text-rose-600">A</div>
      <div class="flex-1"><p class="text-xs font-semibold text-zinc-800">Alice Wang</p><p class="text-[9px] text-zinc-500">$4,820 lifetime</p></div>
      <span class="rounded-md bg-zinc-100 px-1.5 py-0.5 text-[9px] font-bold text-zinc-500">VIP</span>
    </div>
  </div>
</aside>

🛍️

Store Analytics Sidebar

eCommerce

eCommerce analytics sidebar with period toggle, 4 KPI mini-cards, and top product.

📊 Store Analytics

Revenue

$12.4K

+18%

Orders

284

+9%

Avg Order

$43.7

-2%

Conv Rate

3.2%

+0.4%

Calendar Sidebar — Full

Calendar

Full calendar sidebar with mini-month picker and upcoming events list.

April 2026

SMTWTFS

TODAY

9:00Team standup

11:30Design review

14:001:1 with manager

<aside class="flex h-80 w-52 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center justify-between border-b border-zinc-100 px-3 py-2.5">
    <span class="text-xs font-bold text-zinc-800">April 2026</span>
    <div class="flex gap-1"><button class="px-1 text-zinc-400">‹</button><button class="px-1 text-zinc-400">›</button></div>
  </div>
  <div class="px-2 py-2">
    <div class="grid grid-cols-7 mb-1"><!-- day headers S M T W T F S --></div>
    <div class="grid grid-cols-7 gap-y-0.5"><!-- day buttons --></div>
  </div>
  <div class="flex-1 border-t border-zinc-100 px-2 py-2 overflow-auto">
    <p class="px-1 text-[9px] font-bold text-zinc-400 mb-1">TODAY</p>
    <div class="flex items-center gap-2 rounded-lg px-2 py-1.5"><span class="h-2 w-2 rounded-full bg-blue-500"></span><span class="text-[9px] font-bold text-zinc-400 w-7">9:00</span><span class="text-[10px] font-medium text-zinc-700">Team standup</span></div>
    <div class="flex items-center gap-2 rounded-lg px-2 py-1.5"><span class="h-2 w-2 rounded-full bg-violet-500"></span><span class="text-[9px] font-bold text-zinc-400 w-7">2:00</span><span class="text-[10px] font-medium text-zinc-700">1:1 with manager</span></div>
  </div>
</aside>

📅

Mini Calendar Picker Sidebar

Calendar

Interactive mini-month calendar with prev/next navigation, dot indicators for events.

Apr 2026

SMTWTFS

Selected: Apr 11, 2026

Sprint review

Client call

<aside class="flex h-72 w-52 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center justify-between border-b border-zinc-100 px-3 py-2.5">
    <button class="px-1 text-zinc-400 text-sm">‹</button>
    <span class="text-xs font-bold text-zinc-800">April 2026</span>
    <button class="px-1 text-zinc-400 text-sm">›</button>
  </div>
  <div class="px-3 py-2">
    <div class="grid grid-cols-7 mb-1.5"><!-- S M T W T F S --></div>
    <div class="grid grid-cols-7 gap-y-1">
      <!-- day 11 selected: -->
      <button class="relative flex h-6 w-6 mx-auto items-center justify-center rounded-full bg-indigo-600 text-[10px] font-medium text-white">11</button>
    </div>
  </div>
</aside>

📅

Upcoming Events Sidebar

Calendar

Event list sidebar with color strip, time, location, and attendee count.

📅 Upcoming Events

<aside class="flex h-72 w-60 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center justify-between border-b border-zinc-100 px-4 py-3">
    <p class="text-xs font-bold text-zinc-800">📅 Upcoming Events</p>
    <button class="rounded-lg bg-blue-600 px-2 py-1 text-[10px] font-bold text-white">+ Add</button>
  </div>
  <div class="flex-1 px-2 py-2 space-y-0.5 overflow-auto">
    <div class="flex items-center gap-2.5 rounded-xl bg-blue-50 px-2.5 py-2">
      <span class="h-8 w-1 rounded-full bg-blue-500"></span>
      <div class="flex-1 min-w-0"><p class="text-xs font-semibold text-zinc-800">Team standup</p><p class="text-[9px] text-zinc-500">Today · 9:00 AM · Zoom</p></div>
      <span class="text-[9px] text-zinc-400">8👥</span>
    </div>
    <div class="flex items-center gap-2.5 rounded-xl px-2.5 py-2 hover:bg-zinc-50">
      <span class="h-8 w-1 rounded-full bg-rose-500"></span>
      <div class="flex-1 min-w-0"><p class="text-xs font-semibold text-zinc-800">Board meeting</p><p class="text-[9px] text-zinc-500">Tomorrow · 10:30 AM</p></div>
    </div>
  </div>
</aside>

📅

Calendar Categories Sidebar

Calendar

Toggle calendar visibility by category — Work, Personal, Family, Sport with event counts.

🗂️ Calendars

MY CALENDARS

Work14

Personal7

Family3

Birthdays5

Holidays8

Sport6

<aside class="flex h-72 w-52 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="border-b border-zinc-100 px-4 py-3"><p class="text-xs font-bold text-zinc-800">🗂️ Calendars</p></div>
  <div class="flex-1 px-3 py-2 space-y-0.5 overflow-auto">
    <p class="text-[9px] font-bold text-zinc-400 mb-1 tracking-widest">MY CALENDARS</p>
    <div class="flex items-center gap-2.5 rounded-lg px-1 py-1.5 hover:bg-zinc-50 cursor-pointer">
      <span class="h-3.5 w-3.5 rounded-sm bg-blue-500"></span>
      <span class="flex-1 text-xs font-medium text-zinc-700">Work</span>
      <span class="text-[9px] text-zinc-400">14</span>
    </div>
    <div class="flex items-center gap-2.5 rounded-lg px-1 py-1.5 hover:bg-zinc-50 cursor-pointer">
      <span class="h-3.5 w-3.5 rounded-sm bg-emerald-500"></span>
      <span class="flex-1 text-xs font-medium text-zinc-700">Personal</span>
      <span class="text-[9px] text-zinc-400">7</span>
    </div>
    <div class="flex items-center gap-2.5 rounded-lg px-1 py-1.5 cursor-pointer opacity-40">
      <span class="h-3.5 w-3.5 rounded-sm bg-zinc-200"></span>
      <span class="flex-1 text-xs font-medium text-zinc-400">Family</span>
      <span class="text-[9px] text-zinc-400">3</span>
    </div>
  </div>
</aside>

📅

Day Schedule Sidebar

Calendar

Hour-by-hour day schedule sidebar with event blocks placed at correct times.

🗓️ Today — Apr 11

3 events

9am

Standup

10am

11am

Design Review

12pm

1pm

2pm

1:1 Manager

3pm

4pm

5pm

<aside class="flex h-72 w-52 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center justify-between border-b border-zinc-100 px-4 py-3">
    <p class="text-xs font-bold text-zinc-800">🗓️ Today — Apr 11</p>
    <span class="rounded-md bg-blue-100 px-2 py-0.5 text-[10px] font-bold text-blue-700">3 events</span>
  </div>
  <div class="flex-1 overflow-auto px-2 py-2">
    <div class="flex items-start gap-2 mb-2">
      <span class="text-[9px] text-zinc-400 w-8 shrink-0 pt-0.5">9am</span>
      <div class="flex-1 border-t border-zinc-100">
        <div class="rounded-md bg-blue-500 px-2 py-1 text-[10px] font-semibold text-white" style="height:24px">Standup</div>
      </div>
    </div>
    <div class="flex items-start gap-2 mb-2">
      <span class="text-[9px] text-zinc-400 w-8 shrink-0 pt-0.5">11am</span>
      <div class="flex-1 border-t border-zinc-100">
        <div class="rounded-md bg-violet-500 px-2 py-1 text-[10px] font-semibold text-white" style="height:36px">Design Review</div>
      </div>
    </div>
  </div>
</aside>

📅

Event Invites Sidebar

Calendar

Pending event invitations with Accept/Decline buttons and confirmation states.

📨 Invites

3 pending

Q2 Planning

Sarah M. · Apr 14, 10am

Product Launch

Team Lead · Apr 18, 2pm

Team Lunch

HR Team · Apr 22, 12pm

<aside class="flex h-72 w-60 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center justify-between border-b border-zinc-100 px-4 py-3">
    <p class="text-xs font-bold text-zinc-800">📨 Invites</p>
    <span class="rounded-full bg-rose-100 px-2 py-0.5 text-[10px] font-bold text-rose-700">3 pending</span>
  </div>
  <div class="flex-1 px-2 py-2 space-y-1 overflow-auto">
    <div class="rounded-xl border border-zinc-100 p-2.5">
      <div class="flex items-start gap-2 mb-2">
        <span class="h-2 w-2 rounded-full mt-1 bg-violet-500"></span>
        <div><p class="text-xs font-semibold text-zinc-800">Q2 Planning</p><p class="text-[9px] text-zinc-500">Sarah M. · Apr 14, 10am</p></div>
      </div>
      <div class="flex gap-1.5">
        <button class="flex-1 rounded-md bg-emerald-500 py-1 text-[10px] font-bold text-white">Accept</button>
        <button class="flex-1 rounded-md border border-zinc-200 py-1 text-[10px] font-bold text-zinc-600">Decline</button>
      </div>
    </div>
  </div>
</aside>

📅

Reminders Sidebar

Calendar

Reminder checklist sidebar with priority levels, check-off, and strikethrough.

🔔 Reminders

Team standup

In 15 min · high

Submit weekly report

In 2h · medium

Review PRs

Today 5pm · low

Monthly 1:1s

Tomorrow · medium

Quarterly goals review

Apr 15 · high

<aside class="flex h-72 w-60 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="flex items-center justify-between border-b border-zinc-100 px-4 py-3">
    <p class="text-xs font-bold text-zinc-800">🔔 Reminders</p>
    <button class="rounded-lg bg-amber-500 px-2 py-1 text-[10px] font-bold text-white">+ Add</button>
  </div>
  <div class="flex-1 px-2 py-2 space-y-0.5 overflow-auto">
    <div class="flex items-center gap-2.5 rounded-xl px-2.5 py-2 hover:bg-zinc-50">
      <div class="h-4 w-4 shrink-0 rounded-full border-2 border-zinc-300 flex items-center justify-center"></div>
      <div class="flex-1 min-w-0">
        <p class="text-xs font-medium text-zinc-700 truncate">Team standup</p>
        <p class="text-[9px] font-semibold text-red-500">In 15 min · high</p>
      </div>
    </div>
    <div class="flex items-center gap-2.5 rounded-xl px-2.5 py-2 opacity-40">
      <div class="h-4 w-4 shrink-0 rounded-full border-2 bg-emerald-500 border-emerald-500 flex items-center justify-center"><span class="text-white text-[8px]">✓</span></div>
      <p class="text-xs font-medium text-zinc-400 line-through truncate">Weekly report</p>
    </div>
  </div>
</aside>

📅

Calendar Search Sidebar

Calendar

Calendar search sidebar with view toggle (Day/Week/Month/Year) and upcoming results.

🔍

UPCOMING

Team standup

Daily 9am

Board meeting

Apr 18, 10am

Product review

Apr 25, 2pm

<aside class="flex h-72 w-56 flex-col rounded-2xl border border-zinc-100 bg-white shadow-lg overflow-hidden">
  <div class="border-b border-zinc-100 px-3 py-3 space-y-2">
    <div class="flex items-center gap-1.5 rounded-xl border border-zinc-200 px-2.5 py-2">
      <span class="text-zinc-400 text-xs">🔍</span>
      <input placeholder="Search events..." class="flex-1 text-xs bg-transparent focus:outline-none placeholder:text-zinc-400" />
    </div>
    <div class="flex gap-1">
      <button class="flex-1 rounded-lg bg-emerald-600 py-1 text-[10px] font-bold text-white">Month</button>
      <button class="flex-1 rounded-lg bg-zinc-100 py-1 text-[10px] font-bold text-zinc-500">Day</button>
      <button class="flex-1 rounded-lg bg-zinc-100 py-1 text-[10px] font-bold text-zinc-500">Week</button>
      <button class="flex-1 rounded-lg bg-zinc-100 py-1 text-[10px] font-bold text-zinc-500">Year</button>
    </div>
  </div>
  <div class="flex-1 px-2 py-2 overflow-auto">
    <p class="px-1 text-[9px] font-bold text-zinc-400 mb-1">UPCOMING</p>
    <div class="flex items-center gap-2.5 rounded-xl px-2.5 py-2 hover:bg-zinc-50">
      <span class="h-2 w-2 rounded-full bg-blue-500"></span>
      <div><p class="text-xs font-semibold text-zinc-800">Team standup</p><p class="text-[9px] text-zinc-500">Daily 9am</p></div>
    </div>
  </div>
</aside>

📈

Line Chart

Charts

Revenue trend line chart with gradient fill and indigo polyline.

Revenue

$12,430

+8.2%

JanFebMarAprMayJunJulAugSepOctNovDec

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white">
  <div class="flex justify-between mb-3"><div><p class="text-xs font-semibold text-zinc-500 uppercase">Revenue</p><p class="text-2xl font-bold">$12,430</p></div><span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-bold text-emerald-700">+8.2%</span></div>
  <svg viewBox="0 0 280 120" class="w-full"><polyline points="10,100 32,78 55,88 78,52 100,60 123,30 145,38 168,10 190,25 213,10" fill="none" stroke="#6366f1" stroke-width="2" stroke-linejoin="round"/></svg>
</div>

📈

Bar Chart

Charts

Monthly sales vertical bar chart with rounded tops.

Monthly Sales

8,246

+12%

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Mon

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white">
  <p class="text-xs font-semibold text-zinc-500 uppercase mb-4">Monthly Sales</p>
  <div class="flex items-end gap-2 h-28">
    <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full rounded-t-lg bg-blue-500 h-3/4"/><span class="text-[9px] text-zinc-400">Mon</span></div>
  </div>
</div>

📈

Horizontal Bar Chart

Charts

Category breakdown horizontal bar chart.

Category Breakdown

Electronics82%

Clothing65%

Home & Garden48%

Sports38%

Books27%

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white space-y-3">
  <div><div class="flex justify-between text-xs mb-1"><span>Electronics</span><span>82%</span></div><div class="h-2.5 w-full rounded-full bg-zinc-100"><div class="h-full rounded-full bg-indigo-500 w-4/5"/></div></div>
</div>

📈

Area Chart

Charts

Multi-series area chart with two overlapping gradient areas.

Traffic Overview

UsersSessions

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white">
  <p class="text-sm font-bold mb-3">Traffic Overview</p>
  <svg viewBox="0 0 280 110" class="w-full"><defs><linearGradient id="ag" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#8b5cf6" stop-opacity="0.3"/><stop offset="100%" stop-color="#8b5cf6" stop-opacity="0"/></linearGradient></defs><polygon points="8,102 ..." fill="url(#ag)"/><polyline points="8,78 ..." fill="none" stroke="#8b5cf6" stroke-width="2"/></svg>
</div>

📈

Multi-Line Chart

Charts

Two data series performance line chart.

Performance

Product AProduct B

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white">
  <p class="text-sm font-bold mb-2">Performance</p>
  <svg viewBox="0 0 280 110" class="w-full"><polyline points="..." fill="none" stroke="#6366f1" stroke-width="2.5"/><polyline points="..." fill="none" stroke="#fb7185" stroke-width="2.5" stroke-dasharray="4 2"/></svg>
</div>

📈

Pie Chart

Charts

Traffic sources pie chart with 4 SVG arc segments and legend.

Traffic Sources

Direct35%

Organic28%

Referral22%

Social15%

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white"><p class="text-sm font-bold mb-3">Traffic Sources</p><div class="flex gap-6"><svg viewBox="0 0 120 120" class="w-28"><path d="M 60 60 L 60 10 A 50 50 0 0 1 103 85 Z" fill="#6366f1"/></svg></div></div>

📈

Donut Chart

Charts

Storage usage donut chart with SVG stroke-dasharray and legend.

Storage Usage

Used68%

Available22%

Reserved10%

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white"><p class="text-sm font-bold mb-3">Storage Usage</p><svg viewBox="0 0 100 100" class="w-28"><circle cx="50" cy="50" r="40" fill="none" stroke="#f4f4f5" stroke-width="14"/><circle cx="50" cy="50" r="40" fill="none" stroke="#6366f1" stroke-width="14" stroke-dasharray="171 251" transform="rotate(-90 50 50)"/></svg></div>

📈

Stacked Bar Chart

Charts

Quarterly revenue stacked bar chart with 3 layers per bar.

Quarterly Revenue

Jan

Feb

Mar

Apr

May

Jun

Product AProduct BProduct C

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white"><p class="text-sm font-bold mb-4">Quarterly Revenue</p><div class="flex items-end gap-2 h-28"><div class="flex-1 flex flex-col-reverse rounded-t overflow-hidden h-4/5"><div class="bg-indigo-500 h-1/2"/><div class="bg-blue-400 h-1/3"/><div class="bg-cyan-300 h-1/6"/></div></div></div>

📈

Sparklines Row

Charts

3 mini inline sparklines with label and value.

Key Metrics

Revenue

$24.5K

+12%

Users

8,320

+5%

Churn

2.4%

-0.8%

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white space-y-3"><div class="flex items-center gap-3"><div class="w-24"><p class="text-xs font-semibold">Revenue</p><p class="text-base font-bold">$24.5K</p></div><svg class="flex-1 h-8"><polyline points="..." fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="text-xs font-bold text-emerald-600">+12%</span></div></div>

📈

Candlestick Chart

Charts

8 OHLC candles with green/red coloring for BTC/USD.

BTC/USD

$90,420 ↑

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white"><div class="flex justify-between mb-2"><p class="text-sm font-bold">BTC/USD</p><span class="text-xs font-bold text-emerald-600">$90,420 ↑</span></div><svg viewBox="0 0 280 120" class="w-full"><line x1="21" y1="20" x2="21" y2="110" stroke="#22c55e" stroke-width="1.5"/><rect x="10" y="35" width="22" height="40" fill="#22c55e" rx="2"/></svg></div>

📈

Stock Area Chart

Charts

AAPL price line with gradient fill and volume bars below.

AAPL

$185.40

+2.1%

Volume

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white"><div class="flex justify-between mb-1"><div><p class="text-xs text-zinc-500">AAPL</p><p class="text-xl font-bold">$185.40</p></div><span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-bold text-emerald-700">+2.1%</span></div></div>

📈

Currency Rate Board

Charts

5 currency pairs with live rate and change indicator.

FX Rates

EUR→USD

1.0842+0.12%

GBP→USD

1.2631+0.08%

USD→JPY

151.24-0.35%

USD→CAD

1.3621-0.05%

AUD→USD

0.6548+0.22%

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white"><p class="text-sm font-bold mb-3">FX Rates</p><div class="divide-y divide-zinc-100"><div class="flex items-center justify-between py-2"><div class="flex items-center gap-2"><span class="text-[10px] font-bold bg-zinc-100 rounded px-1.5">EUR</span><span class="text-zinc-300">→</span><span class="text-[10px] font-bold bg-zinc-100 rounded px-1.5">USD</span></div><span class="text-sm font-bold">1.0842</span><span class="text-xs font-semibold text-emerald-600">+0.12%</span></div></div></div>

📈

Gauge / Meter Chart

Charts

SVG semicircle arc gauge with needle pointer for CPU usage.

CPU Usage

0%50%100%

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white text-center"><p class="text-sm font-bold mb-2">CPU Usage</p><svg viewBox="0 0 140 100" class="w-48 mx-auto"><path d="M 20 80 A 50 50 0 1 1 120 80" fill="none" stroke="#f4f4f5" stroke-width="12" stroke-linecap="round"/><path d="M 20 80 A 50 50 0 0 1 106 38" fill="none" stroke="#6366f1" stroke-width="12" stroke-linecap="round"/></svg></div>

📈

Activity Heatmap

Charts

GitHub-style 7×12 contribution heatmap with intensity coloring.

Activity Heatmap

248 contributions

SMTWTFS

Less

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white"><p class="text-sm font-bold mb-3">Activity Heatmap</p><div class="flex gap-1"><div class="flex flex-col gap-1"><div class="w-3 h-3 rounded-sm bg-emerald-500"/><div class="w-3 h-3 rounded-sm bg-emerald-300"/><div class="w-3 h-3 rounded-sm bg-zinc-100"/></div></div></div>

📈

Funnel Chart

Charts

4-stage sales funnel with trapezoid shapes and percentage labels.

Sales Funnel

Visitors

10,000

100%

Leads

4,200

42%

Qualified

1,800

18%

Closed

620

6.2%

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white"><p class="text-sm font-bold mb-4">Sales Funnel</p><div class="space-y-1.5"><div class="flex items-center gap-3"><span class="text-xs text-zinc-500 w-20 text-right">Visitors</span><div class="flex-1 flex justify-center"><div class="bg-indigo-500 rounded h-7 w-full flex items-center justify-center"><span class="text-[10px] font-bold text-white">10,000</span></div></div></div></div></div>

📈

Radial Bar Chart

Charts

4 concentric SVG arcs at different radii showing system metrics.

System Metrics

CPU72%

RAM55%

Disk38%

Net81%

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white"><p class="text-sm font-bold mb-3">System Metrics</p><svg viewBox="0 0 110 110" class="w-32"><circle cx="55" cy="55" r="42" fill="none" stroke="#f4f4f5" stroke-width="7"/><circle cx="55" cy="55" r="42" fill="none" stroke="#6366f1" stroke-width="7" stroke-dasharray="190 267" stroke-linecap="round" transform="rotate(-90 55 55)"/></svg></div>

📈

Bubble Chart

Charts

6 bubbles varying in size and color positioned at x,y coordinates.

Market Share

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white"><p class="text-sm font-bold mb-2">Market Share</p><svg viewBox="0 0 100 100" class="w-full h-40 border border-zinc-100 rounded-xl"><circle cx="30" cy="60" r="18" fill="#6366f1" fill-opacity="0.8"/><circle cx="55" cy="35" r="24" fill="#22d3ee" fill-opacity="0.8"/></svg></div>

📈

Histogram

Charts

Distribution histogram with 12 bars and normal curve overlay.

Distribution

<div class="rounded-2xl border border-zinc-100 shadow-sm p-4 bg-white"><p class="text-sm font-bold mb-3">Distribution</p><svg viewBox="0 0 280 100" class="w-full"><rect x="1" y="85" width="21" height="5" fill="#6366f1" fill-opacity="0.7" rx="2"/><polyline points="12,90 35,70 58,45 ..." fill="none" stroke="#f59e0b" stroke-width="2"/></svg></div>

⊟

Basic Table

Tables

Clean 4-column table with Name, Email, Role, Status.

Name	Email	Role	Status
Alice Johnson	alice@acme.com	Admin	Active
Bob Smith	bob@acme.com	Editor	Active
Carol White	carol@acme.com	Viewer	Inactive

<table class="w-full text-sm"><thead class="bg-zinc-50 border-b border-zinc-100"><tr><th class="px-4 py-3 text-left text-xs font-bold text-zinc-500 uppercase">Name</th><th class="px-4 py-3 text-left text-xs font-bold text-zinc-500 uppercase">Email</th></tr></thead><tbody class="divide-y divide-zinc-100"><tr class="hover:bg-zinc-50"><td class="px-4 py-3 font-medium text-zinc-800">Alice Johnson</td><td class="px-4 py-3 text-zinc-500">alice@acme.com</td></tr></tbody></table>

⊟

Striped Table

Tables

Alternating row colors with indigo header.

Name	Department	Salary
Alex Turner	Engineering	$120k
Jamie Lee	Design	$95k
Morgan Yu	Marketing	$88k
Riley Chen	Sales	$105k
Sam Davis	Operations	$92k

<table class="w-full text-sm"><thead class="bg-indigo-600 text-white"><tr><th class="px-4 py-3 text-left text-xs font-bold uppercase">Name</th></tr></thead><tbody><tr class="bg-white"><td class="px-4 py-2.5">Alex Turner</td></tr><tr class="bg-indigo-50/40"><td class="px-4 py-2.5">Jamie Lee</td></tr></tbody></table>

⊟

Bordered Table

Tables

All-cell bordered table for financial data.

Quarter	Revenue	Costs	Profit
Q1	$42,000	$28,000	$14,000
Q2	$55,000	$32,000	$23,000
Q3	$48,000	$30,000	$18,000

<table class="w-full text-sm border-collapse"><thead><tr><th class="border border-zinc-200 px-4 py-2 text-left text-xs font-bold text-zinc-600 bg-zinc-50">Quarter</th></tr></thead><tbody><tr><td class="border border-zinc-200 px-4 py-2.5">Q1</td></tr></tbody></table>

⊟

Compact Dense Table

Tables

Tight padding table showing 6+ rows of order data.

Order	Item	Category	Qty	Total
#1042	MacBook Pro	Electronics	2	$5,198
#1043	AirPods Pro	Audio	5	$1,245
#1044	iPad Air	Tablet	1	$749
#1045	Magic Mouse	Peripherals	3	$237
#1046	USB-C Hub	Accessories	8	$320
#1047	iPhone 15	Mobile	2	$1,998

<table class="w-full text-xs"><thead class="bg-zinc-50 border-b border-zinc-100"><tr><th class="px-3 py-2 text-left font-bold text-zinc-500 uppercase">Order</th><th class="px-3 py-2 text-left font-bold text-zinc-500 uppercase">Item</th></tr></thead><tbody class="divide-y divide-zinc-50"><tr class="hover:bg-zinc-50"><td class="px-3 py-1.5 font-mono text-indigo-600">#1042</td></tr></tbody></table>

⊟

Data Table with Pagination

Tables

Sortable columns with prev/next pagination controls.

Name ↑	Role	Date
Alice A	Admin	2024-01-15
Bob B	Editor	2024-02-20
Carol C	Viewer	2024-03-10

Page 1 of 2

<div class="rounded-2xl border border-zinc-100 shadow-sm overflow-hidden"><table class="w-full text-sm"><thead class="bg-zinc-50"><tr><th class="px-4 py-3 text-left text-xs font-bold text-zinc-500 cursor-pointer">Name ↑</th></tr></thead></table><div class="flex justify-between px-4 py-3 border-t border-zinc-100 bg-zinc-50"><span class="text-xs text-zinc-500">Page 1 of 2</span><div class="flex gap-1"><button class="px-2.5 py-1 text-xs rounded border border-zinc-200">Prev</button><button class="px-2.5 py-1 text-xs rounded border border-zinc-200">Next</button></div></div></div>

⊟

Table with Row Actions

Tables

Edit/Delete action buttons per row.

Name	Owner	Status
Project Alpha	Alice	Active
Project Beta	Bob	Paused
Project Gamma	Carol	Active

<table class="w-full text-sm"><thead class="bg-zinc-50 border-b border-zinc-100"><tr><th class="px-4 py-3 text-left text-xs font-bold text-zinc-500 uppercase">Name</th><th class="px-4 py-3 text-left text-xs font-bold text-zinc-500 uppercase">Actions</th></tr></thead><tbody class="divide-y divide-zinc-100"><tr class="hover:bg-zinc-50"><td class="px-4 py-3 font-medium">Project Alpha</td><td class="px-4 py-3"><div class="flex gap-1.5"><button class="rounded px-2 py-1 text-xs font-semibold bg-blue-50 text-blue-600">Edit</button><button class="rounded px-2 py-1 text-xs font-semibold bg-red-50 text-red-600">Delete</button></div></td></tr></tbody></table>

⊟

Status Column Table

Tables

Member table with avatar, status dot, and progress bar.

Member	Status	Task	Progress
SK Sarah K	Online	UI Review	85%
ML Mark L	Away	Backend API	42%
NP Nina P	Busy	Data Pipeline	67%
TR Tom R	Offline	Testing	20%

<table class="w-full text-sm"><thead class="bg-zinc-50 border-b border-zinc-100"><tr><th class="px-4 py-3 text-left text-xs font-bold text-zinc-500 uppercase">Member</th><th class="px-4 py-3 text-left text-xs font-bold text-zinc-500 uppercase">Status</th></tr></thead><tbody class="divide-y divide-zinc-100"><tr><td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-7 h-7 rounded-full bg-indigo-100 flex items-center justify-center text-xs font-bold text-indigo-600">SK</div><span>Sarah K</span></div></td><td class="px-4 py-3"><span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Online</span></td></tr></tbody></table>

⊟

Selectable Table

Tables

Row checkboxes with select-all header checkbox.

<table class="w-full text-sm"><thead class="bg-zinc-50 border-b border-zinc-100"><tr><th class="px-4 py-3 w-10"><input type="checkbox" class="rounded"/></th><th class="px-4 py-3 text-left text-xs font-bold text-zinc-500 uppercase">Task</th></tr></thead><tbody class="divide-y divide-zinc-100"><tr class="hover:bg-zinc-50"><td class="px-4 py-3"><input type="checkbox" class="rounded"/></td><td class="px-4 py-3 font-medium">Homepage Redesign</td></tr></tbody></table>

⊟

Expandable Row Table

Tables

Click to expand row and reveal order item details.

	Order	Amount
	Order #1042	$1,250
	Order #1043	$380
	Order #1044	$2,100

<table class="w-full text-sm"><thead class="bg-zinc-50 border-b border-zinc-100"><tr><th class="px-4 py-3 w-8"></th><th class="px-4 py-3 text-left text-xs font-bold text-zinc-500 uppercase">Order</th></tr></thead><tbody><tr class="hover:bg-zinc-50 border-b border-zinc-100 cursor-pointer"><td class="px-4 py-3 text-zinc-400">▶</td><td class="px-4 py-3 font-medium">Order #1042</td></tr></tbody></table>

🔔

Success Alert

Alerts

Green dismissable success alert with icon.

Successfully saved!

Your changes have been saved and are now live.

<div class="flex items-start gap-3 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3"><svg class="text-emerald-600 mt-0.5 shrink-0" .../><div class="flex-1"><p class="text-sm font-semibold text-emerald-800">Successfully saved!</p><p class="text-xs text-emerald-700 mt-0.5">Your changes have been saved.</p></div><button class="text-emerald-400 hover:text-emerald-600">✕</button></div>

🔔

Alert Variants

Alerts

All 4 alert variants: success, warning, error, info.

Success

Operation completed.

Warning

Review before proceeding.

Error

Something went wrong.

Info

Here is some information.

<div class="space-y-2">
  <div class="flex items-start gap-3 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-emerald-800"><span>✓</span><div><p class="text-sm font-semibold">Success</p><p class="text-xs">Operation completed.</p></div></div>
  <div class="flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-amber-800"><span>⚠</span><div><p class="text-sm font-semibold">Warning</p><p class="text-xs">Review before proceeding.</p></div></div>
</div>

🔔

Alert Banner

Alerts

Full-width top banner with action button and dismiss.

New version available! Update to get the latest features.

Page content below banner

<div class="flex items-center gap-3 rounded-xl bg-indigo-600 px-4 py-3 text-white"><svg .../><p class="flex-1 text-sm font-medium">New version available! Update now.</p><button class="rounded-lg bg-white/20 px-3 py-1 text-xs font-bold hover:bg-white/30">Update</button><button class="text-white/60 hover:text-white">✕</button></div>

👤

Avatar Sizes

Avatars

4 avatar sizes with initials and gradient icon styles.

<div class="flex items-end gap-5">
  <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center text-[9px] font-bold text-indigo-600">AJ</div>
  <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-[10px] font-bold text-indigo-600">AJ</div>
  <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-xs font-bold text-indigo-600">AJ</div>
  <div class="w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center text-base font-bold text-indigo-600">AJ</div>
</div>

👤

Avatar Group

Avatars

Overlapping stack of 5 avatars with overflow count badge.

13 team members

<div class="flex -space-x-3">
  <div class="w-10 h-10 rounded-full bg-indigo-400 border-2 border-white flex items-center justify-center text-xs font-bold text-white">AJ</div>
  <div class="w-10 h-10 rounded-full bg-blue-400 border-2 border-white flex items-center justify-center text-xs font-bold text-white">BK</div>
  <div class="w-10 h-10 rounded-full bg-zinc-100 border-2 border-white flex items-center justify-center text-xs font-bold text-zinc-600">+8</div>
</div>

👤

Avatar with Status

Avatars

Avatars with online/away/busy/offline status dots.

Online

Away

Busy

Offline

<div class="relative inline-block">
  <div class="w-11 h-11 rounded-full bg-indigo-400 flex items-center justify-center text-sm font-bold text-white">AJ</div>
  <span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>

🏷️

Basic Badges

Badge

6 color pill badge variants.

NewActivePendingDangerPausedPro

<div class="flex flex-wrap gap-2">
  <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold bg-blue-100 text-blue-700">New</span>
  <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold bg-emerald-100 text-emerald-700">Active</span>
  <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold bg-amber-100 text-amber-700">Pending</span>
  <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold bg-red-100 text-red-700">Danger</span>
</div>

🏷️

Dot Badges

Badge

Notification count dots on icon buttons.

<div class="relative inline-block">
  <button class="w-10 h-10 rounded-xl bg-zinc-100 flex items-center justify-center text-zinc-600">🔔</button>
  <span class="absolute -top-1 -right-1 min-w-[18px] h-[18px] bg-red-500 text-white text-[9px] font-bold rounded-full flex items-center justify-center px-1">5</span>
</div>

🏷️

Outlined Badges

Badge

Bordered transparent outline badge variants.

DraftReviewApprovedRejectedPremiumBeta

<div class="flex flex-wrap gap-2">
  <span class="inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold border-zinc-300 text-zinc-600">Draft</span>
  <span class="inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold border-emerald-400 text-emerald-700">Approved</span>
  <span class="inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold border-red-400 text-red-700">Rejected</span>
</div>

›

Basic Breadcrumb

Breadcrumb

Home > Products > Details breadcrumb with chevrons.

<nav class="flex items-center gap-1 text-sm">
  <span class="text-zinc-400 hover:text-zinc-600 cursor-pointer">Home</span>
  <svg .../> 
  <span class="text-zinc-400 hover:text-zinc-600 cursor-pointer">Products</span>
  <svg .../> 
  <span class="font-semibold text-zinc-800">MacBook Pro</span>
</nav>

›

Breadcrumb with Icons

Breadcrumb

Folder icon breadcrumbs per navigation segment.

<nav class="flex items-center gap-1 text-sm">
  <span class="flex items-center gap-1 text-zinc-400">🏠 Home</span>
  <svg .../> 
  <span class="flex items-center gap-1 text-zinc-400">📁 Documents</span>
  <svg .../> 
  <span class="flex items-center gap-1 font-semibold text-zinc-800">📄 Report.pdf</span>
</nav>

›

Pill Breadcrumb

Breadcrumb

Rounded pill style navigation breadcrumbs.

<nav class="flex items-center gap-1.5">
  <span class="rounded-full px-3 py-1 text-xs font-semibold cursor-pointer bg-zinc-100 text-zinc-600">Home</span>
  <svg .../> 
  <span class="rounded-full px-3 py-1 text-xs font-semibold bg-indigo-600 text-white">Security</span>
</nav>

⬡

Ghost Buttons

Button Variants

Outlined ghost buttons in multiple colors.

<div class="flex flex-wrap gap-2">
  <button class="rounded-lg border border-zinc-300 px-4 py-2 text-sm font-semibold text-zinc-700 bg-transparent hover:bg-zinc-50">Default</button>
  <button class="rounded-lg border border-indigo-400 px-4 py-2 text-sm font-semibold text-indigo-700 bg-transparent hover:bg-indigo-50">Primary</button>
  <button class="rounded-lg border border-emerald-400 px-4 py-2 text-sm font-semibold text-emerald-700 bg-transparent hover:bg-emerald-50">Success</button>
</div>

⬡

Icon Buttons

Button Variants

Square icon-only buttons plus icon+label combos.

<div class="space-y-2">
  <div class="flex gap-2">
    <button class="w-10 h-10 rounded-xl bg-zinc-100 flex items-center justify-center text-zinc-600 hover:bg-indigo-100 hover:text-indigo-600">🔔</button>
  </div>
  <div class="flex gap-2">
    <button class="flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-semibold bg-indigo-600 text-white hover:bg-indigo-700">🔔 Notify</button>
  </div>
</div>

⬡

Gradient Buttons

Button Variants

Gradient background buttons in violet, ocean, emerald, sunset.

<div class="flex flex-wrap gap-3">
  <button class="rounded-lg px-5 py-2.5 text-sm font-bold text-white shadow-md hover:opacity-90" style="background:linear-gradient(135deg,#6366f1,#8b5cf6)">Violet Gradient</button>
  <button class="rounded-lg px-5 py-2.5 text-sm font-bold text-white shadow-md hover:opacity-90" style="background:linear-gradient(135deg,#06b6d4,#3b82f6)">Ocean Gradient</button>
</div>

⊞

Button Group

Button Groups

Joined border buttons in a single group.

<div class="inline-flex rounded-lg border border-zinc-200 overflow-hidden">
  <button class="px-4 py-2 text-sm font-semibold text-zinc-700 hover:bg-zinc-100">Left</button>
  <button class="px-4 py-2 text-sm font-semibold text-zinc-700 hover:bg-zinc-100 border-l border-zinc-200">Center</button>
  <button class="px-4 py-2 text-sm font-semibold text-zinc-700 hover:bg-zinc-100 border-l border-zinc-200">Right</button>
</div>

⊞

Radio Button Group

Button Groups

Single-select pill toggle group.

<div class="inline-flex p-1 rounded-xl bg-zinc-100 gap-0.5">
  <button class="px-4 py-1.5 text-sm font-semibold rounded-lg bg-white shadow text-zinc-900">Grid</button>
  <button class="px-4 py-1.5 text-sm font-semibold rounded-lg text-zinc-500 hover:text-zinc-700">List</button>
  <button class="px-4 py-1.5 text-sm font-semibold rounded-lg text-zinc-500 hover:text-zinc-700">Cards</button>
</div>

⊞

Icon Button Group

Button Groups

Toolbar-style icon group with toggle state.

<div class="inline-flex rounded-lg border border-zinc-200 overflow-hidden">
  <button class="px-4 py-2 text-sm font-bold text-zinc-700 hover:bg-zinc-100">B</button>
  <button class="px-4 py-2 text-sm italic text-zinc-700 hover:bg-zinc-100 border-l border-zinc-200">I</button>
  <button class="px-4 py-2 text-sm underline text-zinc-700 hover:bg-zinc-100 border-l border-zinc-200">U</button>
</div>

▭

Profile Card

Cards

User profile card with avatar, stats, and follow button.

Alice Johnson

Senior Designer at Acme Inc.

142

Posts

8.2K

Followers

312

Following

<div class="w-56 bg-white rounded-2xl border border-zinc-100 shadow-sm overflow-hidden">
  <div class="h-16 bg-gradient-to-r from-indigo-500 to-violet-500"></div>
  <div class="px-4 pb-4">
    <div class="w-14 h-14 rounded-full bg-indigo-400 border-4 border-white -mt-7 flex items-center justify-center text-white font-bold text-lg">AJ</div>
    <p class="mt-2 font-bold">Alice Johnson</p>
    <p class="text-xs text-zinc-500">Senior Designer</p>
    <button class="mt-3 w-full rounded-lg py-2 text-xs font-bold bg-indigo-600 text-white">Follow</button>
  </div>
</div>

▭

Stat Cards Row

Cards

3 mini KPI stat cards with icon, value, and change.

💰

$84,200

Total Revenue

+12.5%

👥

24,816

Active Users

+8.1%

📉

2.4%

Churn Rate

-0.6%

<div class="flex gap-3">
  <div class="bg-white rounded-2xl border border-zinc-100 shadow-sm p-4 min-w-[140px]">
    <p class="text-lg mb-1">💰</p>
    <p class="text-xl font-bold">$84,200</p>
    <p class="text-xs text-zinc-500 mt-0.5">Total Revenue</p>
    <span class="text-xs font-semibold text-emerald-600">+12.5%</span>
  </div>
</div>

▭

Pricing Card

Cards

Pro plan pricing card with features list and CTA.

Pro Plan

$49/mo

Popular

Unlimited projects

Priority support

Advanced analytics

Custom domains

Team collaboration

<div class="w-56 bg-white rounded-2xl border-2 border-indigo-500 shadow-lg p-5">
  <p class="text-xs font-bold text-indigo-600 uppercase">Pro Plan</p>
  <p class="text-3xl font-bold mt-1">$49<span class="text-base font-normal text-zinc-400">/mo</span></p>
  <div class="mt-4 space-y-2">
    <div class="flex items-center gap-2"><span class="text-emerald-500">✓</span><span class="text-xs text-zinc-600">Unlimited projects</span></div>
  </div>
  <button class="mt-4 w-full rounded-xl py-2.5 text-sm font-bold bg-indigo-600 text-white">Get Started</button>
</div>

⟳

Basic Carousel

Carousel

Colored slide panels with prev/next buttons and dot indicators.

Slide 1

Welcome to our platform

<div class="relative overflow-hidden rounded-2xl">
  <div class="bg-indigo-500 h-36 flex flex-col items-center justify-center text-white">
    <p class="text-xl font-bold">Slide 1</p>
    <p class="text-sm opacity-80">Welcome to our platform</p>
  </div>
  <button class="absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white/80 flex items-center justify-center shadow">◀</button>
  <button class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white/80 flex items-center justify-center shadow">▶</button>
  <div class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5"><span class="w-2 h-2 rounded-full bg-white"></span></div>
</div>

⟳

Card Carousel

Carousel

3 testimonial cards with center card highlighted.

"Amazing product! Saved us hours."

Sarah K

Designer

"Best tool in our workflow."

Mark L

Developer

"Highly recommend to every team."

Nina P

Manager

<div class="flex gap-2 items-center">
  <button class="w-7 h-7 rounded-full bg-white border border-zinc-200 flex items-center justify-center shadow">◀</button>
  <div class="flex gap-2 overflow-hidden">
    <div class="flex-shrink-0 w-48 bg-white rounded-2xl border border-indigo-300 shadow-sm p-4 scale-105">
      <p class="text-xs italic">"Best tool in our workflow."</p>
      <p class="text-xs font-bold mt-2">Mark L · Developer</p>
    </div>
  </div>
  <button class="w-7 h-7 rounded-full bg-white border border-zinc-200 flex items-center justify-center shadow">▶</button>
</div>

⟳

Image Carousel

Carousel

Thumbnail strip with main display for image browsing.

Mountain View

<div class="max-w-sm">
  <div class="h-32 rounded-2xl bg-gradient-to-br from-indigo-400 to-violet-500 mb-3 flex items-end p-3">
    <span class="text-white font-bold text-sm bg-black/30 rounded-lg px-2 py-1">Mountain View</span>
  </div>
  <div class="flex gap-2">
    <button class="flex-1 h-12 rounded-lg bg-gradient-to-br from-indigo-400 to-violet-500 ring-2 ring-offset-1 ring-indigo-500"/>
    <button class="flex-1 h-12 rounded-lg bg-gradient-to-br from-cyan-400 to-blue-500 opacity-60"/>
  </div>
</div>

▾

Basic Dropdown

Dropdowns

Simple menu list that toggles open/closed.

<div class="relative w-48">
  <button class="w-full flex items-center justify-between rounded-xl border border-zinc-200 px-4 py-2.5 text-sm text-zinc-700 bg-white shadow-sm">
    <span>Select option</span><span>▾</span>
  </button>
  <div class="absolute top-full mt-1.5 w-full rounded-xl border border-zinc-100 bg-white shadow-lg z-10 overflow-hidden">
    <button class="w-full px-4 py-2.5 text-left text-sm text-zinc-700 hover:bg-zinc-50">Profile</button>
    <button class="w-full px-4 py-2.5 text-left text-sm text-zinc-700 hover:bg-zinc-50">Settings</button>
  </div>
</div>

▾

Searchable Dropdown

Dropdowns

Dropdown with text filter input and results list.

<div class="relative w-52">
  <button class="w-full flex items-center justify-between rounded-xl border border-zinc-200 px-4 py-2.5 text-sm bg-white shadow-sm">Choose framework ▾</button>
  <div class="absolute top-full mt-1.5 w-full rounded-xl border border-zinc-100 bg-white shadow-lg z-10">
    <div class="p-2 border-b border-zinc-100"><div class="flex items-center gap-2 rounded-lg bg-zinc-50 px-3 py-1.5"><span>🔍</span><input class="flex-1 text-sm bg-transparent focus:outline-none" placeholder="Search..."/></div></div>
    <button class="w-full px-4 py-2 text-left text-sm text-zinc-700 hover:bg-zinc-50">React</button>
  </div>
</div>

▾

Multi-Select Dropdown

Dropdowns

Dropdown with checkboxes for multi-selection.

<div class="relative w-56">
  <button class="w-full flex items-center justify-between rounded-xl border border-zinc-200 px-4 py-2.5 text-sm bg-white shadow-sm">2 selected ▾</button>
  <div class="absolute top-full mt-1.5 w-full rounded-xl border border-zinc-100 bg-white shadow-lg z-10">
    <label class="flex items-center gap-3 px-4 py-2.5 hover:bg-zinc-50 cursor-pointer"><input type="checkbox" checked class="rounded text-indigo-600"/><span class="text-sm">Design</span></label>
    <label class="flex items-center gap-3 px-4 py-2.5 hover:bg-zinc-50 cursor-pointer"><input type="checkbox" class="rounded text-indigo-600"/><span class="text-sm">Engineering</span></label>
  </div>
</div>

🖼️

Image Grid

Images

Masonry-style 2×3 colored placeholder grid.

<div class="columns-3 gap-2">
  <div class="bg-gradient-to-br from-indigo-400 to-violet-500 h-20 rounded-xl mb-2"/>
  <div class="bg-gradient-to-br from-cyan-400 to-blue-500 h-32 rounded-xl mb-2"/>
  <div class="bg-gradient-to-br from-amber-400 to-orange-500 h-20 rounded-xl mb-2"/>
</div>

🖼️

Image with Caption

Images

Single image with gradient overlay caption.

Northern Lights, Iceland

Aurora Borealis over Reykjavik · Feb 2024

Photo by @aurora_lens

<div class="rounded-2xl overflow-hidden border border-zinc-100 shadow-sm">
  <div class="relative">
    <div class="h-40 bg-gradient-to-br from-indigo-400 via-violet-500 to-purple-600"/>
    <div class="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/70 to-transparent p-4">
      <p class="text-white font-bold text-sm">Northern Lights, Iceland</p>
      <p class="text-white/70 text-xs mt-0.5">Aurora Borealis · Feb 2024</p>
    </div>
  </div>
</div>

🖼️

Gallery with Lightbox

Images

Thumbnail grid with click-to-expand lightbox modal.

<div class="grid grid-cols-2 gap-2">
  <div class="bg-gradient-to-br from-indigo-400 to-violet-500 h-20 rounded-xl cursor-pointer hover:opacity-90"/>
  <div class="bg-gradient-to-br from-cyan-400 to-blue-500 h-20 rounded-xl cursor-pointer hover:opacity-90"/>
</div>

🔗

Link Styles

Links

Underline, dashed, colored, and external link styles.

Underline link Dashed underline Colored link External link ↗

<div class="flex flex-col gap-2">
  <a href="#" class="text-sm text-blue-600 underline underline-offset-2 hover:text-blue-800">Underline link</a>
  <a href="#" class="text-sm text-indigo-600 decoration-dashed underline underline-offset-2 hover:text-indigo-800">Dashed underline</a>
  <a href="#" class="text-sm font-semibold text-emerald-600 hover:text-emerald-800">Colored link</a>
  <a href="#" class="text-sm text-zinc-700 hover:text-zinc-900 flex items-center gap-1">External link ↗</a>
</div>

🔗

Navigation Links

Links

Horizontal nav link bar with active state.

<nav class="flex gap-1 p-1 rounded-xl bg-zinc-50 border border-zinc-200">
  <button class="px-3 py-1.5 text-sm font-medium rounded-lg bg-white text-zinc-900 shadow-sm">Home</button>
  <button class="px-3 py-1.5 text-sm font-medium rounded-lg text-zinc-500 hover:text-zinc-700">About</button>
  <button class="px-3 py-1.5 text-sm font-medium rounded-lg text-zinc-500 hover:text-zinc-700">Services</button>
</nav>

🔗

CTA Links

Links

Arrow links, icon links, and card link styles.

Learn more Send email

Read the docs →

Full API reference and guides

<div class="space-y-3">
  <a href="#" class="flex items-center gap-2 text-sm font-semibold text-indigo-600 hover:text-indigo-800 group">Learn more <span class="group-hover:translate-x-0.5 transition-transform">→</span></a>
  <a href="#" class="flex items-center gap-2 text-sm font-semibold text-zinc-700 hover:text-zinc-900">✉ Send email</a>
  <div class="rounded-xl border border-zinc-100 p-3 hover:border-indigo-200 hover:bg-indigo-50/30 cursor-pointer group">
    <div class="flex items-center justify-between"><div><p class="text-sm font-semibold group-hover:text-indigo-700">Read the docs →</p><p class="text-xs text-zinc-500">Full API reference</p></div></div>
  </div>
</div>

≡

Basic List

List

Unordered and ordered list styles side by side.

Unordered

Design system
Component library
Documentation
Testing suite

Ordered

1Research
2Design
3Develop
4Deploy

<div class="flex gap-8">
  <ul class="space-y-1.5 text-sm text-zinc-700">
    <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-zinc-400"/>Design system</li>
    <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-zinc-400"/>Component library</li>
  </ul>
  <ol class="space-y-1.5 text-sm text-zinc-700">
    <li class="flex items-center gap-2"><span class="w-5 h-5 rounded-full bg-indigo-100 text-indigo-700 text-[10px] font-bold flex items-center justify-center">1</span>Research</li>
    <li class="flex items-center gap-2"><span class="w-5 h-5 rounded-full bg-indigo-100 text-indigo-700 text-[10px] font-bold flex items-center justify-center">2</span>Design</li>
  </ol>
</div>

≡

Icon List

List

Feature list with check/x icons per item and description.

Unlimited projects
No cap on project count
Priority support
24/7 dedicated help
Advanced analytics
Deep insights & reports
Custom domains
Available on Enterprise

<ul class="space-y-3">
  <li class="flex items-start gap-3"><div class="w-5 h-5 rounded-full bg-zinc-50 border border-zinc-200 flex items-center justify-center shrink-0"><span class="text-emerald-600 text-xs">✓</span></div><div><p class="text-sm font-medium">Unlimited projects</p><p class="text-xs text-zinc-400">No cap on project count</p></div></li>
</ul>

≡

List Group

List

Bordered list group with badges and secondary text.

Design Team

8 members

Active

Engineering

24 members

Active

Marketing

6 members

Paused

Operations

12 members

Active

<div class="border border-zinc-200 rounded-xl overflow-hidden divide-y divide-zinc-100">
  <div class="flex items-center justify-between px-4 py-3 hover:bg-zinc-50">
    <div><p class="text-sm font-semibold">Design Team</p><p class="text-xs text-zinc-400">8 members</p></div>
    <span class="rounded-full px-2 py-0.5 text-[10px] font-bold bg-emerald-100 text-emerald-700">Active</span>
  </div>
</div>

🪟

Confirm Dialog

Modals

Delete confirmation dialog with cancel/confirm buttons.

<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="bg-white rounded-2xl shadow-xl p-5 w-64">
    <div class="flex items-center gap-3 mb-3"><div class="w-9 h-9 rounded-full bg-red-100 flex items-center justify-center">✕</div><div><p class="text-sm font-bold">Delete item?</p><p class="text-xs text-zinc-500">This cannot be undone.</p></div></div>
    <div class="flex gap-2 mt-4"><button class="flex-1 rounded-lg border border-zinc-200 py-2 text-sm font-semibold text-zinc-700">Cancel</button><button class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-bold text-white">Delete</button></div>
  </div>
</div>

🪟

Side Drawer

Modals

Slide-in right panel drawer modal.

Settings

Profile

Notifications

Security

Billing

<div class="fixed inset-y-0 right-0 w-72 bg-white shadow-2xl border-l border-zinc-100">
  <div class="flex items-center justify-between px-4 py-3 border-b border-zinc-100"><p class="font-bold text-sm">Settings</p><button>✕</button></div>
  <div class="p-4 space-y-3"><a class="flex items-center gap-2 text-sm text-zinc-700 hover:text-indigo-600">▶ Profile</a></div>
</div>

🪟

Form Modal

Modals

Modal dialog with form fields for creating a project.

<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="bg-white rounded-2xl shadow-xl p-5 w-72">
    <div class="flex items-center justify-between mb-4"><p class="font-bold text-sm">Create project</p><button>✕</button></div>
    <div class="space-y-3"><input class="w-full rounded-lg border border-zinc-200 px-3 py-2 text-sm" placeholder="Project name"/><textarea class="w-full rounded-lg border border-zinc-200 px-3 py-2 text-sm h-16 resize-none" placeholder="Description"/><button class="w-full rounded-lg bg-indigo-600 py-2 text-sm font-bold text-white">Create</button></div>
  </div>
</div>

🔔

Toast Notifications

Notifications

Stacked dismissable toast notifications.

Changes saved successfully!

Failed to upload file.

New message from Alice.

<div class="space-y-2">
  <div class="flex items-center gap-3 rounded-xl bg-white shadow-lg border border-zinc-100 px-4 py-3"><span class="text-emerald-500">✓</span><p class="flex-1 text-sm text-zinc-700">Changes saved successfully!</p><button class="text-zinc-300">✕</button></div>
  <div class="flex items-center gap-3 rounded-xl bg-white shadow-lg border border-zinc-100 px-4 py-3"><span class="text-red-500">✕</span><p class="flex-1 text-sm text-zinc-700">Failed to upload file.</p><button class="text-zinc-300">✕</button></div>
</div>

🔔

Notification Banner

Notifications

Top-of-page announcement strip notifications.

🎉 New features released! See what's new →

⚠️ Scheduled maintenance on Sunday at 3AM UTC.

✅ Your account has been verified successfully.

<div class="space-y-2">
  <div class="bg-indigo-600 rounded-xl px-4 py-2.5 flex items-center justify-between"><p class="text-xs text-white font-medium">🎉 New features released!</p><button class="ml-3 text-white/60">✕</button></div>
  <div class="bg-amber-500 rounded-xl px-4 py-2.5 flex items-center justify-between"><p class="text-xs text-white font-medium">⚠️ Scheduled maintenance Sunday.</p><button class="ml-3 text-white/60">✕</button></div>
</div>

🔔

Notification Feed

Notifications

List of notification items with avatars and unread state.

Notifications

2 new

Alice commented on your post

2m ago

Bob sent you a friend request

15m ago

Carol liked your photo

1h ago

Dave mentioned you in a note

3h ago

<div class="border border-zinc-100 rounded-2xl overflow-hidden shadow-sm">
  <div class="px-4 py-3 border-b border-zinc-100 flex items-center justify-between"><p class="text-sm font-bold">Notifications</p><span class="text-xs font-bold bg-indigo-100 text-indigo-700 rounded-full px-2 py-0.5">2 new</span></div>
  <div class="divide-y divide-zinc-50">
    <div class="flex items-start gap-3 px-4 py-3 bg-indigo-50/40"><div class="w-8 h-8 rounded-full bg-indigo-500 text-white flex items-center justify-center text-xs font-bold">AJ</div><div><p class="text-xs text-zinc-700">Alice commented on your post</p><p class="text-[10px] text-zinc-400">2m ago</p></div><span class="w-2 h-2 rounded-full bg-indigo-500 mt-1 ml-auto"/></div>
  </div>
</div>

⟨⟩

Basic Pagination

Pagination

Prev/next with page number buttons.

<div class="flex items-center gap-1">
  <button class="px-3 py-1.5 text-sm rounded-lg border border-zinc-200 text-zinc-600 hover:bg-zinc-50">Prev</button>
  <button class="w-9 h-9 rounded-lg text-sm font-semibold bg-indigo-600 text-white">3</button>
  <button class="w-9 h-9 rounded-lg text-sm font-semibold border border-zinc-200 text-zinc-600 hover:bg-zinc-50">4</button>
  <button class="px-3 py-1.5 text-sm rounded-lg border border-zinc-200 text-zinc-600 hover:bg-zinc-50">Next</button>
</div>

⟨⟩

Simple Pagination

Pagination

Just Prev / Page X of N / Next.

Page 1 of 12

<div class="flex items-center gap-4">
  <button class="flex items-center gap-1 px-4 py-2 text-sm font-semibold rounded-xl border border-zinc-200 text-zinc-700 hover:bg-zinc-50">◀ Prev</button>
  <span class="text-sm text-zinc-500">Page <strong class="text-zinc-800">3</strong> of 12</span>
  <button class="flex items-center gap-1 px-4 py-2 text-sm font-semibold rounded-xl border border-zinc-200 text-zinc-700 hover:bg-zinc-50">Next ▶</button>
</div>

⟨⟩

Dot Pagination

Pagination

Dot/pill indicators for carousel and slide navigation.

Slide 1

<div class="flex items-center gap-2">
  <button class="w-6 h-6 rounded-full bg-zinc-100 flex items-center justify-center">◀</button>
  <button class="rounded-full w-6 h-2.5 bg-indigo-600"/>
  <button class="rounded-full w-2.5 h-2.5 bg-zinc-200"/>
  <button class="rounded-full w-2.5 h-2.5 bg-zinc-200"/>
  <button class="w-6 h-6 rounded-full bg-zinc-100 flex items-center justify-center">▶</button>
</div>

💬

Basic Popover

Popovers

Click to show small info card popover.

<div class="relative inline-block">
  <button class="rounded-xl bg-zinc-800 px-4 py-2 text-sm font-semibold text-white">Info</button>
  <div class="absolute left-full ml-2 top-0 w-52 bg-white rounded-xl border border-zinc-100 shadow-lg p-3 z-10">
    <div class="flex items-start gap-2"><span class="text-blue-500">ℹ</span><div><p class="text-xs font-bold mb-1">What is this?</p><p class="text-xs text-zinc-500">A basic popover with info content.</p></div></div>
  </div>
</div>

💬

Rich Popover

Popovers

User card popover with avatar, status, and action buttons.

<div class="w-64 bg-white rounded-2xl border border-zinc-100 shadow-xl p-4">
  <div class="flex items-center gap-3 mb-3">
    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-400 to-violet-500 flex items-center justify-center text-white font-bold">AJ</div>
    <div><p class="font-bold">Alice Johnson</p><p class="text-xs text-zinc-500">alice@acme.com</p><p class="text-xs text-emerald-600 font-semibold">● Online</p></div>
  </div>
  <div class="flex gap-2"><button class="flex-1 rounded-lg bg-indigo-600 py-1.5 text-xs font-bold text-white">Message</button><button class="flex-1 rounded-lg border border-zinc-200 py-1.5 text-xs font-semibold">Close</button></div>
</div>

💬

Popover Menu

Popovers

Right-click context menu style popover.

<div class="w-44 bg-white rounded-xl border border-zinc-100 shadow-lg overflow-hidden">
  <button class="w-full flex items-center gap-3 px-3 py-2.5 text-sm text-zinc-700 hover:bg-zinc-50">📋 Copy</button>
  <button class="w-full flex items-center gap-3 px-3 py-2.5 text-sm text-zinc-700 hover:bg-zinc-50">🔍 Search</button>
  <button class="w-full flex items-center gap-3 px-3 py-2.5 text-sm text-red-600 hover:bg-zinc-50">✕ Delete</button>
</div>

▬

Progress Bars

4 progress bars: default, success, warning, danger.

Default72%

Success88%

Warning45%

Danger25%

<div class="space-y-3">
  <div><div class="flex justify-between text-xs mb-1"><span>Default</span><span>72%</span></div><div class="h-2.5 w-full rounded-full bg-zinc-100"><div class="h-full rounded-full bg-indigo-500 w-[72%]"/></div></div>
  <div><div class="flex justify-between text-xs mb-1"><span>Success</span><span>88%</span></div><div class="h-2.5 w-full rounded-full bg-zinc-100"><div class="h-full rounded-full bg-emerald-500 w-[88%]"/></div></div>
</div>

▬

Multi-Step Progress

Progress Bars

Step-by-step progress with clickable stages.

Research

Design

Develop

Review

Launch

<div class="flex items-center">
  <div class="flex flex-col items-center">
    <div class="w-7 h-7 rounded-full border-2 bg-indigo-600 border-indigo-600 text-white flex items-center justify-center text-xs font-bold">✓</div>
    <span class="text-[9px] text-zinc-500 mt-1">Research</span>
  </div>
  <div class="flex-1 h-0.5 mx-1 bg-indigo-600"/>
  <div class="flex flex-col items-center">
    <div class="w-7 h-7 rounded-full border-2 border-indigo-600 text-indigo-600 bg-white flex items-center justify-center text-xs font-bold">2</div>
    <span class="text-[9px] text-zinc-500 mt-1">Design</span>
  </div>
</div>

▬

Circular Progress

Progress Bars

3 SVG circle progress rings for CPU, RAM, Disk.

CPU

RAM

Disk

<div class="flex gap-6">
  <div class="flex flex-col items-center gap-1">
    <svg width="72" height="72" viewBox="0 0 72 72">
      <circle cx="36" cy="36" r="28" fill="none" stroke="#f4f4f5" stroke-width="8"/>
      <circle cx="36" cy="36" r="28" fill="none" stroke="#6366f1" stroke-width="8" stroke-dasharray="127 176" stroke-linecap="round" transform="rotate(-90 36 36)"/>
      <text x="36" y="40" text-anchor="middle" font-size="11" font-weight="bold" fill="#18181b">72%</text>
    </svg>
    <span class="text-xs text-zinc-500">CPU</span>
  </div>
</div>

🎀

Corner Ribbon

Ribbons

Top-right corner NEW/SALE ribbon on cards.

NEW

Pro Card

SALE

Starter Card

HOT

Business Card

<div class="relative w-32 h-28 bg-white rounded-xl border border-zinc-100 shadow-sm overflow-hidden flex items-center justify-center">
  <div class="absolute top-0 right-0 overflow-hidden w-20 h-20">
    <div class="bg-indigo-600 text-white text-[9px] font-bold text-center py-0.5 transform rotate-45 translate-x-4 translate-y-3 w-20">NEW</div>
  </div>
  <span class="text-xs font-semibold text-zinc-700">Pro Card</span>
</div>

🎀

Banner Ribbon

Ribbons

Horizontal ribbon across card top.

🎉 Limited Time Offer

Card content goes here

⚡ Flash Sale — 50% Off

Card content goes here

✨ New Release

Card content goes here

<div class="bg-white rounded-xl border border-zinc-100 shadow-sm overflow-hidden">
  <div class="bg-indigo-600 px-4 py-1.5 text-xs font-bold text-white text-center">🎉 Limited Time Offer</div>
  <div class="px-4 py-3 text-xs text-zinc-500">Card content goes here</div>
</div>

🎀

Folded Ribbon Badge

Ribbons

CSS folded ribbon label on card.

Card

Featured

Card

Popular

Card

New

<div class="relative">
  <div class="w-28 h-20 bg-white rounded-xl border border-zinc-100 shadow-sm flex items-center justify-center text-xs text-zinc-500">Card</div>
  <div class="absolute -left-1 top-3 bg-indigo-600 text-white text-[10px] font-bold px-3 py-0.5 rounded-r-full shadow-indigo-200 shadow">Featured</div>
</div>

⟳

Spinner Variants

Spinners

4 spinner styles: border, dots, pulse, wave.

Border

Dots

Pulse

Wave

<div class="flex gap-8 items-center flex-wrap">
  <div class="flex flex-col items-center gap-2"><div class="w-8 h-8 rounded-full border-4 border-zinc-200 border-t-indigo-600 animate-spin"/><span class="text-[10px] text-zinc-400">Border</span></div>
  <div class="flex flex-col items-center gap-2"><div class="flex gap-1"><div class="w-2 h-2 rounded-full bg-indigo-600 animate-bounce"/><div class="w-2 h-2 rounded-full bg-indigo-600 animate-bounce" style="animation-delay:.15s"/></div><span class="text-[10px] text-zinc-400">Dots</span></div>
</div>

⟳

Labeled Spinners

Spinners

Spinners with loading text in different sizes.

Processing

Please wait...

<div class="space-y-4">
  <div class="flex items-center gap-3"><div class="w-4 h-4 rounded-full border-4 border-zinc-200 border-t-indigo-600 animate-spin"/><span class="text-sm font-medium text-zinc-600">Loading...</span></div>
  <div class="flex items-center gap-3"><div class="w-6 h-6 rounded-full border-4 border-zinc-200 border-t-indigo-600 animate-spin"/><span class="text-base font-medium text-zinc-600">Processing</span></div>
</div>

⟳

Loading Overlay

Spinners

Full-card dimmed overlay with centered spinner.

Dashboard

Content loaded below

<div class="relative w-64 h-36 bg-white rounded-2xl border border-zinc-100 shadow-sm overflow-hidden">
  <div class="p-4"><p class="text-sm font-bold">Dashboard</p></div>
  <div class="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center rounded-2xl">
    <div class="flex flex-col items-center gap-2"><div class="w-8 h-8 rounded-full border-4 border-zinc-200 border-t-indigo-600 animate-spin"/><span class="text-xs text-zinc-500">Loading...</span></div>
  </div>
</div>

⊟

Pill Tabs

Tabs

Rounded pill active tab style.

Overview content

<div class="flex gap-1 p-1 bg-zinc-100 rounded-xl mb-4">
  <button class="flex-1 py-1.5 text-xs font-semibold rounded-lg bg-white text-zinc-900 shadow">Overview</button>
  <button class="flex-1 py-1.5 text-xs font-semibold rounded-lg text-zinc-500 hover:text-zinc-700">Analytics</button>
  <button class="flex-1 py-1.5 text-xs font-semibold rounded-lg text-zinc-500 hover:text-zinc-700">Reports</button>
</div>

⊟

Vertical Tabs

Tabs

Left-side tab list with content panel.

Manage your profile info

<div class="flex gap-3 h-40">
  <div class="flex flex-col gap-0.5 w-32">
    <button class="flex items-center gap-2 rounded-lg px-3 py-2 text-xs font-semibold text-left bg-indigo-50 text-indigo-700">👤 Profile</button>
    <button class="flex items-center gap-2 rounded-lg px-3 py-2 text-xs font-medium text-left text-zinc-500 hover:bg-zinc-50">🔒 Security</button>
  </div>
  <div class="flex-1 rounded-xl bg-zinc-50 border border-zinc-100 p-3 text-xs text-zinc-600">Manage your profile info</div>
</div>

⊟

Icon Tabs

Tabs

Tabs with icons above labels and border-bottom active indicator.

Mail content

<div class="flex border-b border-zinc-200 mb-4">
  <button class="flex-1 flex flex-col items-center gap-1 py-3 text-[10px] font-semibold border-b-2 border-indigo-600 text-indigo-600">✉ Mail</button>
  <button class="flex-1 flex flex-col items-center gap-1 py-3 text-[10px] font-semibold border-b-2 border-transparent text-zinc-400 hover:text-zinc-600">🔔 Alerts</button>
  <button class="flex-1 flex flex-col items-center gap-1 py-3 text-[10px] font-semibold border-b-2 border-transparent text-zinc-400 hover:text-zinc-600">👤 Profile</button>
</div>

💡

Tooltip Variants

Tooltips

4 directional tooltips that appear on hover.

Tooltip Top

Tooltip Right

Tooltip Bottom

Tooltip Left

<div class="relative group inline-block">
  <button class="rounded-lg border border-zinc-200 px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-50">Hover me</button>
  <div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs font-semibold rounded-lg px-2.5 py-1.5 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">Tooltip Top</div>
</div>

💡

Rich Tooltip

Tooltips

Tooltip with title, description, and link on hover.

<div class="relative inline-block group">
  <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white">ℹ Learn more</button>
  <div class="absolute bottom-full mb-3 left-1/2 -translate-x-1/2 w-56 bg-white rounded-xl border border-zinc-100 shadow-xl p-3 z-20 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
    <p class="text-xs font-bold text-zinc-900 mb-1">Rich Tooltip</p>
    <p class="text-xs text-zinc-500 mb-2">Tooltips can include titles and descriptions.</p>
    <a href="#" class="text-xs font-semibold text-indigo-600">Read docs →</a>
  </div>
</div>

💡

Dark Tooltips

Tooltips

Dark rounded tooltips with arrow pointer.

Copy to clipboard

Manage settings

Remove item

<div class="relative group flex flex-col items-center">
  <button class="w-10 h-10 rounded-xl bg-zinc-100 flex items-center justify-center text-zinc-600 hover:bg-zinc-200">📋</button>
  <div class="absolute -top-9 left-1/2 -translate-x-1/2 bg-zinc-900 text-white text-[10px] font-semibold rounded-lg px-2.5 py-1.5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-10">
    Copy to clipboard
    <div class="absolute left-1/2 -translate-x-1/2 -bottom-1 w-2 h-2 bg-zinc-900 rotate-45"/>
  </div>
</div>

▶

Video Player UI

Videos

Custom video player with play/pause, seek, and volume controls.

1:24 / 4:02

<div class="bg-zinc-900 rounded-2xl overflow-hidden border border-zinc-700">
  <div class="h-32 bg-zinc-800 flex items-center justify-center">
    <button class="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center shadow-lg">▶</button>
  </div>
  <div class="px-3 py-2.5 bg-zinc-800">
    <div class="flex items-center gap-2"><button class="text-white">▶</button><div class="flex-1 h-1 bg-zinc-600 rounded-full"><div class="h-full bg-indigo-500 rounded-full w-[35%]"/></div><span class="text-[10px] text-zinc-400">1:24/4:02</span></div>
  </div>
</div>

▶

Video Card

Videos

Thumbnail with title, duration, and view count.

12:34

Getting Started with React Hooks

DevTube · 24K views

58:21

Build a Full-Stack App in 1 Hour

CodeWorld · 84K views

<div class="flex gap-3">
  <div class="flex-1 bg-white rounded-2xl border border-zinc-100 shadow-sm overflow-hidden hover:shadow-md transition">
    <div class="bg-gradient-to-br from-indigo-500 to-violet-600 h-20 relative flex items-end p-2">
      <span class="bg-black/70 text-white text-[10px] font-bold rounded px-1.5 py-0.5 ml-auto">12:34</span>
    </div>
    <div class="p-3"><p class="text-xs font-bold text-zinc-800">Getting Started with React Hooks</p><p class="text-[10px] text-zinc-500 mt-1">DevTube · 24K views</p></div>
  </div>
</div>

▶

Video Grid

Videos

4 video thumbnails in a 2×2 responsive grid.

5:24

React Tips

12:08

CSS Grid

8:42

JS Async

18:55

Next.js SSR

<div class="grid grid-cols-2 gap-2">
  <div class="rounded-xl overflow-hidden border border-zinc-100 hover:shadow-md transition cursor-pointer">
    <div class="bg-gradient-to-br from-indigo-500 to-violet-600 h-16 relative"><span class="absolute bottom-1.5 right-1.5 bg-black/70 text-white text-[9px] font-bold rounded px-1 py-0.5">5:24</span></div>
    <div class="px-2 py-1.5 bg-white"><p class="text-[10px] font-semibold text-zinc-800 truncate">React Tips</p></div>
  </div>
</div>

🔔

Banner Alert

Alerts

Full-width top banner for site-wide announcements.

🎉 New feature launched — Learn more

<div class="w-full bg-indigo-600 text-white flex items-center justify-between px-4 py-2.5 text-xs font-medium"><span>🎉 New feature — <span class="underline cursor-pointer">Learn more</span></span><button class="ml-3 text-indigo-200 hover:text-white">✕</button></div>

🔔

Success Alert

Alerts

Green success alert with check icon and dismiss.

✔

Success!

Your changes have been saved.

<div class="flex items-start gap-3 rounded-xl bg-emerald-50 border border-emerald-200 px-4 py-3"><span class="text-emerald-500 mt-0.5">✔</span><div class="flex-1"><p class="text-xs font-bold text-emerald-800">Success!</p><p class="text-xs text-emerald-600 mt-0.5">Your changes have been saved.</p></div><button class="text-emerald-400 text-sm">✕</button></div>

🔔

Warning Alert

Alerts

Amber warning alert with bold title and message.

⚠

Low Storage

You have used 90% of your storage quota.

<div class="flex items-start gap-3 rounded-xl bg-amber-50 border border-amber-200 px-4 py-3"><span class="text-amber-500 mt-0.5">⚠</span><div><p class="text-xs font-bold text-amber-800">Low Storage</p><p class="text-xs text-amber-700 mt-0.5">You have used 90% of your storage quota.</p></div></div>

🔔

Error Alert

Alerts

Red error alert with action button.

✖

Payment Failed

Your card was declined. Please try again.

<div class="flex items-start gap-3 rounded-xl bg-red-50 border border-red-200 px-4 py-3"><span class="text-red-500 mt-0.5">✖</span><div class="flex-1"><p class="text-xs font-bold text-red-800">Payment Failed</p><p class="text-xs text-red-600 mt-0.5">Your card was declined.</p><button class="mt-2 text-xs font-semibold text-red-700 underline">Retry</button></div></div>

🔔

Neutral Info Alert

Alerts

Minimal grey informational alert for general notices.

ℹ

Maintenance scheduled for Sunday 2am–4am UTC.

<div class="flex items-center gap-3 rounded-xl bg-zinc-100 border border-zinc-200 px-4 py-3"><span class="text-zinc-500 text-sm">ℹ</span><p class="text-xs text-zinc-600">Maintenance scheduled Sunday 2–4am UTC.</p></div>

👤

Avatar Stack

Avatars

Overlapping avatar stack with +N overflow count.

<div class="flex items-center"><div class="w-9 h-9 rounded-full bg-indigo-400 border-2 border-white flex items-center justify-center text-white text-xs font-bold">A</div><div class="-ml-2.5 w-9 h-9 rounded-full bg-pink-400 border-2 border-white flex items-center justify-center text-white text-xs font-bold">B</div><div class="-ml-2.5 w-9 h-9 rounded-full bg-zinc-200 border-2 border-white flex items-center justify-center text-xs font-bold text-zinc-600">+5</div></div>

👤

Avatar with Status

Avatars

Avatar with online/away/offline status dot indicator.

Online

Away

Offline

<div class="relative inline-block"><div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold">U</div><span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-400 border-2 border-white"></span></div>

👤

Initials Avatar

Avatars

Color-coded initials avatars in multiple sizes.

<div class="flex items-center gap-3"><div class="w-11 h-11 rounded-full bg-violet-500 flex items-center justify-center text-white font-bold text-sm">JD</div><div class="w-9 h-9 rounded-full bg-rose-500 flex items-center justify-center text-white font-bold text-xs">AB</div><div class="w-7 h-7 rounded-full bg-teal-500 flex items-center justify-center text-white font-bold text-[10px]">MK</div></div>

👤

Avatar Upload

Avatars

Avatar with camera icon overlay for photo upload.

📷

Click to change photo

<div class="relative cursor-pointer group w-16 h-16"><div class="w-16 h-16 rounded-full bg-gradient-to-br from-indigo-400 to-violet-500 flex items-center justify-center text-white text-xl font-bold">JD</div><div class="absolute inset-0 rounded-full bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">📷</div></div>

👤

Avatar Group List

Avatars

Avatar with name and role in a vertical list.

Alice

Designer

Bob

Engineer

Carol

<div class="flex items-center gap-3 p-2 rounded-xl hover:bg-zinc-50 transition"><div class="w-8 h-8 rounded-full bg-indigo-400 flex items-center justify-center text-white text-xs font-bold">A</div><div><p class="text-xs font-semibold text-zinc-800">Alice</p><p class="text-[10px] text-zinc-400">Designer</p></div></div>

🏷️

Pill Badges

Badge

Rounded pill badges in multiple color variants.

NewHotSaleBetaPro

<div class="flex flex-wrap gap-2"><span class="px-3 py-1 rounded-full text-[11px] font-semibold bg-indigo-100 text-indigo-700">New</span><span class="px-3 py-1 rounded-full text-[11px] font-semibold bg-rose-100 text-rose-700">Hot</span><span class="px-3 py-1 rounded-full text-[11px] font-semibold bg-emerald-100 text-emerald-700">Sale</span></div>

🏷️

Dot Badges

Badge

Small colored dot badges for status indication.

Active

Pending

Inactive

Error

<div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-emerald-400"></span><span class="text-xs text-zinc-700">Active</span></div>

🏷️

Counter Badge

Badge

Notification counter badge overlaid on icons.

🔔3

✉️9+

🛒

<div class="relative cursor-pointer inline-block"><span class="text-2xl">🔔</span><span class="absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center px-1">3</span></div>

🏷️

Icon Badge

Badge

Badge variants with leading icon for context.

✔ Verified★ Featured🔒 Secure⚡ Fast

<div class="flex flex-wrap gap-2"><span class="px-2.5 py-1 rounded-lg text-[11px] font-semibold bg-emerald-100 text-emerald-700">✔ Verified</span><span class="px-2.5 py-1 rounded-lg text-[11px] font-semibold bg-amber-100 text-amber-700">★ Featured</span></div>

🏷️

Outline Badges

Badge

Border-only outline style badges without fill.

DesignReactOpen Source

<div class="flex flex-wrap gap-2"><span class="px-2.5 py-0.5 rounded-full border border-violet-400 text-violet-600 text-[11px] font-medium">Design</span><span class="px-2.5 py-0.5 rounded-full border border-blue-400 text-blue-600 text-[11px] font-medium">React</span></div>

›

Slash Breadcrumb

Breadcrumb

Classic slash-separated breadcrumb navigation.

<nav class="flex items-center gap-1 text-xs"><a class="text-zinc-400 hover:text-zinc-700">Home</a><span class="text-zinc-300">/</span><a class="text-zinc-400 hover:text-zinc-700">Products</a><span class="text-zinc-300">/</span><span class="text-zinc-800 font-semibold">Shoes</span></nav>

›

Arrow Breadcrumb

Breadcrumb

Chevron arrow separated breadcrumb with icon home.

<nav class="flex items-center gap-1 text-xs"><a class="text-zinc-400 hover:text-indigo-600 transition">🏠 Home</a><span class="text-zinc-300">›</span><a class="text-zinc-400 hover:text-indigo-600">Category</a><span class="text-zinc-300">›</span><span class="text-indigo-600 font-semibold">Item</span></nav>

›

Pill Breadcrumb

Breadcrumb

Each breadcrumb step as a distinct pill button.

<nav class="flex items-center gap-2"><span class="px-3 py-1 rounded-full text-[11px] font-medium bg-zinc-100 text-zinc-600 hover:bg-zinc-200 cursor-pointer">Home</span><span class="px-3 py-1 rounded-full text-[11px] font-medium bg-indigo-600 text-white">Article</span></nav>

›

Collapsed Breadcrumb

Breadcrumb

Long path collapsed with ellipsis in the middle.

<nav class="flex items-center gap-1 text-xs"><a class="text-zinc-400 hover:text-zinc-700">Home</a><span class="text-zinc-300">/</span><span class="px-1.5 py-0.5 rounded bg-zinc-100 text-zinc-500 text-[11px] cursor-pointer">•••</span><span class="text-zinc-300">/</span><span class="text-zinc-800 font-semibold">API Reference</span></nav>

›

Background Breadcrumb

Breadcrumb

Breadcrumb with subtle background bar.

<nav class="flex items-center gap-1 bg-white border border-zinc-200 rounded-xl px-4 py-2 text-xs shadow-sm"><a class="text-zinc-400 hover:text-zinc-700">Home</a><span class="text-zinc-300 mx-0.5">›</span><span class="text-zinc-900 font-bold">Profile</span></nav>

⊞

Icon Button Group

Button Groups

Icon-only button group for editor-style toolbars.

<div class="flex rounded-xl overflow-hidden border border-zinc-200 shadow-sm"><button class="px-3.5 py-2 text-sm font-bold text-zinc-700 hover:bg-zinc-100 border-r border-zinc-200">B</button><button class="px-3.5 py-2 text-sm italic text-zinc-700 hover:bg-zinc-100 border-r border-zinc-200">I</button><button class="px-3.5 py-2 text-sm underline text-zinc-700 hover:bg-zinc-100">U</button></div>

⊞

Toggle Button Group

Button Groups

Single-select toggle group with active state.

<div class="flex rounded-xl border border-zinc-200 overflow-hidden shadow-sm"><button class="px-3.5 py-2 text-xs font-semibold bg-indigo-600 text-white">Day</button><button class="px-3.5 py-2 text-xs font-semibold bg-white text-zinc-600 hover:bg-zinc-50 border-l border-zinc-200">Week</button><button class="px-3.5 py-2 text-xs font-semibold bg-white text-zinc-600 hover:bg-zinc-50 border-l border-zinc-200">Month</button></div>

⊞

Outlined Button Group

Button Groups

Outlined action group with shared border.

<div class="flex"><button class="px-4 py-2 text-xs font-semibold border border-zinc-300 text-zinc-700 hover:bg-zinc-50 rounded-l-xl">Copy</button><button class="px-4 py-2 text-xs font-semibold border border-zinc-300 text-zinc-700 hover:bg-zinc-50 -ml-px">Edit</button><button class="px-4 py-2 text-xs font-semibold border border-zinc-300 text-zinc-700 hover:bg-zinc-50 -ml-px rounded-r-xl">Delete</button></div>

⊞

Split Button

Button Groups

Primary action button with dropdown arrow split.

<div class="flex items-stretch shadow-sm"><button class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold rounded-l-xl transition">Publish</button><button class="px-2.5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-r-xl border-l border-indigo-500 text-xs">▾</button></div>

⊞

Color Button Group

Button Groups

Color-themed button group for category selection.

<div class="flex gap-1.5"><button class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-zinc-800 text-white">All</button><button class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-violet-50 text-violet-700 hover:bg-violet-100">Design</button><button class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-blue-50 text-blue-700 hover:bg-blue-100">Dev</button></div>

⬡

Gradient Buttons

Button Variants

Vibrant gradient-fill buttons in multiple styles.

<button class="px-4 py-2 rounded-xl bg-gradient-to-r from-indigo-500 to-violet-600 text-white text-xs font-bold shadow hover:shadow-md hover:scale-105 transition-all">Get Started</button>

⬡

Ghost Buttons

Button Variants

Transparent ghost buttons that show on hover.

<button class="px-4 py-2 rounded-xl text-indigo-600 text-xs font-semibold hover:bg-indigo-50 transition">Learn More</button>

⬡

Pill Buttons

Button Variants

Fully rounded pill-shaped buttons.

<button class="px-5 py-2 rounded-full bg-indigo-600 text-white text-xs font-bold hover:bg-indigo-700 transition">Follow</button>

⬡

Icon Label Buttons

Button Variants

Buttons with leading icon and label.

<button class="flex items-center gap-1.5 px-4 py-2 rounded-xl bg-indigo-600 text-white text-xs font-semibold hover:bg-indigo-700 transition"><span>⬆</span> Upload</button>

⬡

Button Sizes

Button Variants

XS through XL button size scale showcase.

<div class="flex items-center gap-2"><button class="px-2.5 py-1 rounded-lg bg-indigo-600 text-white text-[10px] font-bold">XS</button><button class="px-4 py-2 rounded-xl bg-indigo-600 text-white text-sm font-bold">MD</button><button class="px-5 py-2.5 rounded-xl bg-indigo-600 text-white text-base font-bold">LG</button></div>

▭

Pricing Card

Cards

Pricing plan card with feature list and CTA.

Pro

$29/mo

✔Unlimited projects
✔10GB storage
✔Priority support

<div class="w-48 bg-white rounded-2xl border border-zinc-200 shadow-sm p-5"><p class="text-xs font-bold text-indigo-600 uppercase">Pro</p><p class="text-2xl font-extrabold text-zinc-900 mt-1">$29<span class="text-sm font-normal text-zinc-400">/mo</span></p><button class="w-full mt-3 py-2 rounded-xl bg-indigo-600 text-white text-xs font-bold">Upgrade</button></div>

▭

Testimonial Card

Cards

Quote card with avatar, name and star rating.

★★★★★

"Absolutely love this product. It has completely transformed how our team works."

Jane Doe

CEO @ Acme

<div class="w-60 bg-white rounded-2xl border border-zinc-100 shadow-sm p-5"><div class="text-amber-400 text-xs mb-2">★★★★★</div><p class="text-xs text-zinc-600">"Absolutely love this product."</p><div class="flex items-center gap-2.5 mt-4"><div class="w-8 h-8 rounded-full bg-indigo-400 flex items-center justify-center text-white text-xs font-bold">JD</div><div><p class="text-xs font-bold text-zinc-800">Jane Doe</p><p class="text-[10px] text-zinc-400">CEO @ Acme</p></div></div></div>

▭

Stats Card

Cards

KPI stat card with trend indicator.

Revenue

$12,400

↑ 8.2%

Users

3,280

↓ 1.4%

Orders

842

↑ 12%

<div class="bg-white rounded-2xl border border-zinc-100 shadow-sm p-3.5"><p class="text-[10px] text-zinc-400 font-medium">Revenue</p><p class="text-base font-extrabold text-zinc-900 mt-0.5">$12,400</p><p class="text-[10px] font-semibold mt-1 text-emerald-600">↑ 8.2%</p></div>

▭

Horizontal Card

Cards

Side-by-side image and content card layout.

Design

Mastering UI Design Patterns

5 min read · Apr 2025

<div class="w-72 flex bg-white rounded-2xl border border-zinc-100 shadow-sm overflow-hidden"><div class="w-20 bg-gradient-to-br from-indigo-400 to-violet-500 shrink-0"></div><div class="p-3.5"><p class="text-xs font-bold text-zinc-800">Mastering UI Design</p><p class="text-[10px] text-zinc-400 mt-1">5 min read</p></div></div>

▭

Glass Card

Cards

Frosted glass morphism card with blur effect.

Total Balance

$8,240.00

**** **** **** 4281

Jane Doe

VISA

<div class="w-52 rounded-2xl p-5 text-white" style="background:rgba(255,255,255,0.15);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.25)"><p class="text-xs font-bold opacity-80">Total Balance</p><p class="text-2xl font-extrabold">$8,240.00</p></div>

⟳

Dots Carousel

Carousel

Slide carousel with dot navigation indicators.

Slide One

<div class="w-64"><div class="w-full h-24 rounded-2xl bg-gradient-to-r from-indigo-500 to-violet-600 flex items-center justify-center text-white font-bold">Slide One</div><div class="flex justify-center gap-2 mt-3"><span class="w-4 h-2 rounded-full bg-indigo-600"></span><span class="w-2 h-2 rounded-full bg-zinc-300"></span><span class="w-2 h-2 rounded-full bg-zinc-300"></span></div></div>

⟳

Arrow Carousel

Carousel

Carousel with left/right arrow navigation buttons.

1/3

<div class="relative w-56 h-28"><div class="w-full h-full rounded-2xl bg-gradient-to-r from-indigo-400 to-violet-500 flex items-center justify-center text-white font-bold">1/3</div><button class="absolute left-2 top-1/2 -translate-y-1/2 w-7 h-7 bg-white/80 rounded-full flex items-center justify-center text-zinc-700 shadow text-xs">‹</button><button class="absolute right-2 top-1/2 -translate-y-1/2 w-7 h-7 bg-white/80 rounded-full flex items-center justify-center text-zinc-700 shadow text-xs">›</button></div>

⟳

Card Carousel

Carousel

Horizontally scrolling card carousel.

UI Kit

Icon Pack

Templates

Fonts

<div class="flex gap-3 overflow-x-auto pb-1"><div class="shrink-0 w-28 h-20 rounded-xl bg-indigo-100 border border-indigo-200 flex flex-col items-center justify-center gap-1"><div class="w-8 h-8 rounded-lg bg-indigo-400"></div><p class="text-[10px] font-semibold text-indigo-700">UI Kit</p></div></div>

⟳

Progress Carousel

Carousel

Carousel with progress bar indicating slide position.

Slide 1

1/4

<div class="w-64"><div class="w-full h-20 rounded-2xl bg-gradient-to-r from-indigo-500 to-violet-600 flex items-center justify-center text-white font-bold">Slide 1</div><div class="mt-3 h-1 bg-zinc-200 rounded-full overflow-hidden"><div class="h-full bg-indigo-600 rounded-full" style="width:25%"></div></div></div>

⟳

Testimonial Carousel

Carousel

Auto-cycle testimonial quote carousel.

"Great product!"

— Alice

<div class="w-64 text-center px-4"><p class="text-xs text-zinc-600 italic">"Great product!"</p><p class="text-[10px] font-bold text-zinc-800 mt-2">— Alice</p></div>

▾

Select Dropdown

Dropdowns

Custom styled select dropdown with options list.

<div class="relative w-52"><button class="w-full flex items-center justify-between px-3.5 py-2.5 bg-white border border-zinc-300 rounded-xl text-xs text-zinc-700 shadow-sm">Select option... <span class="text-zinc-400">▾</span></button></div>

▾

User Menu Dropdown

Dropdowns

Avatar-triggered user account dropdown menu.

<div class="relative"><button class="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-zinc-100"><div class="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center text-white text-[10px] font-bold">JD</div><span class="text-xs font-medium text-zinc-700">Jane Doe</span><span class="text-[10px] text-zinc-400">▾</span></button></div>

▾

Context Menu

Dropdowns

Right-click style context menu with icons.

<div class="w-40 bg-white border border-zinc-200 rounded-xl shadow-xl py-1"><button class="w-full text-left px-3 py-2 text-xs flex items-center gap-2 text-zinc-700 hover:bg-zinc-50">✏️ Edit</button><button class="w-full text-left px-3 py-2 text-xs flex items-center gap-2 text-red-500 hover:bg-red-50">🗑️ Delete</button></div>

▾

Sort Dropdown

Dropdowns

Sort/filter dropdown for table or list views.

<div class="relative w-44"><button class="w-full flex items-center justify-between px-3 py-2 bg-white border border-zinc-300 rounded-xl text-xs text-zinc-700 shadow-sm">⇅ Newest first <span class="text-zinc-400">▾</span></button></div>

▾

Multi-Select Dropdown

Dropdowns

Checkbox-based multi-select dropdown.

<div class="relative w-52"><button class="w-full flex items-center justify-between px-3.5 py-2.5 bg-white border border-zinc-300 rounded-xl text-xs text-zinc-700 shadow-sm">React, Vue <span class="text-zinc-400">▾</span></button></div>

🖼️

Image Grid

Images

3×2 responsive image grid with hover overlay.

<div class="grid grid-cols-3 gap-1.5"><div class="h-14 rounded-lg bg-gradient-to-br from-indigo-400 to-violet-500 cursor-pointer hover:opacity-80 transition"></div></div>

🖼️

Image with Caption

Images

Rounded image with overlaid bottom caption.

Mountain Sunrise

Photo by @nature

<div class="w-56 rounded-2xl overflow-hidden shadow-md relative"><div class="h-28 bg-gradient-to-br from-indigo-400 to-pink-500"></div><div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3"><p class="text-white text-xs font-bold">Mountain Sunrise</p><p class="text-white/70 text-[10px]">Photo by @nature</p></div></div>

🖼️

Image Avatar Group

Images

Profile picture group for team or collaborators.

4 contributors

<div class="flex"><div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-400 to-violet-500 border-2 border-white"></div><div class="-ml-2.5 w-10 h-10 rounded-full bg-gradient-to-br from-rose-400 to-pink-500 border-2 border-white"></div></div>

🖼️

Image Skeleton

Images

Animated skeleton placeholder while image loads.

<div class="w-52 space-y-2.5"><div class="w-full h-28 rounded-2xl bg-zinc-200 animate-pulse"></div><div class="h-3 bg-zinc-200 rounded-full animate-pulse w-3/4"></div></div>

🖼️

Before/After Image

Images

Side-by-side before/after image comparison.

Before

After

<div class="w-56 flex gap-0.5 rounded-2xl overflow-hidden shadow-md"><div class="flex-1 bg-zinc-300 h-24 flex items-end p-2"><span class="bg-black/60 text-white text-[9px] font-bold px-1.5 py-0.5 rounded">Before</span></div><div class="flex-1 bg-gradient-to-br from-indigo-400 to-violet-500 h-24 flex items-end p-2"><span class="bg-black/60 text-white text-[9px] font-bold px-1.5 py-0.5 rounded">After</span></div></div>

🔗

Animated Underline

Links

Link with animated underline slide-in effect.

Documentation GitHub Repository API Reference

<a class="relative text-sm font-medium text-zinc-800 cursor-pointer group">Documentation<span class="absolute left-0 bottom-0 h-0.5 w-0 bg-indigo-600 group-hover:w-full transition-all duration-300"></span></a>

🔗

Arrow Links

Links

Links with animated arrow indicating navigation.

Read the docs→View on GitHub→See changelog→

<a class="flex items-center gap-1.5 text-sm font-medium text-indigo-600 cursor-pointer group hover:gap-2.5 transition-all">Read the docs <span class="transition-transform group-hover:translate-x-1">→</span></a>

🔗

External Links

Links

External links with open-in-new-tab icon.

MDN Web Docs↗Tailwind CSS↗Vercel Platform↗

<a class="flex items-center gap-1.5 text-sm font-medium text-blue-600 hover:text-blue-800 underline underline-offset-2 decoration-blue-300 group">MDN Web Docs <span class="text-[10px] opacity-70 group-hover:opacity-100">↗</span></a>

🔗

Navigation Links

Links

Sidebar nav links with active and hover states.

<nav class="flex flex-col gap-1 w-40"><a class="flex items-center gap-2.5 px-3 py-2 rounded-xl text-xs font-medium bg-indigo-600 text-white">🏠 Dashboard</a><a class="flex items-center gap-2.5 px-3 py-2 rounded-xl text-xs font-medium text-zinc-600 hover:bg-white">📊 Analytics</a></nav>

🔗

Tag/Chip Links

Links

Clickable tag chips for filtering and navigation.

React Next.js TypeScript Tailwind Design UI/UX

<div class="flex flex-wrap gap-2"><a class="px-3 py-1 rounded-full bg-zinc-100 text-zinc-600 text-[11px] font-medium hover:bg-indigo-100 hover:text-indigo-700 transition cursor-pointer">React</a></div>

≡

Checklist

List

Interactive to-do checklist with strikethrough.

<div class="space-y-1.5"><label class="flex items-center gap-2.5 cursor-pointer"><input type="checkbox" class="accent-indigo-600 w-4 h-4" checked /><span class="text-xs line-through text-zinc-400">Design wireframes</span></label><label class="flex items-center gap-2.5 cursor-pointer"><input type="checkbox" class="accent-indigo-600 w-4 h-4" /><span class="text-xs text-zinc-700">Write copy</span></label></div>

≡

Icon List

List

Feature list with colorful leading icons.

⚡Blazing fast performance
🔒Enterprise security
🌐Global CDN edge
💡Smart caching

<ul class="space-y-2.5"><li class="flex items-start gap-2.5"><span class="w-6 h-6 rounded-lg bg-indigo-100 flex items-center justify-center text-sm shrink-0">⚡</span><span class="text-xs text-zinc-700">Blazing fast performance</span></li></ul>

≡

Numbered Steps

List

Ordered step list with numbered circles.

1Create an account
2Complete your profile
3Invite your team
4Start building

<ol class="space-y-3"><li class="flex items-start gap-3"><span class="w-5 h-5 rounded-full bg-indigo-600 text-white text-[10px] font-bold flex items-center justify-center shrink-0">1</span><span class="text-xs text-zinc-700">Create an account</span></li></ol>

≡

Drag Handle List

List

List items with drag handles for reordering UI.

⠿Homepage

⠿About Us

⠿Services

⠿Contact

<div class="w-52 space-y-1.5"><div class="flex items-center gap-2.5 p-2.5 bg-zinc-50 rounded-xl border border-zinc-200 cursor-grab hover:border-indigo-300 hover:bg-indigo-50 transition group"><span class="text-zinc-300 group-hover:text-indigo-400 select-none">⠿</span><span class="text-xs font-medium text-zinc-700">Homepage</span></div></div>

≡

Simple Timeline

List

Vertical timeline list with date and event.

Jan 2025

Project kickoff

Mar 2025

Beta launch

Jun 2025

v1.0 release

Now

Scaling 🚀

<div class="relative pl-4"><div class="absolute left-4 top-2 bottom-2 w-px bg-zinc-200"></div><div class="relative mb-4"><div class="absolute -left-4 top-1 w-2 h-2 rounded-full bg-indigo-500 ring-2 ring-white"></div><p class="text-[10px] text-zinc-400">Jan 2025</p><p class="text-xs font-semibold text-zinc-800">Project kickoff</p></div></div>

🪟

Confirm Dialog

Modals

Destructive action confirmation dialog.

<div class="bg-white rounded-2xl p-6 w-72 shadow-2xl"><p class="text-sm font-bold text-zinc-900">Delete this item?</p><p class="text-xs text-zinc-500 mt-1.5">This action cannot be undone.</p><div class="flex gap-2 mt-4"><button class="flex-1 py-2 rounded-xl border border-zinc-200 text-xs font-semibold text-zinc-600">Cancel</button><button class="flex-1 py-2 rounded-xl bg-red-500 text-white text-xs font-bold">Delete</button></div></div>

🪟

Form Modal

Modals

Modal with input fields for data entry.

<div class="bg-white rounded-2xl p-5 w-72 shadow-2xl"><p class="text-sm font-bold text-zinc-900 mb-3">Add Team Member</p><input class="w-full border border-zinc-300 rounded-lg px-3 py-2 text-xs mb-2.5" placeholder="Full name" /><input class="w-full border border-zinc-300 rounded-lg px-3 py-2 text-xs" placeholder="Email address" /></div>

🪟

Success Modal

Modals

Modal with success illustration and CTA.

<div class="bg-white rounded-2xl p-6 w-64 shadow-2xl text-center"><div class="w-14 h-14 rounded-full bg-emerald-100 flex items-center justify-center text-2xl mx-auto mb-3">✅</div><p class="text-sm font-bold text-zinc-900">Order Confirmed!</p><button class="mt-4 w-full py-2 rounded-xl bg-emerald-500 text-white text-xs font-bold">Track Order</button></div>

🪟

Image Preview Modal

Modals

Lightbox-style image preview modal.

🔍

<div class="w-40 h-24 rounded-xl bg-gradient-to-br from-indigo-400 to-violet-500 cursor-pointer hover:opacity-90 transition relative shadow"><div class="absolute inset-0 flex items-center justify-center"><span class="text-white text-2xl opacity-80">🔍</span></div></div>

🪟

Side Panel Modal

Modals

Slide-in side drawer panel from the right.

<div class="bg-white w-64 h-full shadow-2xl p-5"><div class="flex items-center justify-between mb-4"><p class="text-sm font-bold text-zinc-900">Filters</p><button class="text-zinc-400">✕</button></div></div>

🔔

Top Toast

Notifications

Top-center toast notification with auto-dismiss.

✔Profile updated successfully!

<div class="flex items-center gap-3 bg-zinc-900 text-white px-4 py-3 rounded-xl shadow-xl text-xs font-medium max-w-xs"><span class="text-emerald-400">✔</span><span class="flex-1">Profile updated successfully!</span><button class="text-zinc-400 hover:text-white">✕</button></div>

🔔

Notification Inbox

Notifications

Dropdown notification list panel.

Notifications

Mark all read

🔔

New comment on your post

2m ago

✅

Your PR was merged

1h ago

🎉

You reached 1K followers

3h ago

<div class="w-64 bg-white rounded-2xl border border-zinc-200 shadow-xl overflow-hidden"><div class="px-4 py-3 flex items-center justify-between border-b border-zinc-100"><p class="text-xs font-bold text-zinc-900">Notifications</p></div></div>

🔔

Badge Count Notification

Notifications

Bell icon with unread notification count badge.

Click to clear

<div class="relative p-2.5 bg-zinc-100 rounded-xl"><span class="text-xl">🔔</span><span class="absolute -top-1 -right-1 min-w-[18px] h-[18px] bg-red-500 text-white text-[9px] font-bold rounded-full flex items-center justify-center px-1">7</span></div>

🔔

Action Notification

Notifications

Notification with approve/decline action buttons.

Sarah sent you a friend request

5 minutes ago

<div class="w-64 bg-white rounded-2xl border border-zinc-200 shadow-md p-4"><div class="flex items-start gap-3"><div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white text-xs font-bold">SA</div><div><p class="text-xs font-semibold text-zinc-800">Sarah sent a friend request</p><div class="flex gap-2 mt-2.5"><button class="flex-1 py-1.5 rounded-lg bg-indigo-600 text-white text-[11px] font-semibold">Accept</button><button class="flex-1 py-1.5 rounded-lg border border-zinc-200 text-[11px]">Decline</button></div></div></div></div>

🔔

Progress Notification

Notifications

Upload or task progress notification bar.

📁

Uploading design-assets.zip

65% complete

<div class="w-64 bg-white rounded-2xl border border-zinc-200 shadow-md p-4"><div class="flex items-start gap-3 mb-2.5"><span class="text-xl">📁</span><div><p class="text-xs font-semibold text-zinc-800">Uploading design-assets.zip</p><p class="text-[10px] text-zinc-400">65% complete</p></div></div><div class="h-1.5 bg-zinc-100 rounded-full"><div class="h-full bg-indigo-500 rounded-full" style="width:65%"></div></div></div>

⟨⟩

Simple Pagination

Pagination

Prev/Next pagination with page count display.

Page 3 of 10

<div class="flex items-center gap-3"><button class="px-3 py-1.5 rounded-lg border border-zinc-200 text-xs font-semibold text-zinc-600 hover:bg-zinc-50">← Prev</button><span class="text-xs text-zinc-500">Page <span class="font-bold text-zinc-800">3</span> of 10</span><button class="px-3 py-1.5 rounded-lg border border-zinc-200 text-xs font-semibold text-zinc-600 hover:bg-zinc-50">Next →</button></div>

⟨⟩

Numbered Pagination

Pagination

Classic numbered page buttons with active state.

<div class="flex items-center gap-1"><button class="w-8 h-8 flex items-center justify-center rounded-lg border border-zinc-200 text-xs text-zinc-500">‹</button><button class="w-8 h-8 flex items-center justify-center rounded-lg bg-indigo-600 text-white text-xs font-semibold">3</button><button class="w-8 h-8 flex items-center justify-center rounded-lg border border-zinc-200 text-xs text-zinc-600">4</button><button class="w-8 h-8 flex items-center justify-center rounded-lg border border-zinc-200 text-xs text-zinc-500">›</button></div>

⟨⟩

Load More Button

Pagination

Infinite scroll "load more" pagination pattern.

<div class="flex flex-col items-center gap-3"><div class="w-full h-8 bg-zinc-100 rounded-lg"></div><button class="px-5 py-2 rounded-xl border border-zinc-300 text-xs font-semibold text-zinc-600 hover:bg-zinc-50">Load more</button></div>

⟨⟩

Dot Pagination

Pagination

Compact dot-style pagination for carousels and slides.

Slide 2

<div class="flex gap-2"><span class="w-5 h-2 rounded-full bg-indigo-600"></span><span class="w-2 h-2 rounded-full bg-zinc-300"></span><span class="w-2 h-2 rounded-full bg-zinc-300"></span></div>

⟨⟩

Page Jumper

Pagination

Pagination with direct page number input.

Go toof 20

<div class="flex items-center gap-2"><button class="w-8 h-8 flex items-center justify-center rounded-lg border border-zinc-200 text-zinc-500 text-xs">‹</button><span class="text-xs text-zinc-500">Go to</span><input class="w-10 h-8 border border-zinc-300 rounded-lg text-center text-xs font-bold" value="5" /><span class="text-xs text-zinc-500">of 20</span><button class="w-8 h-8 flex items-center justify-center rounded-lg border border-zinc-200 text-zinc-500 text-xs">›</button></div>

💬

Info Popover

Popovers

Hover info popover with description text.

<div class="relative inline-block"><button class="w-5 h-5 rounded-full bg-zinc-200 text-zinc-600 text-[11px] font-bold flex items-center justify-center cursor-help">?</button><div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-48 bg-zinc-900 text-white text-[11px] rounded-xl px-3 py-2.5 shadow-xl"><p class="font-semibold">Pro Plan</p><p class="text-zinc-300">Unlimited projects, priority support.</p></div></div>

💬

User Card Popover

Popovers

Rich user profile card popover on hover.

<div class="w-56 bg-white border border-zinc-200 rounded-2xl shadow-xl p-4"><div class="flex items-center gap-3 mb-3"><div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-400 to-violet-500 flex items-center justify-center text-white font-bold">JD</div><div><p class="text-xs font-bold text-zinc-900">Jane Doe</p><p class="text-[10px] text-zinc-400">Product Designer</p></div></div></div>

💬

Action Menu Popover

Popovers

Three-dot more menu action popover.

<div class="w-40 bg-white border border-zinc-200 rounded-xl shadow-xl py-1"><button class="w-full text-left px-3 py-2 text-xs flex items-center gap-2 text-zinc-700 hover:bg-zinc-50">✏️ Edit</button><button class="w-full text-left px-3 py-2 text-xs flex items-center gap-2 text-red-500 hover:bg-red-50">🗑️ Delete</button></div>

💬

Emoji Picker Popover

Popovers

Quick emoji reaction picker popover.

<div class="bg-white border border-zinc-200 rounded-2xl shadow-xl p-2 flex gap-1 flex-wrap w-36"><button class="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-zinc-100 text-base">👍</button><button class="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-zinc-100 text-base">❤️</button></div>

💬

Rich Tooltip Popover

Popovers

Popover with title, body text and a link.

<div class="w-56 bg-white border border-zinc-200 rounded-2xl shadow-xl p-4"><p class="text-xs font-bold text-zinc-900 mb-1">API Rate Limits</p><p class="text-[11px] text-zinc-500">Free tier: 1000 req/day. Upgrade for unlimited.</p><a class="text-[11px] text-indigo-600 mt-2 block">Learn more →</a></div>

▬

Gradient Progress

Progress Bars

Progress bar with colorful gradient fill.

Design75%

Frontend55%

Backend88%

<div class="w-56"><div class="flex justify-between mb-1"><span class="text-xs font-medium text-zinc-700">Design</span><span class="text-xs text-zinc-400">75%</span></div><div class="h-2 bg-zinc-100 rounded-full overflow-hidden"><div class="h-full rounded-full bg-gradient-to-r from-indigo-500 to-violet-500" style="width:75%"></div></div></div>

▬

Step Progress

Progress Bars

Multi-step progress indicator with step labels.

<div class="flex items-center w-64"><div class="w-7 h-7 rounded-full bg-indigo-600 text-white flex items-center justify-center text-xs font-bold">✓</div><div class="flex-1 h-0.5 bg-indigo-600"></div><div class="w-7 h-7 rounded-full bg-indigo-600 text-white flex items-center justify-center text-xs font-bold ring-4 ring-indigo-100">2</div><div class="flex-1 h-0.5 bg-zinc-200"></div><div class="w-7 h-7 rounded-full bg-zinc-100 text-zinc-400 flex items-center justify-center text-xs font-bold">3</div></div>

▬

Circular Ring Progress

Progress Bars

SVG circular/ring progress indicators.

Design

Tasks

Goals

<svg width="56" height="56" viewBox="0 0 56 56"><circle cx="28" cy="28" r="22" fill="none" stroke="#f4f4f5" stroke-width="4" /><circle cx="28" cy="28" r="22" fill="none" stroke="#6366f1" stroke-width="4" stroke-linecap="round" stroke-dasharray="138.2" stroke-dashoffset="34.5" transform="rotate(-90 28 28)" /><text x="28" y="33" text-anchor="middle" font-size="10" font-weight="700" fill="#18181b">75%</text></svg>

▬

Multi-Segment Bar

Progress Bars

Segmented bar showing breakdown of categories.

Design 40%

Dev 25%

Marketing 20%

Other 15%

<div class="w-56"><div class="flex rounded-full overflow-hidden h-3"><div class="bg-indigo-500 h-full" style="width:40%"></div><div class="bg-violet-400 h-full" style="width:25%"></div><div class="bg-pink-400 h-full" style="width:20%"></div><div class="bg-zinc-200 h-full" style="width:15%"></div></div></div>

▬

Animated Progress

Progress Bars

Striped animated progress bar.

Uploading...60%

<div class="h-3 bg-zinc-100 rounded-full overflow-hidden"><div class="h-full rounded-full bg-indigo-500 relative overflow-hidden" style="width:60%"><div class="absolute inset-0 opacity-20" style="background:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(255,255,255,.5) 6px,rgba(255,255,255,.5) 12px);background-size:24px 24px"></div></div></div>

🎀

Corner Ribbon

Ribbons

Top-left diagonal corner ribbon on a card.

Product Card

NEW

<div class="relative w-44 h-28 bg-white rounded-2xl border border-zinc-200 shadow overflow-hidden"><div class="absolute top-0 left-0 w-16 h-16 overflow-hidden"><div class="absolute bg-indigo-600 text-white text-[9px] font-bold px-4 py-0.5 -left-5 top-3 rotate-[-45deg] shadow-sm">NEW</div></div></div>

🎀

Sale Ribbon Badge

Ribbons

Bold "SALE" badge ribbon for product listings.

SALENEWHOTPRO

<div class="flex gap-2"><span class="bg-red-500 text-white text-[10px] font-extrabold px-2.5 py-1 rounded-lg shadow-sm tracking-wide">SALE</span><span class="bg-emerald-500 text-white text-[10px] font-extrabold px-2.5 py-1 rounded-lg shadow-sm tracking-wide">NEW</span></div>

🎀

Top Banner Ribbon

Ribbons

Full-width banner ribbon across the top of a card.

Limited Offer

Pro Plan

Get 3 months free with annual billing.

<div class="w-52 bg-white rounded-2xl border border-zinc-200 shadow overflow-hidden"><div class="bg-indigo-600 text-white text-center text-[10px] font-bold py-1.5 tracking-widest uppercase">Limited Offer</div><div class="p-4"><p class="text-sm font-bold text-zinc-900">Pro Plan</p></div></div>

🎀

Featured Ribbon

Ribbons

Star-featured card with side ribbon tab.

★ FEATURED

UI Component Kit

300+ ready-to-use components

★★★★★(128)

<div class="relative w-48 bg-white rounded-2xl border border-zinc-200 shadow-md overflow-hidden"><div class="absolute top-3 -right-7 bg-amber-400 text-white text-[9px] font-extrabold px-8 py-1 rotate-[35deg] shadow">★ FEATURED</div><div class="p-4 pr-8"><p class="text-sm font-bold text-zinc-900">UI Component Kit</p></div></div>

🎀

Discount Tag Ribbon

Ribbons

Price tag shaped discount ribbon.

20% OFF

50% OFF

FREE OFF

<div class="relative"><div class="bg-rose-500 text-white font-extrabold px-3 py-1.5 rounded-r-lg text-xs relative">20% OFF<div class="absolute left-0 top-0 w-0 h-0 border-t-[13px] border-b-[13px] border-r-[8px] border-t-transparent border-b-transparent border-r-white" style="transform:translateX(-100%)"></div></div></div>

⟳

Dots Spinner

Spinners

Three bouncing dots loading animation.

<div class="flex items-center gap-1.5"><div class="w-2.5 h-2.5 rounded-full bg-indigo-500 animate-bounce" style="animation-delay:0ms"></div><div class="w-2.5 h-2.5 rounded-full bg-indigo-500 animate-bounce" style="animation-delay:150ms"></div><div class="w-2.5 h-2.5 rounded-full bg-indigo-500 animate-bounce" style="animation-delay:300ms"></div></div>

⟳

Pulse Spinner

Spinners

Pulsing ring animation loading indicator.

<div class="relative flex items-center justify-center"><div class="absolute w-10 h-10 rounded-full border-2 border-indigo-200 animate-ping opacity-75"></div><div class="w-5 h-5 rounded-full bg-indigo-500"></div></div>

⟳

Bar Spinner

Spinners

Five animated bars forming a wave pattern.

<div class="flex items-end gap-1" style="height:32px"><div class="w-2 bg-indigo-500 rounded-full" style="height:12px;animation:barwave 1s ease-in-out 0ms infinite"></div></div>

⟳

Skeleton Card

Spinners

Full card skeleton loader while content loads.

<div class="w-52 bg-white rounded-2xl border border-zinc-100 shadow-sm p-4 space-y-3"><div class="w-full h-24 rounded-xl bg-zinc-200 animate-pulse"></div><div class="h-2.5 bg-zinc-200 rounded-full animate-pulse w-4/5"></div><div class="h-8 bg-zinc-200 rounded-xl animate-pulse"></div></div>

⟳

Multi Ring Spinner

Spinners

Multiple concentric spinning rings.

<div class="flex gap-4 items-center"><div class="w-9 h-9 rounded-full border-2 border-zinc-100 border-t-indigo-500 animate-spin"></div><div class="w-7 h-7 rounded-full border-2 border-zinc-100 border-t-rose-500 animate-spin"></div><div class="w-5 h-5 rounded-full border-2 border-zinc-100 border-t-emerald-500 animate-spin"></div></div>

⊟

Pill Tabs

Tabs

Pill-style tabs with background switch.

Overview content displayed here.

<div class="flex gap-1 bg-zinc-100 p-1 rounded-xl w-fit"><button class="px-3.5 py-1.5 rounded-lg text-xs font-semibold bg-white text-zinc-900 shadow-sm">Overview</button><button class="px-3.5 py-1.5 rounded-lg text-xs font-semibold text-zinc-500 hover:text-zinc-800">Analytics</button></div>

⊟

Underline Tabs

Tabs

Classic underline-style navigation tabs.

All items listed here.

<div class="flex border-b border-zinc-200"><button class="px-4 py-2.5 text-xs font-semibold border-b-2 border-indigo-600 text-indigo-600">All</button><button class="px-4 py-2.5 text-xs font-semibold border-b-2 border-transparent text-zinc-500 hover:text-zinc-800">Active</button></div>

⊟

Icon Tabs

Tabs

Tabs with icon and label for richer navigation.

Home content.

<div class="flex gap-0.5 border-b border-zinc-100"><button class="flex items-center gap-1.5 px-3 py-2 text-xs font-semibold border-b-2 border-indigo-600 text-indigo-600 bg-indigo-50 rounded-t-lg">🏠 Home</button><button class="flex items-center gap-1.5 px-3 py-2 text-xs font-semibold border-b-2 border-transparent text-zinc-500">📊 Stats</button></div>

⊟

Count Badge Tabs

Tabs

Tabs with count badges showing item numbers.

Inbox: 12 messages.

<div class="flex gap-1"><button class="flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs font-semibold bg-indigo-600 text-white">Inbox <span class="text-[10px] font-bold px-1.5 py-0.5 rounded-full bg-indigo-500">12</span></button></div>

⊟

Vertical Tabs

Tabs

Sidebar-style vertical tabs layout.

General

Configure your general preferences here.

<div class="flex gap-3"><div class="flex flex-col gap-1 w-28"><button class="text-left px-3 py-2 rounded-xl text-xs font-semibold bg-indigo-600 text-white">General</button><button class="text-left px-3 py-2 rounded-xl text-xs font-semibold text-zinc-600 hover:bg-white">Security</button></div><div class="flex-1 bg-white rounded-xl p-3 border border-zinc-200"><p class="text-xs font-bold text-zinc-800">General</p></div></div>

💡

Top Tooltip

Tooltips

Tooltip appearing above the trigger element.

<div class="relative inline-block"><button class="px-4 py-2 rounded-xl bg-zinc-100 text-zinc-700 text-xs font-semibold">Hover me</button><div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-zinc-900 text-white text-[11px] font-medium rounded-lg whitespace-nowrap shadow-xl">This is a tooltip!<div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-zinc-900"></div></div></div>

💡

Bottom Tooltip

Tooltips

Tooltip appearing below the trigger element.

<div class="relative inline-block"><button class="px-4 py-2 rounded-xl bg-indigo-600 text-white text-xs font-semibold">Save</button><div class="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-3 py-1.5 bg-zinc-800 text-white text-[11px] font-medium rounded-lg whitespace-nowrap shadow-xl">Ctrl+S to save<div class="absolute bottom-full left-1/2 -translate-x-1/2 border-4 border-transparent border-b-zinc-800"></div></div></div>

💡

Colored Tooltips

Tooltips

Tooltips in brand colors for different actions.

<div class="relative"><button class="px-3 py-1.5 rounded-xl text-xs font-semibold bg-indigo-600 text-white">Copy</button><div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2.5 py-1 rounded-lg text-[10px] font-medium whitespace-nowrap bg-indigo-600 text-white shadow-lg">Copied to clipboard!</div></div>

💡

Rich Tooltip

Tooltips

Tooltip with title, body, and keyboard shortcut.

<div class="w-44 bg-zinc-900 text-white rounded-xl p-3 shadow-xl"><p class="text-[11px] font-bold mb-0.5">Bold</p><p class="text-[10px] text-zinc-400">Makes selected text bold.</p><div class="flex items-center gap-1 mt-2"><kbd class="px-1.5 py-0.5 bg-zinc-700 rounded text-[9px] font-mono">Ctrl</kbd><span class="text-[9px] text-zinc-500">+</span><kbd class="px-1.5 py-0.5 bg-zinc-700 rounded text-[9px] font-mono">B</kbd></div></div>

💡

Side Tooltips

Tooltips

Left and right side positioned tooltips.

<div class="relative inline-block"><button class="px-3 py-2 rounded-xl bg-zinc-100 text-xs font-semibold">← Left</button><div class="absolute top-1/2 -translate-y-1/2 right-full mr-2 px-2.5 py-1.5 bg-zinc-900 text-white text-[11px] rounded-lg whitespace-nowrap shadow-xl">Left tooltip<div class="absolute left-full top-1/2 -translate-y-1/2 border-4 border-transparent border-l-zinc-900"></div></div></div>

▶

Video Player UI

Videos

Custom video player interface with controls.

▶

Building with React 2025

1:24

4:12

<div class="w-64 rounded-2xl overflow-hidden bg-zinc-800 shadow-xl"><div class="relative h-32 bg-gradient-to-br from-indigo-600 to-violet-700 flex items-center justify-center cursor-pointer"><div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center text-white text-xl">▶</div></div><div class="px-3 py-2.5"><p class="text-white text-xs font-semibold">Building with React 2025</p></div></div>

▶

Video Playlist

Videos

Playlist with active video highlighted.

<div class="w-64 space-y-1.5"><button class="w-full flex items-center gap-3 p-2.5 rounded-xl bg-indigo-50 border border-indigo-200"><div class="w-10 h-7 rounded-lg bg-gradient-to-r from-indigo-500 to-violet-600 flex items-center justify-center text-white text-[10px]">▶</div><div class="flex-1 text-left"><p class="text-xs font-semibold text-indigo-700">Intro to React</p><p class="text-[10px] text-zinc-400">4:32</p></div></button></div>

▶

Shorts / Reels

Videos

Vertical short-form video card layout.

▶

React Tips

@devjane · 124K

▶

UI Tricks

@uxbob · 89K

▶

CSS Magic

@cssking · 210K

<div class="w-20 h-32 rounded-2xl bg-gradient-to-b from-indigo-500 to-violet-700 relative overflow-hidden cursor-pointer group"><div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2"><p class="text-[9px] text-white font-bold">React Tips</p><p class="text-[8px] text-white/70">@devjane · 124K</p></div></div>

▶

Hover Preview

Videos

Video thumbnail that shows duration on hover.

3:24

7:12

2:05

<div class="relative w-20 h-14 rounded-xl bg-gradient-to-br from-indigo-400 to-violet-500 cursor-pointer hover:scale-105 hover:shadow-lg transition-transform"><span class="absolute bottom-1 right-1 bg-black/70 text-white text-[9px] font-bold rounded px-1 py-0.5">3:24</span></div>

▶

Channel Card

Videos

Creator/channel card with subscriber count.

Jane Dev

@janedev · 24.5K subscribers

<div class="w-56 bg-white rounded-2xl border border-zinc-100 shadow-sm overflow-hidden"><div class="h-16 bg-gradient-to-r from-indigo-500 to-violet-600"></div><div class="px-4 pb-4"><div class="-mt-6 mb-2"><div class="w-12 h-12 rounded-full bg-gradient-to-br from-rose-400 to-pink-500 border-2 border-white flex items-center justify-center text-white font-extrabold text-sm">JD</div></div><p class="text-sm font-bold text-zinc-900">Jane Dev</p></div></div>

401+ components — completely free

Copy-paste into any project. Tailwind + plain CSS. No attribution required.

✓ No account✓ No watermark✓ Commercial OK✓ MIT license

Task	Due	Priority
Homepage Redesign	Apr 20	High
API Integration	Apr 25	Medium
Mobile App	May 1	High
Analytics Dashboard	May 10	Low