Elements

UI components or custom elements with just a class or two.

These are common, non-complex UI elements that can be done with mostly a single class and minimal html. You shouldn't have to bring in a whole JavaScript framework component for the things many of us do. It can be so much more simple.

.carousel

Horizontal scroll with CSS scroll-snap (no JavaScript required)

.carouselSlide 1
Slide 2
Slide 3
Slide 4
Slide 5
Code <div class="carousel" style="background: var(--fg-05); padding: 1rem">
  <div class="box" style="min-width: 250px; height: 200px">Slide 1</div>
  <div class="box" style="min-width: 250px; height: 200px">Slide 2</div>
  <div class="box" style="min-width: 250px; height: 200px">Slide 3</div>
  <div class="box" style="min-width: 250px; height: 200px">Slide 4</div>
  <div class="box" style="min-width: 250px; height: 200px">Slide 5</div>
</div>

.reel

Vertical scroll with CSS scroll-snap (customizable height with --reel-height)

Reel LayoutPanel 1
Panel 2
Panel 3
Panel 4
Code <div class="reel" style="--reel-height: 300px;">
  <div class="box" style="min-height: 150px">Panel 1</div>
  <div class="box" style="min-height: 150px">Panel 2</div>
  <div class="box" style="min-height: 150px">Panel 3</div>
  <div class="box" style="min-height: 150px">Panel 4</div>
</div>

Boxes

.box
Simple

.box.glow
Subtle

.box.semi-gloss
Semi Gloss

.box.ghost
Ghost

.box.invisible
Invisible

You can make a custom box with CSS variables box-shadow: var(--box), var(--shadow-5);

Card

Card containers for grouped content, media, or calls to action.

Card

Invoice overview

April

Track the current billing cycle and open items at a glance.

$2,480 due on May 1.

Launch checklist

Design

Finalize assets, confirm handoff, and prepare the launch brief.

Next review: Thursday, 2:00 PM.

Code

<div class="stack" style="max-inline-size: 400px">
  <article class="card">
    <header>
      <h4>Invoice overview</h4>
      <span class="tag">April</span>
    </header>
    <div class="card-body stack">
      <p>Track the current billing cycle and open items at a glance.</p>
      <p><strong>$2,480</strong> due on May 1.</p>
    </div>
    <footer class="cluster">
      <button class="primary">Pay now</button>
      <button>Download PDF</button>
    </footer>
  </article>

  <article class="card">
    <figure>
      <img
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='540' viewBox='0 0 960 540'%3E%3Crect width='960' height='540' fill='%23e8edf2'/%3E%3Cpath d='M0 360L220 240L420 360L640 200L960 320V540H0Z' fill='%23c9d3de'/%3E%3Ccircle cx='740' cy='160' r='48' fill='%23a6b4c3'/%3E%3Ctext x='60' y='90' font-family='sans-serif' font-size='32' fill='%23606a74'%3EProject cover%3C/text%3E%3C/svg%3E"
        alt="Abstract landscape illustration"
      />
    </figure>
    <header>
      <h4>Launch checklist</h4>
      <span class="tag muted">Design</span>
    </header>
    <div class="card-body stack">
      <p>Finalize assets, confirm handoff, and prepare the launch brief.</p>
      <p>Next review: Thursday, 2:00 PM.</p>
    </div>
    <footer class="cluster">
      <button>View details</button>
      <button class="ghost">Share</button>
    </footer>
  </article>
</div>

.card.featured

Highlighted card variant with primary border, elevated shadow, and tinted header. Great for pricing tables or any card that needs emphasis.

Featured Card Variant

Free

$0 / month

For side projects and personal sites.

Pro

Popular

$20 / month

For growing teams that need speed and reliability.

Enterprise

Custom

For organizations with advanced compliance needs.

Code

