Skip to content
Browse themes
Product block

Faceted Filter Drawer

Facets with per-option counts, zero-result options disabled rather than hidden so the list never jumps, and a pending selection applied on a button that says how many choices changed.

241 lineslucide-reactAdded 24 Aug 2026Updated 2 Sept 2026
  • filters
  • facets
  • drawer
  • search
  • refine

What's included

  • components/filter-drawer-facets.tsx
  • Needs lucide-react

Works with

  • React
  • Next.js
  • Tailwind CSS
  • TypeScript

npx hoverlab add filter-drawer-facets

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/filter-drawer-facets.tsx
'use client'

/**
 * <FilterDrawerFacets> — faceted filters, with the two things that make
 * them usable at scale.
 *
 *  - Counts on every option, and zero-result options disabled rather than
 *    hidden. Hiding them makes the list jump as selections change, so a
 *    user loses the option they were reaching for; disabling keeps the
 *    layout still and says why the option is unavailable.
 *
 *  - Pending vs applied. On a small list, filtering as you click is right.
 *    On a slow query it is four round trips and three discarded result
 *    sets, so this drawer keeps a pending selection and applies it on a
 *    button — with the count of what changed on the button itself, which
 *    is the affordance that makes the delay feel deliberate rather than
 *    broken.
 *
 * The applied set is a `Record<string, string[]>` rather than a flat list,
 * because filters within one facet are OR and filters across facets are
 * AND. That is what every faceted search means and it cannot be expressed
 * by a flat array of selected ids.
 */

import * as React from 'react'
import { X, Check, SlidersHorizontal } from 'lucide-react'

export interface FacetOption {
  id: string
  label: string
  /** Matching records. 0 disables the option — see the note above. */
  count: number
}

export interface Facet {
  id: string
  label: string
  options: FacetOption[]
}

export type Selection = Record<string, string[]>

export interface FilterDrawerFacetsProps {
  facets?: Facet[]
  /** Currently applied filters. The drawer edits a copy until Apply. */
  applied?: Selection
  onApply?: (next: Selection) => void
  onClose?: () => void
  className?: string
}

const DEFAULT_FACETS: Facet[] = [
  {
    id: 'status',
    label: 'Status',
    options: [
      { id: 'active', label: 'Active', count: 128 },
      { id: 'paused', label: 'Paused', count: 34 },
      { id: 'archived', label: 'Archived', count: 9 },
      { id: 'draft', label: 'Draft', count: 0 },
    ],
  },
  {
    id: 'plan',
    label: 'Plan',
    options: [
      { id: 'free', label: 'Free', count: 96 },
      { id: 'pro', label: 'Pro', count: 51 },
      { id: 'team', label: 'Team', count: 18 },
      { id: 'studio', label: 'Studio', count: 6 },
    ],
  },
  {
    id: 'region',
    label: 'Region',
    options: [
      { id: 'na', label: 'North America', count: 74 },
      { id: 'eu', label: 'Europe', count: 62 },
      { id: 'apac', label: 'Asia Pacific', count: 29 },
      { id: 'latam', label: 'Latin America', count: 11 },
    ],
  },
]

function countSelected(selection: Selection): number {
  return Object.values(selection).reduce((n, ids) => n + ids.length, 0)
}

/**
 * How many individual choices differ between two selections.
 *
 * Symmetric difference, not "pending minus applied": removing a filter is a
 * change the Apply button should count, and a one-directional diff reports
 * "Apply" with no number when the only edit was a deselection.
 */
export function pendingChanges(applied: Selection, pending: Selection): number {
  const keys = new Set([...Object.keys(applied), ...Object.keys(pending)])
  let changes = 0
  for (const key of keys) {
    const a = new Set(applied[key] ?? [])
    const b = new Set(pending[key] ?? [])
    for (const id of a) if (!b.has(id)) changes++
    for (const id of b) if (!a.has(id)) changes++
  }
  return changes
}

