291+ Production-Ready Components · Free Forever

CSS UI Component Library

Live interactive previews with Tailwind & plain CSS code. Copy-paste into any project — no signup, no dependencies.

⊞

291+

Components

🗂️

All Components

291 components

✏️Forms & Inputs

Buttons

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>

Link copied to clipboard!

✏️Forms & Inputs

Button Sizes

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>

Link copied to clipboard!

⚡Feedback

Alerts

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>

Link copied to clipboard!

⚡Feedback

Badges & Tags

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>

Link copied to clipboard!

📊Display

Avatars

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>

Link copied to clipboard!

📊Display

Cards

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>

Link copied to clipboard!

📊Display

Stat Card

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>

Link copied to clipboard!

🧭Navigation

Breadcrumb

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>

Link copied to clipboard!

🧭Navigation

Tabs

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>

Link copied to clipboard!

🧭Navigation

Pagination

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>

Link copied to clipboard!

⚡Feedback

Progress Bars

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>

Link copied to clipboard!

⚡Feedback

Spinners

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>

Link copied to clipboard!

⚡Feedback

Skeleton Loader

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>

Link copied to clipboard!

✏️Forms & Inputs

Text Input

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>

Link copied to clipboard!

✏️Forms & Inputs

Select Dropdown

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>

Link copied to clipboard!

✏️Forms & Inputs

Toggle Switch

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>

Link copied to clipboard!

✏️Forms & Inputs

Checkbox & Radio

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>

Link copied to clipboard!

📊Display

Data Table

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>

Link copied to clipboard!

🪟Overlay

Modal Dialog

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>

Link copied to clipboard!

🪟Overlay

Dropdown Menu

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>

Link copied to clipboard!

🪟Overlay

Tooltip

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>

Link copied to clipboard!

📊Display

Accordion

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>

Link copied to clipboard!

📊Display

Timeline

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>

Link copied to clipboard!

⚡Feedback

Toast Notification

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>

Link copied to clipboard!

🧭Navigation

Stepper

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>

Link copied to clipboard!

✏️Forms & Inputs

Search Bar

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>

Link copied to clipboard!

📊Display

Notification Bell

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>

Link copied to clipboard!

📊Display

List Group

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>

Link copied to clipboard!

✏️Forms & Inputs

Input Group

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>

Link copied to clipboard!

✏️Forms & Inputs

Button Group

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>

Link copied to clipboard!

📊Display

Carousel / Slider

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>

Link copied to clipboard!

📊Display

Ribbon / Badge Cards

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>

Link copied to clipboard!

🪟Overlay

Popover

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>

Link copied to clipboard!

✏️Forms & Inputs

Range Slider

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>

Link copied to clipboard!

✏️Forms & Inputs

Star Rating

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>

Link copied to clipboard!

✏️Forms & Inputs

Tag Input

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>

Link copied to clipboard!

✏️Forms & Inputs

File Upload

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>

Link copied to clipboard!

✏️Forms & Inputs

Textarea

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>

Link copied to clipboard!

📊Display

Kanban Board

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>

Link copied to clipboard!

📊Display

Chat Bubbles

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>

Link copied to clipboard!

📊Display

Pricing Card

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>

Link copied to clipboard!

🧭Navigation

Navbar

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>

Link copied to clipboard!

🧭Navigation

Sidebar

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>

Link copied to clipboard!

▦Layout

Divider

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>

Link copied to clipboard!

📊Display

Code Snippet

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>

Link copied to clipboard!

📊Display

Image Gallery

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>

Link copied to clipboard!

📊Display

Video Card

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>

Link copied to clipboard!

📊Display

Empty State

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 copied to clipboard!

📊Display

Link Styles

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>

Link copied to clipboard!

📊Display

Notification Panel

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>

Link copied to clipboard!

📊Display

FAQ Section

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>

Link copied to clipboard!

📊Display

Profile Card

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>

Link copied to clipboard!

✏️Forms & Inputs

Floating Label Input

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>

Link copied to clipboard!

✏️Forms & Inputs

OTP / Verification Code

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>

Link copied to clipboard!

✏️Forms & Inputs

Password Strength

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>

Link copied to clipboard!

✏️Forms & Inputs

Number Stepper

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>

Link copied to clipboard!

✏️Forms & Inputs

Color Picker Input

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>

Link copied to clipboard!

✏️Forms & Inputs

Phone Number Input

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>

Link copied to clipboard!