<div class="layout-three-col" style="align-items: stretch;">
  <article class="card stack" style="--gap: 0;">
    <header>
      <h4>Free</h4>
    </header>
    <div class="card-body stack">
      <p><strong class="fs-l">$0</strong> <span class="text-muted">/ month</span></p>
      <p class="text-muted">For side projects and personal sites.</p>
    </div>
    <footer>
      <button class="ghost" style="width: 100%;">Get Started</button>
    </footer>
  </article>

  <article class="card featured stack" style="--gap: 0;">
    <header>
      <h4>Pro</h4>
      <span class="tag">Popular</span>
    </header>
    <div class="card-body stack">
      <p><strong class="fs-l">$20</strong> <span class="text-muted">/ month</span></p>
      <p class="text-muted">For growing teams that need speed and reliability.</p>
    </div>
    <footer>
      <button class="primary" style="width: 100%;">Start Trial</button>
    </footer>
  </article>

  <article class="card stack" style="--gap: 0;">
    <header>
      <h4>Enterprise</h4>
    </header>
    <div class="card-body stack">
      <p><strong class="fs-l">Custom</strong></p>
      <p class="text-muted">For organizations with advanced compliance needs.</p>
    </div>
    <footer>
      <button class="ghost" style="width: 100%;">Contact Sales</button>
    </footer>
  </article>
</div>

.stat-card

Dashboard KPI card with label, big number, and optional change tag. Uses <small> for the label, <strong> for the value, and a .tag for the trend indicator.

Stat CardRevenue $48,250 +12.5%
Active Users 2,420 +8.1%
Conversion 3.6% -0.4%
Code <div class="layout-card" style="--min-card-width: 180px;">
  <div class="stat-card">
    <small>Revenue</small>
    <strong>$48,250</strong>
    <span class="tag" style="--tag-color: var(--green);">+12.5%</span>
  </div>
  <div class="stat-card">
    <small>Active Users</small>
    <strong>2,420</strong>
    <span class="tag" style="--tag-color: var(--green);">+8.1%</span>
  </div>
  <div class="stat-card">
    <small>Conversion</small>
    <strong>3.6%</strong>
    <span class="tag" style="--tag-color: var(--red);">-0.4%</span>
  </div>
</div>

.feature-card

Icon + title + description card for feature grids and marketing pages. Uses .icon for a tinted icon container with primary color background.

Feature Card

Instant Deploys

Push to main and your changes are live in under 8 seconds. No waiting.

Built-in Security

Automatic SSL, DDoS protection, and SOC 2 compliance out of the box.

Real-time Analytics

Monitor response times and error rates with live dashboards.

Code

<div class="layout-three-col">
  <article class="feature-card">
    <span class="icon" aria-hidden="true">&#9889;</span>
    <h4>Instant Deploys</h4>
    <p>Push to main and your changes are live in under 8 seconds. No waiting.</p>
  </article>
  <article class="feature-card">
    <span class="icon" aria-hidden="true">&#128274;</span>
    <h4>Built-in Security</h4>
    <p>Automatic SSL, DDoS protection, and SOC 2 compliance out of the box.</p>
  </article>
  <article class="feature-card">
    <span class="icon" aria-hidden="true">&#128200;</span>
    <h4>Real-time Analytics</h4>
    <p>Monitor response times and error rates with live dashboards.</p>
  </article>
</div>

.avatar

Circular avatar for user images or initials. Supports multiple sizes and optional border.

Avatar Variants    
A BC JD ST XL
 AB  CD
    
