Skip to content
Browse themes
Product 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.

260 lineslucide-react
  • sidebar
  • file-tree
  • explorer
  • tree
  • keyboard

What's included

  • components/sidebar-file-tree.tsx
  • Needs lucide-react

Works with

  • React
  • Next.js
  • Tailwind CSS
  • TypeScript

npx hoverlab add sidebar-file-tree

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

page.tsx

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

Source

components/sidebar-file-tree.tsx
'use client'

/**
 * <SidebarFileTree> — an explorer sidebar built as a real ARIA tree, with the
 * keyboard model people already know from every code editor.
 *
 *  - `role="tree"` with `treeitem` rows carrying `aria-level`, `aria-setsize`,
 *    `aria-posinset` and, for folders, `aria-expanded`. The rows are rendered
 *    flat rather than nested because a screen reader is told the structure by
 *    those attributes, and a flat list is far easier to move focus through.
 *  - One tab stop. Focus is roving: exactly one row has `tabIndex={0}`, so Tab
 *    enters the tree once and leaves it once instead of stopping on every file.
 *  - Up/Down move, Home/End jump, Right opens a folder or steps into it, Left
 *    closes it or steps out to its parent, Enter/Space activate, and typing a
 *    letter jumps to the next row starting with it. Left and Right swap in an
 *    RTL document, where "into" points the other way.
 *  - Selection (`aria-selected`) and focus are different things and are kept
 *    apart: arrowing does not open files, only activating does.
 *  - Folders carry `aria-expanded` and no `aria-controls`, on purpose. The
 *    tree pattern has no controlled region: a flat treeitem "owns" the rows
 *    that follow it through `aria-level`, so there is nothing for an IDREF to
 *    point at. The a11y audit lists this as an advisory, not a failure.
 */

import * as React from 'react'
import { ChevronDown, Folder, FolderOpen, FileText, FileCode2, FileJson } from 'lucide-react'

export interface TreeNode {
  id: string
  name: string
  children?: TreeNode[]
}

export interface SidebarFileTreeProps {
  nodes?: TreeNode[]
  defaultExpanded?: string[]
  defaultSelectedId?: string
  children?: React.ReactNode
  className?: string
}

const DEFAULT_NODES: TreeNode[] = [
  {
    id: 'src',
    name: 'src',
    children: [
      {
        id: 'src/app',
        name: 'app',
        children: [
          { id: 'src/app/layout.tsx', name: 'layout.tsx' },
          { id: 'src/app/page.tsx', name: 'page.tsx' },
          { id: 'src/app/globals.css', name: 'globals.css' },
        ],
      },
      {
        id: 'src/components',
        name: 'components',
        children: [
          { id: 'src/components/button.tsx', name: 'button.tsx' },
          { id: 'src/components/card.tsx', name: 'card.tsx' },
        ],
      },
      { id: 'src/utils.ts', name: 'utils.ts' },
    ],
  },
  { id: 'public', name: 'public', children: [{ id: 'public/logo.svg', name: 'logo.svg' }] },
  { id: 'package.json', name: 'package.json' },
  { id: 'README.md', name: 'README.md' },
  { id: 'tsconfig.json', name: 'tsconfig.json' },
]

interface Row {
  node: TreeNode
  level: number
  parentId: string | null
  setsize: number
  posinset: number
}

function flatten(nodes: TreeNode[], open: Set<string>, level = 1, parentId: string | null = null): Row[] {
  return nodes.flatMap((node, i) => {
    const row: Row = { node, level, parentId, setsize: nodes.length, posinset: i + 1 }
    return node.children && open.has(node.id)
      ? [row, ...flatten(node.children, open, level + 1, node.id)]
      : [row]
  })
}

function FileIcon({ name }: { name: string }) {
  const cls = 'h-4 w-4 shrink-0'
  if (/\.(tsx?|jsx?|css)$/.test(name)) return <FileCode2 aria-hidden className={cls} />
  if (/\.json$/.test(name)) return <FileJson aria-hidden className={cls} />
  return <FileText aria-hidden className={cls} />
}

