Skip to content
Browse themes
Product block

Chat History Sidebar

Conversations grouped by recency with a per-row pin toggle that announces itself, and a hover control that stays reachable by keyboard and on touch.

170 lineslucide-react
  • sidebar
  • chat
  • history
  • threads
  • ai

What's included

  • components/sidebar-thread-history.tsx
  • Needs lucide-react

Works with

  • React
  • Next.js
  • Tailwind CSS
  • TypeScript

npx hoverlab add sidebar-thread-history

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/sidebar-thread-history.tsx
'use client'

/**
 * <SidebarThreadHistory> — the chat-history sidebar an assistant product
 * lives in: a New chat button, conversations grouped by recency, and a pin
 * control on each row.
 *
 *  - Grouped by recency under real headings, each list labelled by its
 *    heading, so a long history is navigable by heading and not a wall of
 *    same-looking rows.
 *  - The pin button is a toggle: `aria-pressed`, and a name that says which
 *    conversation ("Pin Quarterly report summary"). A row of identical "Pin"
 *    buttons is unusable by ear.
 *  - The pin control is hidden until hover or focus to keep the list calm, but
 *    never on a device that cannot hover — `hover: none` shows it always, or a
 *    touch user could never pin anything — and never on the keyboard: focus
 *    inside the row reveals it.
 *  - Pinning is announced through a `role="status"` line, since the row jumps
 *    to another group and a screen reader would otherwise hear nothing.
 *  - Titles truncate with `min-w-0`; the full title stays in the accessible
 *    name because truncation is only visual.
 */

import * as React from 'react'
import { Plus, Pin, MessageSquare } from 'lucide-react'

export interface Thread {
  id: string
  title: string
  group: 'Today' | 'Yesterday' | 'Previous 7 days'
  pinned?: boolean
}

export interface SidebarThreadHistoryProps {
  threads?: Thread[]
  defaultActiveId?: string
  onNewChat?: () => void
  children?: React.ReactNode
  className?: string
}

const DEFAULT_THREADS: Thread[] = [
  { id: 't1', title: 'Quarterly report summary', group: 'Today' },
  { id: 't2', title: 'Refactor the billing webhook handler', group: 'Today' },
  { id: 't3', title: 'Trip plan: Lisbon in October', group: 'Yesterday', pinned: true },
  { id: 't4', title: 'Explain CRDTs like I am new to them', group: 'Yesterday' },
  { id: 't5', title: 'Cold email to a design agency', group: 'Previous 7 days' },
  { id: 't6', title: 'SQL: cohort retention by week', group: 'Previous 7 days' },
  { id: 't7', title: 'Naming ideas for the mobile app', group: 'Previous 7 days' },
]

const ORDER: Array<Thread['group'] | 'Pinned'> = ['Pinned', 'Today', 'Yesterday', 'Previous 7 days']