Code <div class="stack">
	<!-- Size variants with images -->
	<div class="cluster">
		<span class="avatar xs">
			<img src="https://i.pravatar.cc/150?u=1" alt="User avatar" />
		</span>
		<span class="avatar s">
			<img src="https://i.pravatar.cc/150?u=2" alt="User avatar" />
		</span>
		<span class="avatar">
			<img src="https://i.pravatar.cc/150?u=3" alt="User avatar" />
		</span>
		<span class="avatar l">
			<img src="https://i.pravatar.cc/150?u=4" alt="User avatar" />
		</span>
		<span class="avatar xl">
			<img src="https://i.pravatar.cc/150?u=5" alt="User avatar" />
		</span>
	</div>

	<!-- Initials fallback (no image) -->
	<div class="cluster">
		<span class="avatar xs">A</span>
		<span class="avatar s">BC</span>
		<span class="avatar">JD</span>
		<span class="avatar l">ST</span>
		<span class="avatar xl">XL</span>
	</div>

	<!-- Bordered variant -->
	<div class="cluster">
		<span class="avatar bordered">
			<img src="https://i.pravatar.cc/150?u=6" alt="User avatar" />
		</span>
		<span class="avatar bordered">AB</span>
		<span class="avatar l bordered">
			<img src="https://i.pravatar.cc/150?u=7" alt="User avatar" />
		</span>
		<span class="avatar l bordered">CD</span>
	</div>

	<!-- Row of avatars side by side -->
	<div class="cluster">
		<span class="avatar">
			<img src="https://i.pravatar.cc/150?u=10" alt="Team member" />
		</span>
		<span class="avatar">
			<img src="https://i.pravatar.cc/150?u=11" alt="Team member" />
		</span>
		<span class="avatar">
			<img src="https://i.pravatar.cc/150?u=12" alt="Team member" />
		</span>
		<span class="avatar">
			<img src="https://i.pravatar.cc/150?u=13" alt="Team member" />
		</span>
		<span class="avatar">
			<img src="https://i.pravatar.cc/150?u=14" alt="Team member" />
		</span>
	</div>
</div>

.button

Button styling for links and non-button elements

Button Variants         
         
Code <div class="stack">
  <!-- Default and semantic variants -->
  <div class="cluster">
    <button>Default</button>
    <button class="primary">Primary</button>
    <button class="success">Success</button>
    <button class="warning">Warning</button>
    <button class="error">Error</button>
    <button class="dark">Dark</button>
    <button class="light">Light</button>
    <button class="contrast">Contrast</button>
    <button class="ghost">Ghost</button>
    <button class="minimal">Minimal</button>
  </div>

  <!-- Mini size variants -->
  <div class="cluster">
    <button class="mini">Default</button>
    <button class="mini primary">Primary</button>
    <button class="mini success">Success</button>
    <button class="mini warning">Warning</button>
    <button class="mini error">Error</button>
    <button class="mini dark">Dark</button>
    <button class="mini light">Light</button>
    <button class="mini contrast">Contrast</button>
    <button class="mini ghost">Ghost</button>
    <button class="mini minimal">Minimal</button>
  </div>
</div>

.chip

Selectable pill/tag elements for filters, categories, or multi-select options. Use aria-pressed for accessible toggle state.

Chip Selector   Mobile  Design  Cloud
v1.0 Latest Beta
Code <div class="stack">
  <div class="cluster">
    <button class="chip">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        ><polyline points="16 18 22 12 16 6"></polyline><polyline
          points="8 6 2 12 8 18"
        ></polyline></svg
      >
      Front-End
    </button>
    <button class="chip selected">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        ><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect
          x="2"
          y="14"
          width="20"
          height="8"
          rx="2"
          ry="2"
        ></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line
          x1="6"
          y1="18"
          x2="6.01"
          y2="18"
        ></line></svg
      >
      Back-End
    </button>
    <span class="chip">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        ><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line
          x1="12"
          y1="18"
          x2="12.01"
          y2="18"
        ></line></svg
      >
      Mobile
    </span>
    <span class="chip selected">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        ><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"
        ></circle><line x1="4.93" y1="4.93" x2="9.17" y2="9.17"></line><line
          x1="14.83"
          y1="14.83"
          x2="19.07"
          y2="19.07"
        ></line><line x1="14.83" y1="9.17" x2="19.07" y2="4.93"></line><line
          x1="14.83"
          y1="9.17"
          x2="18.36"
          y2="5.64"
        ></line><line x1="4.93" y1="19.07" x2="9.17" y2="14.83"></line></svg
      >
      Design
    </span>
    <span class="chip">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        ><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg
      >
      Cloud
    </span>
  </div>
  <div class="cluster">
    <span class="chip mini">v1.0</span>
    <span class="chip mini selected">Latest</span>
    <span class="chip mini">Beta</span>
  </div>
</div>

.tag

Subtle category labels with customizable colors. Set --tag-color to any color variable. Works as static labels or interactive links/buttons. Add .muted for neutral text with better contrast.

TagsDefault Category Label
Success Error Warning Info New Hot
 Complete  Blocked  Pending  Tagged