export function FilterDrawerFacets({
  facets = DEFAULT_FACETS,
  applied = { status: ['active'] },
  onApply,
  onClose,
  className,
}: FilterDrawerFacetsProps) {
  const [pending, setPending] = React.useState<Selection>(applied)

  /*
    Re-seed when the applied set changes underneath us — a filter cleared
    from a chip outside this drawer, or a saved view loaded. Without it the
    drawer keeps editing a copy of a selection that no longer exists and
    Apply silently reinstates it.
  */
  React.useEffect(() => setPending(applied), [applied])

  const toggle = (facetId: string, optionId: string) => {
    setPending((current) => {
      const ids = current[facetId] ?? []
      const next = ids.includes(optionId)
        ? ids.filter((id) => id !== optionId)
        : [...ids, optionId]
      // Drop the key entirely when it empties, so an untouched facet and a
      // fully-deselected one are the same value rather than `[]` vs absent.
      const out = { ...current }
      if (next.length) out[facetId] = next
      else delete out[facetId]
      return out
    })
  }

  const changes = pendingChanges(applied, pending)
  const selected = countSelected(pending)

  return (
    <aside
      className={`flex w-full max-w-sm flex-col rounded-2xl border border-border/60 bg-card ${className ?? ''}`}
      aria-label="Filters"
    >
      <header className="flex items-center gap-2 border-b border-border/60 px-5 py-3.5">
        <SlidersHorizontal aria-hidden className="h-4 w-4 text-muted-foreground" />
        <h2 className="text-sm font-semibold tracking-tight">Filters</h2>
        {selected ? (
          <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
            {selected}
          </span>
        ) : null}
        <button
          type="button"
          onClick={onClose}
          aria-label="Close filters"
          className="ms-auto rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
        >
          <X aria-hidden className="h-4 w-4" />
        </button>
      </header>

      <div className="flex-1 space-y-6 overflow-y-auto px-5 py-4">
        {facets.map((facet) => (
          <fieldset key={facet.id}>
            {/*
              A real <fieldset>/<legend>. The grouping is the semantics —
              "Status: Active, Paused" — and a <p> above a list of
              checkboxes conveys none of it to a screen reader.
            */}
            <legend className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              {facet.label}
            </legend>
            <div className="space-y-0.5">
              {facet.options.map((option) => {
                const checked = (pending[facet.id] ?? []).includes(option.id)
                const empty = option.count === 0
                return (
                  <label
                    key={option.id}
                    className={`flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm transition-colors ${
                      empty
                        ? 'cursor-not-allowed opacity-45'
                        : 'hover:bg-muted/60'
                    }`}
                    title={empty ? 'No results match this with your other filters' : undefined}
                  >
                    <span className="relative flex h-4 w-4 shrink-0 items-center justify-center">
                      <input
                        type="checkbox"
                        checked={checked}
                        disabled={empty}
                        onChange={() => toggle(facet.id, option.id)}
                        className="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed"
                      />
                      <Check
                        aria-hidden
                        className="pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100"
                      />
                    </span>
                    <span className="flex-1">{option.label}</span>
                    <span className="font-mono text-xs text-muted-foreground">
                      {option.count.toLocaleString('en-US')}
                    </span>
                  </label>
                )
              })}
            </div>
          </fieldset>
        ))}
      </div>

      <footer className="flex items-center gap-2 border-t border-border/60 px-5 py-3.5">
        <button
          type="button"
          onClick={() => setPending({})}
          disabled={!selected}
          className="rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent"
        >
          Clear all
        </button>
        {/*
          The count is on the button. It is what makes a deliberate Apply
          read as deliberate rather than as a filter that failed to fire.
        */}
        <button
          type="button"
          onClick={() => onApply?.(pending)}
          disabled={changes === 0}
          className="ms-auto rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-40"
        >
          {changes === 0 ? 'Apply' : `Apply ${changes} change${changes === 1 ? '' : 's'}`}
        </button>
      </footer>
    </aside>
  )
}

Before you paste

  • Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
  • Install: npm i lucide-react
  • Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/filter-drawer-facets.tsx and import it where you need the section:

import { FilterDrawerFacets } from '@/components/filter-drawer-facets'

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

PropTypeDefault
facetsFacet[]DEFAULT_FACETS
appliedCurrently applied filters. The drawer edits a copy until Apply.Selection{ status: ['active'] }
onApply(next: Selection) => void—
onClose() => void—
classNamestring—

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