✏️Forms & Inputs

Date & Date Range

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>

Link copied to clipboard!

✏️Forms & Inputs

Multi-Select

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>

Link copied to clipboard!

✏️Forms & Inputs

Credit Card Form

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>

Link copied to clipboard!

✏️Forms & Inputs

Switch Group

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>

Link copied to clipboard!

📊Display

Donut Chart

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>

Link copied to clipboard!

📊Display

Bar Chart

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>

Link copied to clipboard!

📊Display

Testimonial Card

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>

Link copied to clipboard!

📊Display

Social Feed Post

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>

Link copied to clipboard!

📊Display

Comment Thread

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>

Link copied to clipboard!

📊Display

File Cards

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>

Link copied to clipboard!

📊Display

Comparison Table

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>

Link copied to clipboard!

📊Display

Team Card Grid

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>

Link copied to clipboard!

📊Display

Order Summary

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>

Link copied to clipboard!

📊Display

Metric + Sparkline

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>

Link copied to clipboard!

📊Display

Activity Heatmap

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>

Link copied to clipboard!

📊Display

Blockquote Styles

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>

Link copied to clipboard!

📊Display

Image Overlay Card

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>

Link copied to clipboard!

🧭Navigation

Bottom 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>

Link copied to clipboard!

🧭Navigation

Drawer / Side Panel

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>

Link copied to clipboard!

🧭Navigation

Command Palette

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>

Link copied to clipboard!

🧭Navigation

Floating Action Button

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>

Link copied to clipboard!

🧭Navigation

Back to Top

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>

Link copied to clipboard!

⚡Feedback

Circular Progress

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>

Link copied to clipboard!

⚡Feedback

Status Banner

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>

Link copied to clipboard!

⚡Feedback

Confirm Dialog

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>

Link copied to clipboard!

⚡Feedback

Loading Overlay

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>

Link copied to clipboard!

⚡Feedback

Multi-Step Progress

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>

Link copied to clipboard!

🪟Overlay

Context Menu

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>

Link copied to clipboard!

🪟Overlay

Bottom Sheet

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>

Link copied to clipboard!

🪟Overlay

Image Lightbox

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>

Link copied to clipboard!

🪟Overlay

Detail Side Panel

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>

Link copied to clipboard!

🪟Overlay

Cookie Banner

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>

Link copied to clipboard!

▦Layout

Hero Section

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>

Link copied to clipboard!

▦Layout

Feature Cards

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>

Link copied to clipboard!

▦Layout

CTA Banner

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>

Link copied to clipboard!

▦Layout

Footer

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>

Link copied to clipboard!

▦Layout

Grid System

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>

Link copied to clipboard!

🧭Navigation

Breadcrumb with Icons

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>

Link copied to clipboard!

📊Display

Timeline

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>

Link copied to clipboard!

⚡Feedback

Skeleton Loader

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>

Link copied to clipboard!

📊Display

Avatar Group

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>

Link copied to clipboard!

🧭Navigation

Split Button

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>

Link copied to clipboard!

✏️Forms & Inputs

File Upload Dropzone

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>

Link copied to clipboard!

✏️Forms & Inputs

Inline Edit

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>

Link copied to clipboard!

📊Display

Sortable Data Table

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>

Link copied to clipboard!

🧭Navigation

Vertical Stepper

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>

Link copied to clipboard!

📊Display

KPI Card Group

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>

Link copied to clipboard!

📊Display

Color Swatch Palette

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>

Link copied to clipboard!

✏️Forms & Inputs

Chip / Tag Input

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>

Link copied to clipboard!

⚡Feedback

Progress Ring

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>

Link copied to clipboard!

▦Layout

Page Header

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>

Link copied to clipboard!

🪟Overlay

Notification Center

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>

Link copied to clipboard!

📊Display

Media Player

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>

Link copied to clipboard!

📊Display

Pricing Toggle

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>

Link copied to clipboard!

🧭Navigation

Segmented Control

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>

Link copied to clipboard!

✏️Forms & Inputs

Rich Text Toolbar

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>

Link copied to clipboard!

✏️Forms & Inputs

Autocomplete Input

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>

Link copied to clipboard!

✏️Forms & Inputs

Transfer List

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>

Link copied to clipboard!

📊Display

Activity Feed

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>

Link copied to clipboard!

📊Display

Leaderboard

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>

Link copied to clipboard!

📊Display

Gauge Meter

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>

Link copied to clipboard!