🔥 Hot ✅ Done 🚀 Shipped ⭐ Featured ⚠️ Draft 🆕 New
Success Error Warning Info
JavaScript TypeScript Svelte
Code <div class="stack">
  <!-- Default tags (using --tag-color: var(--primary)) -->
  <div class="cluster">
    <span class="tag">Default</span>
    <span class="tag">Category</span>
    <span class="tag">Label</span>
  </div>

  <!-- Tags with custom colors -->
  <div class="cluster">
    <span class="tag" style="--tag-color: var(--green)">Success</span>
    <span class="tag" style="--tag-color: var(--red)">Error</span>
    <span class="tag" style="--tag-color: var(--orange)">Warning</span>
    <span class="tag" style="--tag-color: var(--purple)">Info</span>
    <span class="tag" style="--tag-color: var(--teal)">New</span>
    <span class="tag" style="--tag-color: var(--pink)">Hot</span>
  </div>

  <!-- Tags with icons -->
  <div class="cluster">
    <span class="tag" style="--tag-color: var(--green)">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        ><polyline points="20 6 9 17 4 12"></polyline></svg
      >
      Complete
    </span>
    <span class="tag" style="--tag-color: var(--red)">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        ><circle cx="12" cy="12" r="10"></circle><line
          x1="15"
          y1="9"
          x2="9"
          y2="15"
        ></line><line x1="9" y1="9" x2="15" y2="15"></line></svg
      >
      Blocked
    </span>
    <span class="tag" style="--tag-color: var(--orange)">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        ><circle cx="12" cy="12" r="10"></circle><line
          x1="12"
          y1="8"
          x2="12"
          y2="12"
        ></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg
      >
      Pending
    </span>
    <span class="tag">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        ><path
          d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"
        ></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg
      >
      Tagged
    </span>
  </div>

  <!-- Tags with emoji -->
  <div class="cluster">
    <span class="tag" style="--tag-color: var(--red)">🔥 Hot</span>
    <span class="tag" style="--tag-color: var(--green)">✅ Done</span>
    <span class="tag" style="--tag-color: var(--purple)">🚀 Shipped</span>
    <span class="tag" style="--tag-color: var(--pink)">⭐ Featured</span>
    <span class="tag" style="--tag-color: var(--orange)">⚠️ Draft</span>
    <span class="tag" style="--tag-color: var(--teal)">🆕 New</span>
  </div>

  <!-- Muted variant - neutral text for better contrast -->
  <div class="cluster">
    <span class="tag muted" style="--tag-color: var(--green)">Success</span>
    <span class="tag muted" style="--tag-color: var(--red)">Error</span>
    <span class="tag muted" style="--tag-color: var(--yellow)">Warning</span>
    <span class="tag muted" style="--tag-color: var(--blue)">Info</span>
  </div>

  <!-- Interactive tags (links and buttons) -->
  <div class="cluster">
    <a href="#javascript" class="tag" style="--tag-color: var(--orange)"
      >JavaScript</a
    >
    <a href="#typescript" class="tag" style="--tag-color: var(--teal)"
      >TypeScript</a
    >
    <a href="#svelte" class="tag" style="--tag-color: var(--red)">Svelte</a>
  </div>
</div>

Native tooltip using HTML popover API and CSS anchor positioning. No JavaScript required. Uses popover="hint" for hover-triggered display. Supports top (default), bottom, left, and right positions.

Tooltip Tooltip on top  Tooltip on bottom  Left side  Right side  This tooltip has more text that wraps nicely.
Code <div class="cluster" style="gap: var(--vs-xl); padding: var(--pad-xxl);">
  <span class="tooltip">
    <button>Top</button>
    <span class="tooltip-content">Tooltip on top</span>
  </span>

  <span class="tooltip bottom">
    <button>Bottom</button>
    <span class="tooltip-content">Tooltip on bottom</span>
  </span>

  <span class="tooltip left">
    <button>Left</button>
    <span class="tooltip-content">Left side</span>
  </span>

  <span class="tooltip right">
    <button>Right</button>
    <span class="tooltip-content">Right side</span>
  </span>

  <span class="tooltip">
    <button>Longer</button>
    <span class="tooltip-content">This tooltip has more text that wraps nicely.</span>
  </span>
