✦ 96 Components

CSS UI Components

Production-ready components with live previews. Copy Tailwind or plain CSS — no framework lock-in.

96 components

Buttons

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

Forms & Inputs

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

Button Sizes

XS through XL button sizes for every context.

Forms & Inputs

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

Alerts

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

Feedback

Success: Action completed successfully.

Warning: Review before proceeding.

Error: Something went wrong.

Info: Here is some information.

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

Badges & Tags

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

Feedback

NewActivePendingRejectedBetaDefaultOutline Live

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

Avatars

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

Display

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

Cards

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

Display

🚀

Getting Started

Build beautiful interfaces with our component library.

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

Stat Card

KPI metric cards with trend indicators — common in dashboards.

Display

Total Revenue

$48,295

↑ +12.5%

Active Users

3,842

↓ -2.1%

Orders

1,293

↑ +8.3%

Conversion

3.24%

↑ +0.4%

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

Breadcrumb

Navigation breadcrumb trail with separator and current page.

Navigation

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

Tabs

Underline-style tab navigation with active state.

Navigation

Content for Overview tab.

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

Pagination

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

Navigation

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

Progress Bars

Linear progress bars in multiple color states.

Feedback

Uploading...72%

Success100%

Warning48%

Error30%

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

Spinners

Border spinner and bouncing dots in multiple colors.

Feedback

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

Skeleton Loader

Content placeholder shimmer animations for cards and lists.

Feedback

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

Text Input

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

Forms & Inputs

This field is required.

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

Select Dropdown

Native select with custom chevron icon styling.

Forms & Inputs

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

Toggle Switch

On/off toggle with label and color variants.

Forms & Inputs

NotificationsDark ModeAuto-save

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

Checkbox & Radio

Custom checkbox groups and radio button groups.

Forms & Inputs

aDesignbDevelopmentcMarketing

Design

Development

Marketing

Monthly

Yearly

Lifetime

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

Data Table

Striped data table with status badges and action buttons.

Display

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

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

Modal Dialog

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

Overlay

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

Dropdown Menu

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

Overlay

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

Tooltip

Hover tooltips in 4 directions with smooth fade.

Overlay

Tooltip on Top

Tooltip on Bottom

Tooltip on Left

Tooltip on Right

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

Accordion

Collapsible accordion with smooth toggle animation.

Display

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

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

Timeline

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

Display

🚀

Project Launched

2 hours ago

Initial version deployed to production.

✅

PR Merged

5 hours ago

Feature branch merged into main.

💬

Review Requested

1 day ago

Code review requested from team.

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

Toast Notification

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

Feedback

✅

Saved!

Your changes have been saved.

❌

Error

Something went wrong. Try again.

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

Stepper

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

Navigation

Account

Personal

Payment

Review

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

Search Bar

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

Forms & Inputs

⌘K

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

Notification Bell

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

Display

99+

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

List Group

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

Display

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

Input Group

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

Forms & Inputs

https://

$USD

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

Button Group

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

Forms & Inputs

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

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

Carousel / Slider

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

Display

🚀

Launch Faster

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

Ribbon / Badge Cards

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

Display

Popular

⭐

Premium Card

Special offer

Sale

🎉

Premium Card

Special offer

New

✨

Premium Card

Special offer

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

Popover

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

Overlay

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

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

Range Slider

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

Forms & Inputs

Volume60%

Brightness35%

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

Star Rating

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

Forms & Inputs

Average (3/5)

5★

68%

4★

20%

3★

2★

1★

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

Tag Input

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

Forms & Inputs

ReactTypeScript

Press Enter or comma to add a tag

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

File Upload

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

Forms & Inputs

📂

Drop files here

or browse files

PNG, JPG, PDF up to 10MB

📄

design-specs.pdf

75% · 2.4 MB

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

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

Textarea

Styled multiline textarea with character counter variant.

Forms & Inputs

0 / 200

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

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

Kanban Board

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

Display

To Do2

Design mockups

Write tests

In Progress2

Build API

Auth flow

Done2

Setup repo

CI/CD

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

Chat Bubbles

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

Display

Alex Johnson

● Online

Hey! How's the project going?

10:21 AM

Going great! Just pushed the latest build 🚀

10:22 AM

Awesome! Let me review the PR.

10:23 AM

Sure, link is in Slack 👍

10:24 AM

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

Pricing Card

Pricing comparison cards with features list and highlighted popular plan.

Display

Starter

$0/mo

For individuals

✓5 projects
✓2GB storage
✓Email support

Pro

$29/mo

For teams

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

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

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

Navbar

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

Navigation

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

Sidebar

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

Navigation

Admin Panel

Dashboard

Welcome back!

—

Users

—

Revenue

—

Orders

—

Tasks

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

Divider

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

Layout

✦ Section Title

CONTINUE WITH

Vertical Divider

Used for callouts and quotes

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

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

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

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

Code Snippet

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

Display

index.tsx

TypeScript

import { useState } from 'react'

function Counter() {

const [count, setCount] = useState(0)

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

}

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

Image Gallery

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

Display

🖼

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

Video Card

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

Display

▶

4:32

Getting Started with Tailwind CSS

TailAdmin · 12K views

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

Empty State

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

Display

📭

No results found

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

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