export function SidebarThreadHistory({
  threads: initial = DEFAULT_THREADS,
  defaultActiveId = 't2',
  onNewChat,
  children,
  className = '',
}: SidebarThreadHistoryProps) {
  const uid = React.useId()
  const [threads, setThreads] = React.useState(initial)
  const [activeId, setActiveId] = React.useState(defaultActiveId)
  const [announcement, setAnnouncement] = React.useState('')

  const togglePin = (id: string) => {
    const t = threads.find((x) => x.id === id)
    if (!t) return
    setThreads((prev) => prev.map((x) => (x.id === id ? { ...x, pinned: !x.pinned } : x)))
    setAnnouncement(`${t.pinned ? 'Unpinned' : 'Pinned'} ${t.title}`)
  }

  const groups = ORDER.map((name) => ({
    name,
    rows: threads.filter((t) => (name === 'Pinned' ? t.pinned : !t.pinned && t.group === name)),
  })).filter((g) => g.rows.length > 0)

  return (
    <div
      className={`flex h-[32rem] overflow-hidden rounded-2xl border border-border/60 bg-background ${className}`}
    >
      <aside
        aria-label="Chat history"
        className="relative flex w-64 shrink-0 flex-col border-e border-border/60 bg-card/40"
      >
        <div className="p-3">
          <button
            type="button"
            onClick={onNewChat}
            className="flex w-full items-center gap-2 rounded-xl bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-card"
          >
            <Plus aria-hidden className="h-4 w-4" />
            New chat
          </button>
        </div>

        <p role="status" className="sr-only">
          {announcement}
        </p>

        <nav aria-label="Conversations" className="flex-1 space-y-4 overflow-y-auto px-2 pb-3">
          {groups.map((group, gi) => {
            const headingId = `${uid}-g${gi}`
            return (
              <div key={group.name}>
                <h2
                  id={headingId}
                  className="flex items-center gap-1.5 px-3 pb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
                >
                  {group.name === 'Pinned' ? <Pin aria-hidden className="h-3 w-3" /> : null}
                  {group.name}
                </h2>
                <ul aria-labelledby={headingId} className="space-y-0.5">
                  {group.rows.map((t) => {
                    const active = t.id === activeId
                    return (
                      <li
                        key={t.id}
                        className={`group relative flex items-center rounded-xl transition-colors ${
                          active ? 'bg-muted' : 'hover:bg-muted/60'
                        }`}
                      >
                        <a
                          href="#"
                          aria-current={active ? 'page' : undefined}
                          onClick={(e) => {
                            e.preventDefault()
                            setActiveId(t.id)
                          }}
                          className={`flex min-w-0 flex-1 items-center gap-2.5 rounded-xl py-2 ps-3 pe-9 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
                            active ? 'font-medium text-foreground' : 'text-muted-foreground group-hover:text-foreground'
                          }`}
                        >
                          <MessageSquare aria-hidden className="h-3.5 w-3.5 shrink-0" />
                          <span className="truncate">{t.title}</span>
                        </a>
                        <button
                          type="button"
                          aria-pressed={!!t.pinned}
                          aria-label={`Pin ${t.title}`}
                          onClick={() => togglePin(t.id)}
                          className={`absolute end-1.5 rounded-lg p-1.5 text-muted-foreground transition-opacity hover:bg-background hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary group-focus-within:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100 ${
                            t.pinned ? 'text-primary opacity-100' : 'opacity-0'
                          }`}
                        >
                          <Pin aria-hidden className={`h-3.5 w-3.5 ${t.pinned ? 'fill-current' : ''}`} />
                        </button>
                      </li>
                    )
                  })}
                </ul>
              </div>
            )
          })}
        </nav>
      </aside>

      <main className="hidden min-w-0 flex-1 p-6 sm:block">
        {children ?? (
          <div className="flex min-h-full items-center justify-center rounded-xl border border-dashed border-border/60 p-4 text-center text-sm text-muted-foreground">
            <span className="min-w-0 truncate">
              {threads.find((t) => t.id === activeId)?.title ?? 'Start a new chat'}
            </span>
          </div>
        )}
      </main>
    </div>
  )
}

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/sidebar-thread-history.tsx and import it where you need the section:

import { SidebarThreadHistory } from '@/components/sidebar-thread-history'

Customize

1 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

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
threadsThread[]—
defaultActiveIdstring't2'
onNewChat() => void—
childrenReact.ReactNode—
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.

sidebar-thread-history.html
<!--
  Chat History Sidebar — 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.