</div>

.tabs

Pure CSS tabs using details/summary with CSS Grid and Subgrid. No JavaScript required. Set --tab-count to match your number of tabs (default: 3). Use --n on each details element to position its tab.

Tabs

Overview

Pure CSS tabs using details/summary with CSS Grid and Subgrid. No JavaScript required - the name attribute on details ensures only one tab can be open at a time.

Features

Supports keyboard navigation, works with screen readers, and uses semantic HTML. Each tab panel smoothly animates in.

Usage

Set --tab-count on the container to match your number of tabs. Use --n on each details element to position its tab.

Account

Manage your account settings and preferences.

Security

Update your password and security settings.

Billing

View your billing history and payment methods.

All

Showing all items across all categories.

Active

Showing only active items.

Archived

Showing archived items.

Code

<div class="stack">
  <!-- Default tabs (3 tabs) -->
  <div class="tabs">
    <details name="tabs-default" open style="--n: 1">
      <summary>Overview</summary>
      <div>
        <p>Pure CSS tabs using details/summary with CSS Grid and Subgrid. No JavaScript required - the <code>name</code> attribute on details ensures only one tab can be open at a time.</p>
      </div>
    </details>
    <details name="tabs-default" style="--n: 2">
      <summary>Features</summary>
      <div>
        <p>Supports keyboard navigation, works with screen readers, and uses semantic HTML. Each tab panel smoothly animates in.</p>
      </div>
    </details>
    <details name="tabs-default" style="--n: 3">
      <summary>Usage</summary>
      <div>
        <p>Set <code>--tab-count</code> on the container to match your number of tabs. Use <code>--n</code> on each details element to position its tab.</p>
      </div>
    </details>
  </div>

  <!-- Boxed variant -->
  <div class="tabs boxed">
    <details name="tabs-boxed" open style="--n: 1">
      <summary>Account</summary>
      <div>
        <p>Manage your account settings and preferences.</p>
      </div>
    </details>
    <details name="tabs-boxed" style="--n: 2">
      <summary>Security</summary>
      <div>
        <p>Update your password and security settings.</p>
      </div>
    </details>
    <details name="tabs-boxed" style="--n: 3">
      <summary>Billing</summary>
      <div>
        <p>View your billing history and payment methods.</p>
      </div>
    </details>
  </div>

  <!-- Pill variant -->
  <div class="tabs pill">
    <details name="tabs-pill" open style="--n: 1">
      <summary>All</summary>
      <div>
        <p>Showing all items across all categories.</p>
      </div>
    </details>
    <details name="tabs-pill" style="--n: 2">
      <summary>Active</summary>
      <div>
        <p>Showing only active items.</p>
      </div>
    </details>
    <details name="tabs-pill" style="--n: 3">
      <summary>Archived</summary>
      <div>
        <p>Showing archived items.</p>
      </div>
    </details>
  </div>
</div>

.table

A wrapping div for overflow scrolling, but also generic tables styles defined by default without the wrapping claas.

Hi	Hello	sup	✅ Icon or emoji in this	Yo
Hi	Hello	sup	Some data in this cell that might be a bit long I don't know.	Yo
Hi	Hello	sup	Some data in this cell that might be a bit long I don't know.	Yo
Hi	Hello	sup	Some data in this cell that might be a bit long I don't know.	Yo
Hi	Hello	sup	Some data in this cell that might be a bit long I don't know.	Yo
Hi	Hello	sup	Some data in this cell that might be a bit long I don't know.	Yo
Hi	Hello	sup	Some data in this cell that might be a bit long I don't know.	Yo

.callout

An informational callout

Callout Variants

Use a default callout for neutral notes and context.

Use warning + fill for high-visibility cautions.

Use error callouts for failures and destructive actions.

Use success callouts for completed states and confirmations.

Use ghost when the message should stay subtle.

Add .hard to increase emphasis with a stronger leading edge.

Warning with the hard modifier for extra emphasis.

Callouts can include multiple elements

Use .stack to keep spacing consistent between children.

Code

