AI Sidebar · paneui

Installation

pnpm dlx shadcn@latest add @paneui/ai-sidebar

Usage

import { AISidebar } from "@/components/ui/ai-sidebar"

<AISidebar
  defaultItems={[{ id: "trips", label: "Trips", kind: "folder", children: [{ id: "kyoto", label: "Kyoto", kind: "file" }] }]}
  defaultExpandedIds={["trips"]}
/>

Examples

Collapsed Rail

Controlled

With Footer

Minimal

Search Hotkey

Keyboard

The tree follows the WAI-ARIA tree pattern. ArrowUp / ArrowDown move, ArrowRight / ArrowLeft open, close or go to the parent, Home / End jump, Enter / Space activate, typing jumps by label, and F2 renames when renamable. Escape clears search. The search shortcut (⌘K on Mac, Ctrl+K elsewhere) is shared, so with several sidebars on a page, only the most recently mounted, focused or clicked one responds.

API Reference

AISidebar

Workspace sidebar with bookmarks, a searchable resource tree and a collapsible icon rail. Also accepts every prop of motion.nav.

items: SidebarResource[]; Controlled workspace tree; folders and projects hold children, files are leaves.
defaultItems= []: SidebarResource[]; Initial tree when uncontrolled.
onItemsChange: (items: SidebarResource[]) => void; Called with the renamed tree.
bookmarks= []: SidebarResource[]; Pinned shortcuts in their own section.
activeId: string | null; Controlled active item.
defaultActiveId= null: string | null; Initial active item.
onActiveChange: (id: string, item: SidebarResource) => void; Called when a leaf is activated.
defaultExpandedIds= []: string[]; Containers open on first render.
open: boolean; Controlled state, expanded (true) or icon rail (false).
defaultOpen= true: boolean; Initial state when uncontrolled. Closed, the sidebar is a 56px icon rail with tooltips, and clicking a folder or project expands it.
onOpenChange: (open: boolean) => void; Called when the sidebar expands or collapses.
title= the locale's: ReactNode; Title row content.
actions: (open: boolean) => ReactNode; Rendered under the title, e.g. a New chat button.
footer: (open: boolean) => ReactNode; Pinned to the bottom, e.g. the account row.
searchable= true: boolean; Show the search field.
searchHotkey= "k": string | null; ⌘ (Mac) / Ctrl + this key opens the sidebar and focuses search; the hint shows the platform modifier. Only the most recently mounted, focused or clicked sidebar responds. null disables it.
renamable= false: boolean; Allow inline rename (F2, double-click or the pencil).
onRename: (item: SidebarResource, label: string) => void; Called after a rename, including bookmarks.
width= "16rem": string; Expanded width as a CSS length.

Prop	Type	Default	Description
items	SidebarResource[]	—	Controlled workspace tree; folders and projects hold `children`, files are leaves.
defaultItems	SidebarResource[]	[]	Initial tree when uncontrolled.
onItemsChange	(items: SidebarResource[]) => void	—	Called with the renamed tree.
bookmarks	SidebarResource[]	[]	Pinned shortcuts in their own section.
activeId	string \| null	—	Controlled active item.
defaultActiveId	string \| null	null	Initial active item.
onActiveChange	(id: string, item: SidebarResource) => void	—	Called when a leaf is activated.
defaultExpandedIds	string[]	[]	Containers open on first render.
open	boolean	—	Controlled state, expanded (`true`) or icon rail (`false`).
defaultOpen	boolean	true	Initial state when uncontrolled. Closed, the sidebar is a 56px icon rail with tooltips, and clicking a folder or project expands it.
onOpenChange	(open: boolean) => void	—	Called when the sidebar expands or collapses.
title	ReactNode	the locale's	Title row content.
actions	(open: boolean) => ReactNode	—	Rendered under the title, e.g. a New chat button.
footer	(open: boolean) => ReactNode	—	Pinned to the bottom, e.g. the account row.
searchable	boolean	true	Show the search field.
searchHotkey	string \| null	"k"	⌘ (Mac) / Ctrl + this key opens the sidebar and focuses search; the hint shows the platform modifier. Only the most recently mounted, focused or clicked sidebar responds. `null` disables it.
renamable	boolean	false	Allow inline rename (F2, double-click or the pencil).
onRename	(item: SidebarResource, label: string) => void	—	Called after a rename, including bookmarks.
width	string	"16rem"	Expanded width as a CSS length.

data-state: open or collapsed.
data-active: On the active tree item.
data-kind: On each tree item, its kind.

Data attribute	Description
data-state	`open` or `collapsed`.
data-active	On the active tree item.
data-kind	On each tree item, its `kind`.

SidebarResource

One tree node.

id*: string; Stable id.
label*: string; Shown text; also used by search and typeahead.
kind*: "folder" | "project" | "file" | "bookmark"; Icon and tint; folders and projects with children expand.
children: SidebarResource[]; Nested nodes.
meta: ReactNode; Trailing hint, e.g. a count or time.
disabled: boolean; Dim and skip activation.

Prop	Type	Default	Description
id*	string	—	Stable id.
label*	string	—	Shown text; also used by search and typeahead.
kind*	"folder" \| "project" \| "file" \| "bookmark"	—	Icon and tint; folders and projects with `children` expand.
children	SidebarResource[]	—	Nested nodes.
meta	ReactNode	—	Trailing hint, e.g. a count or time.
disabled	boolean	—	Dim and skip activation.

ResourceIcon

The 16px icon for a resource kind.

kind*: "folder" | "project" | "file" | "bookmark"; Which icon.
className: string; Merged onto the icon.

Prop	Type	Default	Description
kind*	"folder" \| "project" \| "file" \| "bookmark"	—	Which icon.
className	string	—	Merged onto the icon.