-->
<div class="flex h-[32rem] overflow-hidden rounded-2xl border border-border/60 bg-background ">
  <aside aria-label="Chat history" class="relative flex w-64 shrink-0 flex-col border-e border-border/60 bg-card/40">
    <div class="p-3">
      <button type="button" class="flex w-full items-center gap-2 rounded-xl bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-card"><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-plus h-4 w-4" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>New chat</button>
    </div>
    <p role="status" class="sr-only"></p>
    <nav aria-label="Conversations" class="flex-1 space-y-4 overflow-y-auto px-2 pb-3">
      <div>
        <h2 id="_R_0_-g0" class="flex items-center gap-1.5 px-3 pb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-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-pin h-3 w-3" aria-hidden="true"><path d="M12 17v5"></path><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"></path></svg>Pinned</h2>
        <ul aria-labelledby="_R_0_-g0" class="space-y-0.5">
          <li class="group relative flex items-center rounded-xl transition-colors hover:bg-muted/60">
            <a href="#" class="flex min-w-0 flex-1 items-center gap-2.5 rounded-xl py-2 ps-3 pe-9 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground group-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-message-square h-3.5 w-3.5 shrink-0" aria-hidden="true">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
              </svg>
              <span class="truncate">Trip plan: Lisbon in October</span>
            </a>
            <button type="button" aria-pressed="true" aria-label="Pin Trip plan: Lisbon in October" class="absolute end-1.5 rounded-lg p-1.5 text-muted-foreground transition-opacity hover:bg-background hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary group-focus-within:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100 text-primary opacity-100">
              <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-pin h-3.5 w-3.5 fill-current" aria-hidden="true">
                <path d="M12 17v5"></path>
                <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"></path>
              </svg>
            </button>
          </li>
        </ul>
      </div>
      <div>
        <h2 id="_R_0_-g1" class="flex items-center gap-1.5 px-3 pb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Today</h2>
        <ul aria-labelledby="_R_0_-g1" class="space-y-0.5">
          <li class="group relative flex items-center rounded-xl transition-colors hover:bg-muted/60">
            <a href="#" class="flex min-w-0 flex-1 items-center gap-2.5 rounded-xl py-2 ps-3 pe-9 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground group-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-message-square h-3.5 w-3.5 shrink-0" aria-hidden="true">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
              </svg>
              <span class="truncate">Quarterly report summary</span>
            </a>
            <button type="button" aria-pressed="false" aria-label="Pin Quarterly report summary" class="absolute end-1.5 rounded-lg p-1.5 text-muted-foreground transition-opacity hover:bg-background hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary group-focus-within:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100 opacity-0">
              <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-pin h-3.5 w-3.5" aria-hidden="true">
                <path d="M12 17v5"></path>
                <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"></path>
              </svg>
            </button>
          </li>
          <li class="group relative flex items-center rounded-xl transition-colors bg-muted">
            <a href="#" aria-current="page" class="flex min-w-0 flex-1 items-center gap-2.5 rounded-xl py-2 ps-3 pe-9 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary font-medium 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-message-square h-3.5 w-3.5 shrink-0" aria-hidden="true">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
              </svg>
              <span class="truncate">Refactor the billing webhook handler</span>
            </a>
            <button type="button" aria-pressed="false" aria-label="Pin Refactor the billing webhook handler" class="absolute end-1.5 rounded-lg p-1.5 text-muted-foreground transition-opacity hover:bg-background hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary group-focus-within:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100 opacity-0">
              <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-pin h-3.5 w-3.5" aria-hidden="true">
                <path d="M12 17v5"></path>
                <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"></path>
              </svg>
            </button>
          </li>
        </ul>
      </div>
      <div>
        <h2 id="_R_0_-g2" class="flex items-center gap-1.5 px-3 pb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Yesterday</h2>
        <ul aria-labelledby="_R_0_-g2" class="space-y-0.5">
          <li class="group relative flex items-center rounded-xl transition-colors hover:bg-muted/60">
            <a href="#" class="flex min-w-0 flex-1 items-center gap-2.5 rounded-xl py-2 ps-3 pe-9 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground group-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-message-square h-3.5 w-3.5 shrink-0" aria-hidden="true">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
              </svg>
              <span class="truncate">Explain CRDTs like I am new to them</span>
            </a>
            <button type="button" aria-pressed="false" aria-label="Pin Explain CRDTs like I am new to them" class="absolute end-1.5 rounded-lg p-1.5 text-muted-foreground transition-opacity hover:bg-background hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary group-focus-within:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100 opacity-0">
              <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-pin h-3.5 w-3.5" aria-hidden="true">
                <path d="M12 17v5"></path>
                <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"></path>
              </svg>
            </button>
          </li>
        </ul>
      </div>
      <div>
        <h2 id="_R_0_-g3" class="flex items-center gap-1.5 px-3 pb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Previous 7 days</h2>
        <ul aria-labelledby="_R_0_-g3" class="space-y-0.5">
          <li class="group relative flex items-center rounded-xl transition-colors hover:bg-muted/60">
            <a href="#" class="flex min-w-0 flex-1 items-center gap-2.5 rounded-xl py-2 ps-3 pe-9 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground group-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-message-square h-3.5 w-3.5 shrink-0" aria-hidden="true">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
              </svg>
              <span class="truncate">Cold email to a design agency</span>
            </a>
            <button type="button" aria-pressed="false" aria-label="Pin Cold email to a design agency" class="absolute end-1.5 rounded-lg p-1.5 text-muted-foreground transition-opacity hover:bg-background hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary group-focus-within:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100 opacity-0">
              <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-pin h-3.5 w-3.5" aria-hidden="true">
                <path d="M12 17v5"></path>
                <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"></path>
              </svg>
            </button>
          </li>
          <li class="group relative flex items-center rounded-xl transition-colors hover:bg-muted/60">
            <a href="#" class="flex min-w-0 flex-1 items-center gap-2.5 rounded-xl py-2 ps-3 pe-9 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground group-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-message-square h-3.5 w-3.5 shrink-0" aria-hidden="true">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
              </svg>
              <span class="truncate">SQL: cohort retention by week</span>
            </a>
            <button type="button" aria-pressed="false" aria-label="Pin SQL: cohort retention by week" class="absolute end-1.5 rounded-lg p-1.5 text-muted-foreground transition-opacity hover:bg-background hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary group-focus-within:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100 opacity-0">
              <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-pin h-3.5 w-3.5" aria-hidden="true">
                <path d="M12 17v5"></path>
                <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"></path>
              </svg>
            </button>
          </li>
          <li class="group relative flex items-center rounded-xl transition-colors hover:bg-muted/60">
            <a href="#" class="flex min-w-0 flex-1 items-center gap-2.5 rounded-xl py-2 ps-3 pe-9 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground group-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-message-square h-3.5 w-3.5 shrink-0" aria-hidden="true">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
              </svg>
              <span class="truncate">Naming ideas for the mobile app</span>
            </a>
            <button type="button" aria-pressed="false" aria-label="Pin Naming ideas for the mobile app" class="absolute end-1.5 rounded-lg p-1.5 text-muted-foreground transition-opacity hover:bg-background hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary group-focus-within:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100 opacity-0">
              <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-pin h-3.5 w-3.5" aria-hidden="true">
                <path d="M12 17v5"></path>
                <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"></path>
              </svg>
            </button>
          </li>
        </ul>
      </div>
    </nav>
  </aside>
  <main class="hidden min-w-0 flex-1 p-6 sm:block">
    <div class="flex min-h-full items-center justify-center rounded-xl border border-dashed border-border/60 p-4 text-center text-sm text-muted-foreground">
      <span class="min-w-0 truncate">Refactor the billing webhook handler</span>
    </div>
  </main>
</div>
  • 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
10 more blocks in Sidebars
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 Sidebars
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 Sidebars blocks
View category
Open the full page for this block
Docs Sidebar With Filter
Version picker, a labelled filter that announces its match count, and sections that vanish rather than leave a heading over an empty list.
Sidebars208 lines1 dep
Open the full page for this block
File Explorer Tree Sidebar
A real ARIA tree with roving focus, arrow-key expand and collapse, type-ahead and one tab stop, drawn flat so a screen reader is told the structure.
Sidebars260 lines1 dep