<div class="stack">
  <div class="callout">
    <p>Use a default callout for neutral notes and context.</p>
  </div>

  <div class="callout warning fill">
    <p>Use warning + fill for high-visibility cautions.</p>
  </div>

  <div class="callout error">
    <p>Use error callouts for failures and destructive actions.</p>
  </div>

  <div class="callout success">
    <p>Use success callouts for completed states and confirmations.</p>
  </div>

  <div class="callout ghost split">
    <p>Use ghost when the message should stay subtle.</p>
    <button class="mini">Action</button>
  </div>

  <div class="callout hard">
    <p>
      Add <code>.hard</code> to increase emphasis with a stronger leading edge.
    </p>
  </div>

  <div class="callout warning hard">
    <p>Warning with the hard modifier for extra emphasis.</p>
  </div>

  <div class="callout success stack">
    <h5>Callouts can include multiple elements</h5>
    <p>Use <code>.stack</code> to keep spacing consistent between children.</p>
  </div>
</div>

dialog

Native HTML dialog element with animations. Use .close for the close button. See UI Blocks → Confirm Dialog for a complete example.

Dialog

Code

<button commandfor="demo-dialog" command="show-modal">Open Dialog</button>

<dialog id="demo-dialog">
  <button class="close" commandfor="demo-dialog" command="close">×</button>
  <p>You can put anything in a dialog. For a real UI example, see <a href="/ui-blocks#confirm-dialog">UI Blocks → Confirm Dialog</a>.</p>
</dialog>

.list-nav

Grouped navigation list with clickable rows for settings pages, menus, and navigation indexes. Supports icons and descriptions.

List Navigation Profile Manage your account settings  Notifications Configure alerts and updates  Security Password and two-factor authentication 
Code <nav class="list-nav">
	<a href="#profile">
		<svg viewBox="0 0 20 20" fill="currentColor">
			<path d="M10 10a4 4 0 100-8 4 4 0 000 8zm-7 8a7 7 0 1114 0H3z" />
		</svg>
		Profile
		<small>Manage your account settings</small>
	</a>

	<a href="#notifications">
		<svg viewBox="0 0 20 20" fill="currentColor">
			<path
				d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
			/>
		</svg>
		Notifications
		<small>Configure alerts and updates</small>
	</a>

	<a href="#security">
		<svg viewBox="0 0 20 20" fill="currentColor">
			<path
				fill-rule="evenodd"
				d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
				clip-rule="evenodd"
			/>
		</svg>
		Security
		<small>Password and two-factor authentication</small>
	</a>

	<button disabled>
		<svg viewBox="0 0 20 20" fill="currentColor">
			<path
				fill-rule="evenodd"
				d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
				clip-rule="evenodd"
			/>
		</svg>
		Advanced Settings
		<small>Coming soon</small>
	</button>
</nav>

Forms

Form elements with minimal classes. For default input styling see Base → Forms. For complete form patterns see UI Blocks → Forms.

Toggle Switch

Accessible toggle/switch input using native checkbox semantics

Toggle Variants  
 
 
 Enable notifications  Dark mode
Code <div class="stack">
  <!-- Basic toggles -->
  <div class="cluster">
    <input type="checkbox" class="toggle" />
    <input type="checkbox" class="toggle" checked />
    <input type="checkbox" class="toggle" checked style="--toggle-color: var(--green)" />
  </div>

  <!-- Disabled states -->
  <div class="cluster">
    <input type="checkbox" class="toggle" disabled />
    <input type="checkbox" class="toggle" checked disabled />
  </div>

  <!-- Compact variant -->
  <div class="cluster">
    <input type="checkbox" class="toggle compact" />
    <input type="checkbox" class="toggle compact" checked />
  </div>

  <!-- With labels -->
  <div class="stack">
    <label class="cluster">
      <input type="checkbox" class="toggle" />
      <span>Enable notifications</span>
    </label>
    <label class="cluster">
      <input type="checkbox" class="toggle" checked />
      <span>Dark mode</span>
    </label>
  </div>
</div>

Input Group

Input field with connected button - commonly used for copy-to-clipboard, search, or form submission patterns. Works with all button variants.