📊Display

Radar / Spider Chart

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>

Link copied to clipboard!

📊Display

User / Profile Card

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>

Link copied to clipboard!

📊Display

Gantt Chart

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>

Link copied to clipboard!

🧭Navigation

Mega Menu

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>

Link copied to clipboard!

🧭Navigation

macOS Dock

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>

Link copied to clipboard!

✏️Forms & Inputs

Survey / NPS Rating

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>

Link copied to clipboard!

📊Display

Typing Indicator

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>

Link copied to clipboard!

⚡Feedback

Upload Progress

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>

Link copied to clipboard!

🪟Overlay

Popover Card

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>

Link copied to clipboard!

🪟Overlay

Global Search Modal

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>

Link copied to clipboard!

▦Layout

Masonry Grid

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>

Link copied to clipboard!

▦Layout

Split Pane Editor

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>

Link copied to clipboard!

📊Display

Sticky Header Table

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>

Link copied to clipboard!

📊Display

Word Cloud / Tag Cloud

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>

Link copied to clipboard!

🧭Navigation

Floating Action Menu

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>

Link copied to clipboard!

🪟Overlay

Command Palette

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>

Link copied to clipboard!

🧭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>

Link copied to clipboard!

📊Display

Invoice Table

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>

Link copied to clipboard!

🧭Navigation

Scroll Spy Nav

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>

Link copied to clipboard!

⚡Feedback

Announcement Banner

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>

Link copied to clipboard!

📊Display

Permission / Role Gate

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>

Link copied to clipboard!

✏️Forms & Inputs

Drag & Drop Sortable

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>

Link copied to clipboard!

📊Display

Animated Counter

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>

Link copied to clipboard!

📊Display

Keyboard Shortcut Badges

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>

Link copied to clipboard!

✏️Forms & Inputs

OAuth / SSO Buttons

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>

Link copied to clipboard!

⚡Feedback

Empty State Variants

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>

Link copied to clipboard!

◧Aside Nav

Dashboard Sidebar — Minimal

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>

Link copied to clipboard!

◧Aside Nav

Dashboard Sidebar — Grouped

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>

Link copied to clipboard!

◧Aside Nav

Dashboard Sidebar — Dark Collapsible

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>

Link copied to clipboard!

◧Aside Nav

eCommerce Admin Sidebar

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>

Link copied to clipboard!

◧Aside Nav

eCommerce Store Category Sidebar

Storefront category filter sidebar with product counts and search.

eCommerce Catalog Tree Sidebar

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>

Link copied to clipboard!

◧Aside Nav

Analytics Sidebar

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>

Link copied to clipboard!

◧Aside Nav

Analytics Metrics 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>

Link copied to clipboard!

◧Aside Nav

Analytics Reports Sidebar

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>

Link copied to clipboard!

◧Aside Nav

Marketing Hub Sidebar

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>

Link copied to clipboard!

◧Aside Nav

Campaign Manager Sidebar

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>

Link copied to clipboard!

◧Aside Nav

Marketing Channels Sidebar

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>

Link copied to clipboard!

◧Aside Nav

CRM Sidebar

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>

Link copied to clipboard!

◧Aside Nav

CRM Pipeline Sidebar

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>

Link copied to clipboard!

◧Aside Nav

CRM Contacts Filter Sidebar

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>

Link copied to clipboard!

◧Aside Nav

Trading App Sidebar

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>

Link copied to clipboard!

◧Aside Nav

Stock Portfolio Sidebar

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>

Link copied to clipboard!

◧Aside Nav

Watchlist Sidebar

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>

Link copied to clipboard!

◧Aside Nav

SaaS App Sidebar

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>

Link copied to clipboard!

◧Aside Nav

SaaS Settings Sidebar

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>

Link copied to clipboard!

◧Aside Nav

SaaS Admin Panel Sidebar

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>

Link copied to clipboard!

◧Aside Nav

Logistics Sidebar

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>

Link copied to clipboard!

◧Aside Nav

Shipments Status Sidebar

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>

Link copied to clipboard!

◧Aside Nav

Fleet Management Sidebar

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>

Link copied to clipboard!

✦AI Tools

AI Studio Sidebar

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>

Link copied to clipboard!

✦AI Tools

AI Text Generator Sidebar

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>

Link copied to clipboard!

✦AI Tools

AI Image Generator Sidebar

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>

Link copied to clipboard!

✦AI Tools