export function SidebarFileTree({
  nodes = DEFAULT_NODES,
  defaultExpanded = ['src', 'src/app'],
  defaultSelectedId = 'src/app/page.tsx',
  children,
  className = '',
}: SidebarFileTreeProps) {
  const uid = React.useId()
  const [open, setOpen] = React.useState(() => new Set(defaultExpanded))
  const [selectedId, setSelectedId] = React.useState(defaultSelectedId)
  const [focusId, setFocusId] = React.useState(defaultSelectedId)
  const treeRef = React.useRef<HTMLUListElement>(null)
  const refs = React.useRef(new Map<string, HTMLLIElement>())
  const moveDomFocus = React.useRef(false)

  const rows = React.useMemo(() => flatten(nodes, open), [nodes, open])

  React.useEffect(() => {
    if (!moveDomFocus.current) return
    moveDomFocus.current = false
    refs.current.get(focusId)?.focus()
  }, [focusId, rows])

  const focusRow = (id: string) => {
    moveDomFocus.current = true
    setFocusId(id)
  }

  const toggle = (id: string, want?: boolean) =>
    setOpen((prev) => {
      const next = new Set(prev)
      const shouldOpen = want ?? !prev.has(id)
      if (shouldOpen) next.add(id)
      else next.delete(id)
      return next
    })

  const activate = (row: Row) => {
    setFocusId(row.node.id)
    if (row.node.children) toggle(row.node.id)
    else setSelectedId(row.node.id)
  }

  const onKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {
    const i = rows.findIndex((r) => r.node.id === focusId)
    const row = rows[i]
    if (!row) return
    const rtl = treeRef.current ? getComputedStyle(treeRef.current).direction === 'rtl' : false
    const inKey = rtl ? 'ArrowLeft' : 'ArrowRight'
    const outKey = rtl ? 'ArrowRight' : 'ArrowLeft'
    const isOpen = open.has(row.node.id)

    if (e.key === 'ArrowDown') focusRow(rows[Math.min(i + 1, rows.length - 1)].node.id)
    else if (e.key === 'ArrowUp') focusRow(rows[Math.max(i - 1, 0)].node.id)
    else if (e.key === 'Home') focusRow(rows[0].node.id)
    else if (e.key === 'End') focusRow(rows[rows.length - 1].node.id)
    else if (e.key === inKey) {
      if (row.node.children && !isOpen) toggle(row.node.id, true)
      else if (row.node.children && isOpen) focusRow(rows[i + 1].node.id)
    } else if (e.key === outKey) {
      if (row.node.children && isOpen) toggle(row.node.id, false)
      else if (row.parentId) focusRow(row.parentId)
    } else if (e.key === 'Enter' || e.key === ' ') activate(row)
    else if (e.key.length === 1 && /\S/.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey) {
      const ch = e.key.toLowerCase()
      const hit = [...rows.slice(i + 1), ...rows.slice(0, i)].find((r) =>
        r.node.name.toLowerCase().startsWith(ch),
      )
      if (hit) focusRow(hit.node.id)
      else return
    } else return
    e.preventDefault()
  }

  const selectedName = selectedId.split('/').pop()

  return (
    <div
      className={`flex h-[32rem] overflow-hidden rounded-2xl border border-border/60 bg-background ${className}`}
    >
      <aside
        aria-label="Explorer"
        className="flex w-64 shrink-0 flex-col border-e border-border/60 bg-card/40"
      >
        <h2
          id={`${uid}-title`}
          className="px-4 pb-2 pt-4 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
        >
          Explorer
        </h2>
        <ul
          ref={treeRef}
          role="tree"
          aria-labelledby={`${uid}-title`}
          onKeyDown={onKeyDown}
          className="flex-1 overflow-y-auto px-2 pb-3"
        >
          {rows.map((row) => {
            const { node, level } = row
            const isFolder = !!node.children
            const isOpen = open.has(node.id)
            const selected = node.id === selectedId
            return (
              <li
                key={node.id}
                ref={(el) => {
                  if (el) refs.current.set(node.id, el)
                  else refs.current.delete(node.id)
                }}
                role="treeitem"
                aria-level={level}
                aria-setsize={row.setsize}
                aria-posinset={row.posinset}
                aria-expanded={isFolder ? isOpen : undefined}
                aria-selected={selected}
                tabIndex={node.id === focusId ? 0 : -1}
                onClick={() => activate(row)}
                onFocus={(e) => {
                  if (e.target === e.currentTarget) setFocusId(node.id)
                }}
                style={{ paddingInlineStart: `${(level - 1) * 14 + 8}px` }}
                className={`flex cursor-pointer select-none items-center gap-1.5 rounded-lg py-1.5 pe-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
                  selected
                    ? 'bg-primary/10 font-medium text-primary'
                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                }`}
              >
                {isFolder ? (
                  <ChevronDown
                    aria-hidden
                    className={`h-3.5 w-3.5 shrink-0 transition-transform motion-reduce:transition-none ${
                      isOpen ? '' : '-rotate-90 rtl:rotate-90'
                    }`}
                  />
                ) : (
                  <span aria-hidden className="w-3.5 shrink-0" />
                )}
                {isFolder ? (
                  isOpen ? (
                    <FolderOpen aria-hidden className="h-4 w-4 shrink-0" />
                  ) : (
                    <Folder aria-hidden className="h-4 w-4 shrink-0" />
                  )
                ) : (
                  <FileIcon name={node.name} />
                )}
                <span className="truncate">{node.name}</span>
              </li>
            )
          })}
        </ul>
      </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 font-mono text-sm text-muted-foreground">
            <span className="min-w-0 truncate">{selectedName}</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-file-tree.tsx and import it where you need the section:

import { SidebarFileTree } from '@/components/sidebar-file-tree'

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
nodesTreeNode[]DEFAULT_NODES
defaultExpandedstring[]['src', 'src/app']
defaultSelectedIdstring'src/app/page.tsx'
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-file-tree.html
<!--
  File Explorer Tree 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="Explorer" class="flex w-64 shrink-0 flex-col border-e border-border/60 bg-card/40">
    <h2 id="_R_0_-title" class="px-4 pb-2 pt-4 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Explorer</h2>
    <ul role="tree" aria-labelledby="_R_0_-title" class="flex-1 overflow-y-auto px-2 pb-3">
      <li role="treeitem" aria-level="1" aria-setsize="5" aria-posinset="1" aria-expanded="true" aria-selected="false" tabindex="-1" style="padding-inline-start:8px" class="flex cursor-pointer select-none items-center gap-1.5 rounded-lg py-1.5 pe-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground 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-chevron-down h-3.5 w-3.5 shrink-0 transition-transform motion-reduce:transition-none" aria-hidden="true">
          <path d="m6 9 6 6 6-6"></path>
        </svg>
        <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-folder-open h-4 w-4 shrink-0" aria-hidden="true">
          <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"></path>
        </svg>
        <span class="truncate">src</span>
      </li>
      <li role="treeitem" aria-level="2" aria-setsize="3" aria-posinset="1" aria-expanded="true" aria-selected="false" tabindex="-1" style="padding-inline-start:22px" class="flex cursor-pointer select-none items-center gap-1.5 rounded-lg py-1.5 pe-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground 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-chevron-down h-3.5 w-3.5 shrink-0 transition-transform motion-reduce:transition-none" aria-hidden="true">
          <path d="m6 9 6 6 6-6"></path>
        </svg>
        <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-folder-open h-4 w-4 shrink-0" aria-hidden="true">
          <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"></path>
        </svg>
        <span class="truncate">app</span>
      </li>
      <li role="treeitem" aria-level="3" aria-setsize="3" aria-posinset="1" aria-selected="false" tabindex="-1" style="padding-inline-start:36px" class="flex cursor-pointer select-none items-center gap-1.5 rounded-lg py-1.5 pe-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
        <span aria-hidden="true" class="w-3.5 shrink-0"></span>
        <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-file-code2 lucide-file-code-2 h-4 w-4 shrink-0" aria-hidden="true">
          <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"></path>
          <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
          <path d="m5 12-3 3 3 3"></path>
          <path d="m9 18 3-3-3-3"></path>
        </svg>
        <span class="truncate">layout.tsx</span>
      </li>
      <li role="treeitem" aria-level="3" aria-setsize="3" aria-posinset="2" aria-selected="true" tabindex="0" style="padding-inline-start:36px" class="flex cursor-pointer select-none items-center gap-1.5 rounded-lg py-1.5 pe-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary bg-primary/10 font-medium text-primary">
        <span aria-hidden="true" class="w-3.5 shrink-0"></span>
        <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-file-code2 lucide-file-code-2 h-4 w-4 shrink-0" aria-hidden="true">
          <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"></path>
          <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
          <path d="m5 12-3 3 3 3"></path>
          <path d="m9 18 3-3-3-3"></path>
        </svg>
        <span class="truncate">page.tsx</span>
      </li>
      <li role="treeitem" aria-level="3" aria-setsize="3" aria-posinset="3" aria-selected="false" tabindex="-1" style="padding-inline-start:36px" class="flex cursor-pointer select-none items-center gap-1.5 rounded-lg py-1.5 pe-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
        <span aria-hidden="true" class="w-3.5 shrink-0"></span>
        <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-file-code2 lucide-file-code-2 h-4 w-4 shrink-0" aria-hidden="true">
          <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"></path>
          <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
          <path d="m5 12-3 3 3 3"></path>
          <path d="m9 18 3-3-3-3"></path>
        </svg>
        <span class="truncate">globals.css</span>
      </li>
      <li role="treeitem" aria-level="2" aria-setsize="3" aria-posinset="2" aria-expanded="false" aria-selected="false" tabindex="-1" style="padding-inline-start:22px" class="flex cursor-pointer select-none items-center gap-1.5 rounded-lg py-1.5 pe-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground 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-chevron-down h-3.5 w-3.5 shrink-0 transition-transform motion-reduce:transition-none -rotate-90 rtl:rotate-90" aria-hidden="true">
          <path d="m6 9 6 6 6-6"></path>
        </svg>
        <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-folder h-4 w-4 shrink-0" aria-hidden="true">
          <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path>
        </svg>
        <span class="truncate">components</span>
      </li>
      <li role="treeitem" aria-level="2" aria-setsize="3" aria-posinset="3" aria-selected="false" tabindex="-1" style="padding-inline-start:22px" class="flex cursor-pointer select-none items-center gap-1.5 rounded-lg py-1.5 pe-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
        <span aria-hidden="true" class="w-3.5 shrink-0"></span>
        <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-file-code2 lucide-file-code-2 h-4 w-4 shrink-0" aria-hidden="true">
          <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"></path>
          <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
          <path d="m5 12-3 3 3 3"></path>
          <path d="m9 18 3-3-3-3"></path>
        </svg>
        <span class="truncate">utils.ts</span>
      </li>
      <li role="treeitem" aria-level="1" aria-setsize="5" aria-posinset="2" aria-expanded="false" aria-selected="false" tabindex="-1" style="padding-inline-start:8px" class="flex cursor-pointer select-none items-center gap-1.5 rounded-lg py-1.5 pe-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground 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-chevron-down h-3.5 w-3.5 shrink-0 transition-transform motion-reduce:transition-none -rotate-90 rtl:rotate-90" aria-hidden="true">
          <path d="m6 9 6 6 6-6"></path>
        </svg>
        <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-folder h-4 w-4 shrink-0" aria-hidden="true">
          <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path>
        </svg>
        <span class="truncate">public</span>
      </li>
      <li role="treeitem" aria-level="1" aria-setsize="5" aria-posinset="3" aria-selected="false" tabindex="-1" style="padding-inline-start:8px" class="flex cursor-pointer select-none items-center gap-1.5 rounded-lg py-1.5 pe-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
        <span aria-hidden="true" class="w-3.5 shrink-0"></span>
        <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-file-json h-4 w-4 shrink-0" aria-hidden="true">
          <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
          <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
          <path d="M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1"></path>
          <path d="M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1"></path>
        </svg>
        <span class="truncate">package.json</span>
      </li>
      <li role="treeitem" aria-level="1" aria-setsize="5" aria-posinset="4" aria-selected="false" tabindex="-1" style="padding-inline-start:8px" class="flex cursor-pointer select-none items-center gap-1.5 rounded-lg py-1.5 pe-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
        <span aria-hidden="true" class="w-3.5 shrink-0"></span>
        <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-file-text h-4 w-4 shrink-0" aria-hidden="true">
          <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
          <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
          <path d="M10 9H8"></path>
          <path d="M16 13H8"></path>
          <path d="M16 17H8"></path>
        </svg>
        <span class="truncate">README.md</span>
      </li>
      <li role="treeitem" aria-level="1" aria-setsize="5" aria-posinset="5" aria-selected="false" tabindex="-1" style="padding-inline-start:8px" class="flex cursor-pointer select-none items-center gap-1.5 rounded-lg py-1.5 pe-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
        <span aria-hidden="true" class="w-3.5 shrink-0"></span>
        <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-file-json h-4 w-4 shrink-0" aria-hidden="true">
          <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
          <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
          <path d="M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1"></path>
          <path d="M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1"></path>
        </svg>
        <span class="truncate">tsconfig.json</span>
      </li>
    </ul>
  </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 font-mono text-sm text-muted-foreground">
      <span class="min-w-0 truncate">page.tsx</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
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.
Sidebars170 lines1 dep