Input Group 
 
 
Code <div class="stack">
  <!-- Copy URL example -->
  <div class="input-group">
    <input type="text" value="https://example.com/share/abc123" readonly />
    <button>Copy</button>
  </div>

  <!-- Search example with primary button -->
  <div class="input-group">
    <input type="search" placeholder="Search documentation..." />
    <button class="primary">Search</button>
  </div>

  <!-- Mini variant example -->
  <div class="input-group">
    <input type="text" placeholder="Enter code..." />
    <button class="mini">Apply</button>
  </div>
</div>

Select

Native select menus with matching input styling and compact label spacing.

SelectProject status 
Validation error  Please select a role
Disabled 
Code <div class="stack" style="max-width: 320px;">
  <div class="stack">
    <label for="project-status">Project status</label>
    <select id="project-status" name="project-status">
      <option value="planning">Planning</option>
      <option value="in-review" selected>In review</option>
      <option value="approved">Approved</option>
      <option value="archived">Archived</option>
    </select>
  </div>

  <div class="stack">
    <label for="select-error">Validation error</label>
    <select id="select-error" class="error">
      <option value="">Select a role…</option>
      <option value="admin">Admin</option>
      <option value="editor">Editor</option>
    </select>
    <small>Please select a role</small>
  </div>

  <div class="stack">
    <label for="select-disabled">Disabled</label>
    <select id="select-disabled" disabled>
      <option>Cannot change</option>
    </select>
  </div>
</div>

Search Input

Search input with icon. Get icons from Phosphor Icons.

Search Input 
 
 
Code <!--
  Search Input Demo
  Icons from Phosphor Icons (bold weight): https://phosphoricons.com/
-->
<div class="stack">
  <!-- Basic search with placeholder -->
  <div class="search">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg>
    <input type="search" placeholder="Search..." />
  </div>

  <!-- Search with a default value -->
  <div class="search">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg>
    <input type="search" value="graffiti css" />
  </div>

  <!-- Disabled search -->
  <div class="search">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg>
    <input type="search" placeholder="Search disabled..." disabled />
  </div>
</div>

File Dropzone

Drag-and-drop file upload zone. Wraps a native file input for click-to-upload fallback.

File Dropzone  Drop files here or click to upload   Drop multiple files here or click to upload  Drop multiple files here or click to upload
Code <!-- Icons from Phosphor Icons (https://phosphoricons.com) - Bold weight -->

<div class="stack">
  <!-- Basic dropzone -->
  <label class="dropzone">
    <input type="file" />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="32"
      height="32"
      fill="currentColor"
      viewBox="0 0 256 256"
      ><path
        d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0ZM88.49,80.49,120,49V144a8,8,0,0,0,16,0V49l31.51,31.52a8,8,0,0,0,11.32-11.32l-44.69-44.68a8,8,0,0,0-11.32,0L78.34,69.17A8,8,0,0,0,88.49,80.49Z"
      ></path></svg
    >
    <span>Drop files here or click to upload</span>
  </label>

  <!-- Multiple files dropzone -->
  <label class="dropzone">
    <input type="file" multiple />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="32"
      height="32"
      fill="currentColor"
      viewBox="0 0 256 256"
      ><path
        d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0ZM88.49,80.49,120,49V144a8,8,0,0,0,16,0V49l31.51,31.52a8,8,0,0,0,11.32-11.32l-44.69-44.68a8,8,0,0,0-11.32,0L78.34,69.17A8,8,0,0,0,88.49,80.49Z"
      ></path></svg
    >
    <span>Drop multiple files here or click to upload</span>
  </label>

  <!-- Without SVG -->
  <label class="dropzone">
    <input type="file" multiple />
    <span>Drop multiple files here or click to upload</span>
  </label>
</div>

Elements

.carousel

.reel

Boxes

Card

.card.featured

.stat-card

.feature-card

Instant Deploys

Built-in Security

Real-time Analytics

.avatar

.button

.chip

.tag

.tooltip

.tabs

.table

.callout

Callouts can include multiple elements

dialog

.list-nav

Forms

Toggle Switch

Input Group

Select

Search Input

File Dropzone