AI Code Generator Sidebar

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>

Link copied to clipboard!

✦AI Tools

AI Video Generator Sidebar

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>

Link copied to clipboard!

✦AI Tools

AI Generation History Sidebar

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>

Link copied to clipboard!

✦AI Tools

AI Model Selection Sidebar

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>

Link copied to clipboard!

✦AI Tools

AI Saved Prompts Sidebar

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>

Link copied to clipboard!

✦AI Tools

AI Settings Sidebar

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>

Link copied to clipboard!

🛍️eCommerce

eCommerce Full Sidebar

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>

Link copied to clipboard!

🛍️eCommerce

Products Filter Sidebar

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>

Link copied to clipboard!

🛍️eCommerce

Add Product Stepper Sidebar

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>

Link copied to clipboard!

🛍️eCommerce

Billing Sidebar

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>

Link copied to clipboard!

🛍️eCommerce

Invoices List Sidebar

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>

Link copied to clipboard!

🛍️eCommerce

Single Invoice Detail Sidebar

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>

Link copied to clipboard!

🛍️eCommerce

Create Invoice Stepper Sidebar

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>

Link copied to clipboard!

🛍️eCommerce

Transactions Sidebar

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>

Link copied to clipboard!

🛍️eCommerce

Single Transaction Sidebar

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>

Link copied to clipboard!

🛍️eCommerce

Orders Status Sidebar

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>

Link copied to clipboard!

🛍️eCommerce

Customers Sidebar

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>

Link copied to clipboard!

🛍️eCommerce

Store Analytics Sidebar

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

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>

Link copied to clipboard!

📅Calendar

Mini Calendar Picker Sidebar

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>

Link copied to clipboard!

📅Calendar

Upcoming Events Sidebar

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>

Link copied to clipboard!

📅Calendar

Calendar Categories Sidebar

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>

Link copied to clipboard!

📅Calendar

Day Schedule Sidebar

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>

Link copied to clipboard!

📅Calendar

Event Invites Sidebar

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>

Link copied to clipboard!

📅Calendar

Reminders Sidebar

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>

Link copied to clipboard!

📅Calendar

Calendar Search Sidebar

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>

Link copied to clipboard!

📈Charts

Line Chart

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>

Link copied to clipboard!

📈Charts

Bar Chart

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>

Link copied to clipboard!

📈Charts

Horizontal Bar Chart

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>

Link copied to clipboard!

📈Charts

Area Chart

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>

Link copied to clipboard!

📈Charts

Multi-Line Chart

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>

Link copied to clipboard!

📈Charts

Pie Chart

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>

Link copied to clipboard!

📈Charts

Donut Chart

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>

Link copied to clipboard!

📈Charts

Stacked Bar Chart

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>

Link copied to clipboard!

📈Charts

Sparklines Row

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>

Link copied to clipboard!

📈Charts

Candlestick Chart

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>

Link copied to clipboard!

📈Charts

Stock Area Chart

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>

Link copied to clipboard!

📈Charts

Currency Rate Board

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>

Link copied to clipboard!

📈Charts

Gauge / Meter Chart

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>

Link copied to clipboard!

📈Charts

Activity Heatmap

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>

Link copied to clipboard!

📈Charts

Funnel Chart

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>

Link copied to clipboard!

📈Charts

Radial Bar Chart

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>

Link copied to clipboard!

📈Charts

Bubble Chart

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>

Link copied to clipboard!

📈Charts

Histogram

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>

Link copied to clipboard!

⊟Tables

Basic Table

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>

Link copied to clipboard!

⊟Tables

Striped Table

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>

Link copied to clipboard!

⊟Tables

Bordered Table

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>

Link copied to clipboard!

⊟Tables

Compact Dense Table

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>

Link copied to clipboard!

⊟Tables

Data Table with Pagination

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>

Link copied to clipboard!

⊟Tables

Table with Row Actions

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>

Link copied to clipboard!

⊟Tables

Status Column Table

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>

Link copied to clipboard!

⊟Tables

Selectable Table

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>

Link copied to clipboard!

⊟Tables

Expandable Row Table

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>

Link copied to clipboard!

🔔Alerts

Success Alert

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>

Link copied to clipboard!

🔔Alerts

Alert Variants

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>

Link copied to clipboard!

🔔Alerts

Alert Banner

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>

Link copied to clipboard!

👤Avatars

Avatar Sizes

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>

Link copied to clipboard!

👤Avatars

