Project switcher

Switches the project a sidebar shows. Each project lists its knowledge files, instructions, sharing and indexing, so picking one says what context the next chat starts with.

Markdown

On this page

Projects with their files and instructions, one still indexing, and the compact rail trigger.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/project-switcher.json

Usage

tsx

import { ProjectSwitcher } from "@/components/ui/chatcn/project-switcher"

<ProjectSwitcher
  projects={[
    { id: "web", name: "chatcn-web", filesCount: 14, hasInstructions: true },
    { id: "research", name: "Retrieval research", filesCount: 31, indexingCount: 3 },
  ]}
  value={projectId}
  onValueChange={setProjectId}
  onCreate={() => setCreating(true)}
/>

Put it in the sidebar header, and the compact version in railHeader. null means chats outside any project; turn that choice off with allowNone={false}.

Props

Prop	Type	Notes
`projects`	`ChatProject[]`	`{ id, name, filesCount?, hasInstructions?, indexingCount?, shared?, disabled? }`
`value`, `defaultValue`, `onValueChange`	`string \| null`	Controlled or uncontrolled
`onCreate`	`() => void`	Shows New project…
`onManage`	`(id) => void`	Shows Project settings… for the selected project
`allowNone`, `noneLabel`		Default true and No project
`loading`, `disabled`	`boolean`
`compact`	`boolean`	Icon-only trigger with a tooltip
`side`, `align`		Menu placement
`open`, `defaultOpen`, `onOpenChange`		Menu state

Keyboard

Key	Action
`Enter`, `Space`, `↓`	Open the menu
`↑`, `↓`, typing	Move and type ahead
`Enter`	Pick the project
`Esc`	Close

Accessibility

Projects are a radio group inside the menu, so the selected one is announced as checked.
Shared is a people mark with a spoken label, and indexing pairs a spinner with the file count.

Motion

The menu grows from the trigger over 180 ms. Opened from the keyboard, it appears instantly.