filter-drawer-facets.html
<!--
  Faceted Filter Drawer — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<aside class="flex w-full max-w-sm flex-col rounded-2xl border border-border/60 bg-card " aria-label="Filters">
  <header class="flex items-center gap-2 border-b border-border/60 px-5 py-3.5">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sliders-horizontal h-4 w-4 text-muted-foreground" aria-hidden="true">
      <line x1="21" x2="14" y1="4" y2="4"></line>
      <line x1="10" x2="3" y1="4" y2="4"></line>
      <line x1="21" x2="12" y1="12" y2="12"></line>
      <line x1="8" x2="3" y1="12" y2="12"></line>
      <line x1="21" x2="16" y1="20" y2="20"></line>
      <line x1="12" x2="3" y1="20" y2="20"></line>
      <line x1="14" x2="14" y1="2" y2="6"></line>
      <line x1="8" x2="8" y1="10" y2="14"></line>
      <line x1="16" x2="16" y1="18" y2="22"></line>
    </svg>
    <h2 class="text-sm font-semibold tracking-tight">Filters</h2>
    <span class="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">1</span>
    <button type="button" aria-label="Close filters" class="ms-auto rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x h-4 w-4" aria-hidden="true">
        <path d="M18 6 6 18"></path>
        <path d="m6 6 12 12"></path>
      </svg>
    </button>
  </header>
  <div class="flex-1 space-y-6 overflow-y-auto px-5 py-4">
    <fieldset>
      <legend class="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Status</legend>
      <div class="space-y-0.5">
        <label class="flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-muted/60">
          <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
            <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" checked="" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
          </span>
          <span class="flex-1">Active</span>
          <span class="font-mono text-xs text-muted-foreground">128</span>
        </label>
        <label class="flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-muted/60">
          <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
            <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
          </span>
          <span class="flex-1">Paused</span>
          <span class="font-mono text-xs text-muted-foreground">34</span>
        </label>
        <label class="flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-muted/60">
          <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
            <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
          </span>
          <span class="flex-1">Archived</span>
          <span class="font-mono text-xs text-muted-foreground">9</span>
        </label>
        <label class="flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm transition-colors cursor-not-allowed opacity-45" title="No results match this with your other filters">
          <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
            <input type="checkbox" disabled="" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
          </span>
          <span class="flex-1">Draft</span>
          <span class="font-mono text-xs text-muted-foreground">0</span>
        </label>
      </div>
    </fieldset>
    <fieldset>
      <legend class="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Plan</legend>
      <div class="space-y-0.5">
        <label class="flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-muted/60">
          <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
            <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
          </span>
          <span class="flex-1">Free</span>
          <span class="font-mono text-xs text-muted-foreground">96</span>
        </label>
        <label class="flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-muted/60">
          <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
            <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
          </span>
          <span class="flex-1">Pro</span>
          <span class="font-mono text-xs text-muted-foreground">51</span>
        </label>
        <label class="flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-muted/60">
          <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
            <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
          </span>
          <span class="flex-1">Team</span>
          <span class="font-mono text-xs text-muted-foreground">18</span>
        </label>
        <label class="flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-muted/60">
          <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
            <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
          </span>
          <span class="flex-1">Studio</span>
          <span class="font-mono text-xs text-muted-foreground">6</span>
        </label>
      </div>
    </fieldset>
    <fieldset>
      <legend class="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Region</legend>
      <div class="space-y-0.5">
        <label class="flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-muted/60">
          <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
            <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
          </span>
          <span class="flex-1">North America</span>
          <span class="font-mono text-xs text-muted-foreground">74</span>
        </label>
        <label class="flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-muted/60">
          <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
            <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
          </span>
          <span class="flex-1">Europe</span>
          <span class="font-mono text-xs text-muted-foreground">62</span>
        </label>
        <label class="flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-muted/60">
          <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
            <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
          </span>
          <span class="flex-1">Asia Pacific</span>
          <span class="font-mono text-xs text-muted-foreground">29</span>
        </label>
        <label class="flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-muted/60">
          <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
            <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
          </span>
          <span class="flex-1">Latin America</span>
          <span class="font-mono text-xs text-muted-foreground">11</span>
        </label>
      </div>
    </fieldset>
  </div>
  <footer class="flex items-center gap-2 border-t border-border/60 px-5 py-3.5">
    <button type="button" class="rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent">Clear all</button>
    <button type="button" disabled="" class="ms-auto rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-40">Apply</button>
  </footer>
</aside>
  • This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
  • It is one frame: the component in its initial state, with no props applied beyond the defaults.
  • This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
  • Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt
Used in these pages
Want the whole screen instead of this one section? Open a page and copy it entire.
7 more blocks in Modals & Drawers
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse Modals & Drawers
Shipping one commercially
Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
  • A commercial licence for everything in the catalog
  • Unlimited bundle exports, in Vue, Svelte and Tailwind
  • One payment — no subscription, nothing to renew
Pro — $79 once
More Modals & Drawers blocks
View category
Open the full page for this block
Destructive Confirm Dialog
A type-to-confirm dialog built on native <dialog>, so the focus trap, top layer and escape handling come from the browser. Focus lands on Cancel, and the button says the verb.
Modals & Drawers184 lines1 dep
Open the full page for this block
Cookie Consent Banner
Per-category consent where refusing is exactly as easy as accepting, nothing non-essential is pre-ticked, and the page behind it stays readable — the shape the law expects, wired to your own script gating.
Modals & Drawers232 lines1 dep
Open the full page for this block
Slide-Over Edit Panel
A side sheet for editing a record without losing the list behind it — native <dialog> for the trapping, a data attribute for the slide, and a sticky footer so Save never scrolls away.
Modals & Drawers208 lines1 dep
Open the full page for this block
Share & Access Dialog
The share modal where a design mistake is a data leak: general access stated as its consequence rather than its setting, and a copy button that never silently widens access.
Modals & Drawers312 lines1 dep
Open the full page for this block
Mobile Bottom Sheet
Half and full snap points where the content owns the scroll and overscroll-contain keeps the page behind still. The drag handle is a real button, Escape and the backdrop close it, and safe-area padding keeps the last row pressable.
Modals & Drawers266 lines1 dep
Open the full page for this block
Unsaved Changes Prompt
The interception that keeps work: three answers rather than two, the changed fields listed by name, a destructive-styled discard, and Escape resolving to cancel.
Modals & Drawers237 lines1 dep
Open the full page for this block
Record Inspector Drawer
A non-modal drawer that keeps the list on screen, with previous and next controls for moving between records and an activity tab beside the fields.
Modals & Drawers336 lines1 dep