Link Styles

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

Display

Default link Underline style Border bottom

Filled link →↗ External Muted link

#React #TypeScript #NextJS #TailwindCSS

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

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

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

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

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

Notification Panel

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

Display

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

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

FAQ Section

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

Display

FAQ

Frequently Asked

Is it free to use?

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

Do I need a backend?

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

Can I customize themes?

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

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

Profile Card

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

Display

Jane Doe

Senior Product Designer

142

Posts

8.2K

Followers

234

Following

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

Floating Label Input

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

Forms & Inputs

Email address

Full name

Company

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

OTP / Verification Code

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

Forms & Inputs

Enter verification code

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

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

Password Strength

Password field with animated strength meter and requirement checklist.

Forms & Inputs

○Uppercase

○Number

○Special char

○8+ chars

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

Number Stepper

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

Forms & Inputs

Adults

Children

Rooms

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

Color Picker Input

Color swatch + HEX input with preset palette swatches.

Forms & Inputs

HEX

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

Phone Number Input

Country code selector + phone number field combined input.

Forms & Inputs

We'll send a verification code to this number

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

Date & Date Range

Single date input and date range picker with icon prefix.

Forms & Inputs

📅

→

📅

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

Multi-Select

Dropdown with checkboxes — select multiple options with badge chips.

Forms & Inputs

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

Credit Card Form

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

Forms & Inputs

Credit Card

💳

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

Card Holder

John Doe

Expires

12/26

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

Switch Group

Grouped notification preference toggles with label and sub-label.

Forms & Inputs

Email Notifications

Receive updates via email

Push Notifications

Alerts on your device

SMS Alerts

Text message notifications

Weekly Digest

Summary every Monday

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

Donut Chart

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

Display

Design35%

Dev45%

Marketing20%

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

Bar Chart

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

Display

MonTueWedThuFriSatSun

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

Testimonial Card

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

Display

★★★★★

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

Sarah Miller

CTO at TechCorp

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

Social Feed Post

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

Display

Jane Doe

2 hours ago · 🌍

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

🎨

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

Comment Thread

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

Display

You

Alex Chen

5m ago

Great component! Love the clean design.

Maria López

12m ago

How do I customize the colors?

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

File Cards

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

Display

🎨

design-system.fig

24.5 MB

📄

report-Q4.pdf

2.1 MB

📊

data-export.xlsx

856 KB

📦

assets.zip

128 MB

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

Comparison Table

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

Display

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

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

Team Card Grid

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

Display

Alex Chen

CEO

Sara Kim

Design

Tom Lee

Engineer

Mia Wang

Marketing

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

Order Summary

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

Display

Order Summary

Pro Plan

×1

$29.00

Extra Seat

×3

$27.00

Storage Add-on

×1

$5.00

Subtotal$61

Tax (10%)$6.10

Total$67.10

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

Metric + Sparkline

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

Display

Revenue

$12,845

+18%

Users

4,291

+6%

Bounce Rate

32.4%

-3%

Sessions

9,832

+12%

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

Activity Heatmap

GitHub-style contribution heatmap grid with color intensity legend.

Display

W13

Less

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

Blockquote Styles

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

Display

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

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

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

Image Overlay Card

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

Display

Mountain Vista

Photography

🔍

New

Sunset Glow

★★★★★

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

Bottom Navigation

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

Navigation

App Content

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

Drawer / Side Panel

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

Navigation

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

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

Command Palette

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

Navigation

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

Floating Action Button

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

Navigation

App Background

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

Back to Top

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

Navigation

Scroll-triggered back-to-top button

Fixed bottom-right after scrolling 300px

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

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

Circular Progress

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

Feedback

75%

Storage

48%

CPU

92%

Memory

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

Status Banner

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

Feedback

📢

System maintenance on Dec 31 at 2AM UTC.

✅

All systems are operational.

⚠️

Degraded performance on API v2.

🚨

Critical incident in progress. Team notified.

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

Confirm Dialog

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

Feedback

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

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

Loading Overlay

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

Feedback

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

Multi-Step Progress

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

Feedback

✓

Details

Payment

Review

Done

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

Context Menu

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

Overlay

Right-click anywhere here

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

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

Bottom Sheet

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

Overlay

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

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

Image Lightbox

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

Overlay

🏔️

🌸

🌅

🌊

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

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

Detail Side Panel

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

Overlay

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

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

Cookie Banner

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

Overlay

🍪

We use cookies

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

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

Hero Section

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

Layout

✦ New release v2.0

Build faster with
beautiful UI

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

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

Feature Cards

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

Layout

⚡

Lightning Fast

Optimized for speed.

🔒

Secure

Built-in security.

📱

Responsive

Works everywhere.

🎨

Customizable

Fully themeable.

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

CTA Banner

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

Layout

Start free today

No credit card required.

Upgrade to Pro

Unlock all features.

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

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

Footer

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

Layout

AppName

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

Product

Features

Pricing

Changelog

Company

About

Blog

Careers

Legal

Privacy

Terms

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

Grid System

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

Layout

1/2

1/3

1/4

1/2

1/4

3/4

Full

Responsive grid system demo

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

Breadcrumb with Icons

Icon-prefixed breadcrumb and pill-style breadcrumb variants.

Navigation

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