Graffiti

github

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.

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

.carousel

Slide 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 Layout

Panel 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
You can make a custom box with CSS variables box-shadow: var(--box), var(--shadow-5);

.avatar

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

Avatar Variants

User avatar User avatar User avatar User avatar User avatar
A BC JD ST XL
User avatar AB User avatar CD
Team member Team member Team member Team member Team member
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="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 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.

Tags

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

.tooltip

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.

HiHellosup✅ Icon or emoji in thisYo
HiHellosupSome data in this cell that might be a bit long I don't know.Yo
HiHellosupSome data in this cell that might be a bit long I don't know.Yo
HiHellosupSome data in this cell that might be a bit long I don't know.Yo
HiHellosupSome data in this cell that might be a bit long I don't know.Yo
HiHellosupSome data in this cell that might be a bit long I don't know.Yo
HiHellosupSome data in this cell that might be a bit long I don't know.Yo

.callout

An informational callout

Callout Variants

Default callout for general information and tips.

.fill to fill bg color. Warning callout for important notices that need attention.

Error callout for critical issues or destructive actions.

Success callout for confirmations and positive feedback.

Ghost callout for subtle, neutral messages.

Add .hard to any variant for a stronger left border accent.

Warning with the hard modifier for extra emphasis.

Callouts support multiple elements

Use .stack fo children with consistent spacing.

Code 
<div class="stack">
  <!-- Default callout (blue) -->
  <div class="callout">
    <p>Default callout for general information and tips.</p>
  </div>

  <!-- Warning variant -->
  <div class="callout warning fill">
    <p>
      .fill to fill bg color. Warning callout for important notices that need
      attention.
    </p>
  </div>

  <!-- Error variant -->
  <div class="callout error">
    <p>Error callout for critical issues or destructive actions.</p>
  </div>

  <!-- Success variant -->
  <div class="callout success">
    <p>Success callout for confirmations and positive feedback.</p>
  </div>

  <!-- Ghost variant -->
  <div class="callout ghost split">
    <p>Ghost callout for subtle, neutral messages.</p>
    <button class="mini">With Button</button>
  </div>

  <!-- Hard modifier (stronger left border) -->
  <div class="callout hard">
    <p>
      Add <code>.hard</code> to any variant for a stronger left border accent.
    </p>
  </div>

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

  <!-- Multi-element callout -->
  <div class="callout success stack">
    <h5>Callouts support multiple elements</h5>
    <p>Use .stack fo children with consistent spacing.</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

You can put anything in a dialog. For a real UI example, see UI Blocks → Confirm 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

Navigation list with clickable rows for settings pages, menus, and navigation indexes. Supports icons, descriptions, chevrons, and a bordered variant.

List Navigation

Code 
<div style="background: var(--black-05); padding: var(--pad-l)">
  <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>

  <h4>Bordered Variant</h4>

  <nav class="list-nav bordered">
    <a href="#dashboard">
      <svg viewBox="0 0 20 20" fill="currentColor">
        <path
          d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
        />
      </svg>
      Dashboard
    </a>

    <a href="#analytics">
      <svg viewBox="0 0 20 20" fill="currentColor">
        <path
          d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"
        />
      </svg>
      Analytics
    </a>

    <a href="#reports">
      <svg viewBox="0 0 20 20" fill="currentColor">
        <path
          fill-rule="evenodd"
          d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z"
          clip-rule="evenodd"
        />
      </svg>
      Reports
    </a>
  </nav>
</div>

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

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>

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

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>