Avatar Group

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>

Link copied to clipboard!

👤Avatars

Avatar with Status

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>

Link copied to clipboard!

🏷️Badge

Basic Badges

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>

Link copied to clipboard!

🏷️Badge

Dot Badges

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>

Link copied to clipboard!

🏷️Badge

Outlined Badges

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>

Link copied to clipboard!

›Breadcrumb

Basic 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>

Link copied to clipboard!

›Breadcrumb

Breadcrumb with Icons

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>

Link copied to clipboard!

›Breadcrumb

Pill 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>

Link copied to clipboard!

⬡Button Variants

Ghost Buttons

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>

Link copied to clipboard!

⬡Button Variants

Icon Buttons

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>

Link copied to clipboard!

⬡Button Variants

Gradient Buttons

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>

Link copied to clipboard!

⊞Button Groups

Button Group

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>

Link copied to clipboard!

⊞Button Groups

Radio Button Group

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>

Link copied to clipboard!

⊞Button Groups

Icon Button Group

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>

Link copied to clipboard!

▭Cards

Profile Card

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>

Link copied to clipboard!

▭Cards

Stat Cards Row

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>

Link copied to clipboard!

▭Cards

Pricing Card

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>

Link copied to clipboard!

⟳Carousel

Basic 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>

Link copied to clipboard!

⟳Carousel

Card 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>

Link copied to clipboard!

⟳Carousel

Image 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>

Link copied to clipboard!

▾Dropdowns

Basic Dropdown

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>

Link copied to clipboard!

▾Dropdowns

Searchable Dropdown

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>

Link copied to clipboard!

▾Dropdowns

Multi-Select Dropdown

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>

Link copied to clipboard!

🖼️Images

Image Grid

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>

Link copied to clipboard!

🖼️Images

Image with Caption

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>

Link copied to clipboard!

🖼️Images

Gallery with Lightbox

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 copied to clipboard!

🔗Links

Link Styles

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>

Link copied to clipboard!

🔗Links

Navigation 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>

Link copied to clipboard!

🔗Links

CTA 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>

Link copied to clipboard!

≡List

Basic 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>

Link copied to clipboard!

≡List

Icon 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>

Link copied to clipboard!

≡List

List Group

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>

Link copied to clipboard!

🪟Modals

Confirm Dialog

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>

Link copied to clipboard!

🪟Modals

Side Drawer

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>

Link copied to clipboard!

🪟Modals

Form Modal

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>

Link copied to clipboard!

🔔Notifications

Toast 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>

Link copied to clipboard!

🔔Notifications

Notification Banner

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>

Link copied to clipboard!

🔔Notifications

Notification Feed

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>

Link copied to clipboard!

⟨⟩Pagination

Basic 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>

Link copied to clipboard!

⟨⟩Pagination

Simple 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>

Link copied to clipboard!

⟨⟩Pagination

Dot 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>

Link copied to clipboard!

💬Popovers

Basic Popover

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>

Link copied to clipboard!

💬Popovers

Rich Popover

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>

Link copied to clipboard!

💬Popovers

Popover Menu

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>

Link copied to clipboard!

▬Progress Bars

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>

Link copied to clipboard!

▬Progress Bars

Multi-Step Progress

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>

Link copied to clipboard!

▬Progress Bars

Circular Progress

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>

Link copied to clipboard!

🎀Ribbons

Corner Ribbon

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>

Link copied to clipboard!

🎀Ribbons

Banner Ribbon

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>

Link copied to clipboard!

🎀Ribbons

Folded Ribbon Badge

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>

Link copied to clipboard!

⟳Spinners

Spinner Variants

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>

Link copied to clipboard!

⟳Spinners

Labeled 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>

Link copied to clipboard!

⟳Spinners

Loading Overlay

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>

Link copied to clipboard!

⊟Tabs

Pill 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>

Link copied to clipboard!

⊟Tabs

Vertical 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>

Link copied to clipboard!

⊟Tabs

Icon 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>

Link copied to clipboard!

💡Tooltips

Tooltip Variants

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>

Link copied to clipboard!

💡Tooltips

Rich Tooltip

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>

Link copied to clipboard!

💡Tooltips

Dark 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>

Link copied to clipboard!

▶Videos

Video Player UI

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>

Link copied to clipboard!

▶Videos

Video Card

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>

Link copied to clipboard!

▶Videos

Video Grid

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>

Link copied to clipboard!

All 291+ 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