Command Tabs

npm install @assistant-ui/react

Installation

Install the dependencies:

npm install react-shiki

Copy the source into components/ui/command-tabs.tsx. Registry items that depend on it install it automatically.

components/ui/command-tabs.tsx

Usage

import { CommandTabs } from "@/components/ui/command-tabs";

export function Example() {
  return (
    <CommandTabs
      storageKey="package-manager"
      commands={{
        npm: "npm install @assistant-ui/react",
        pnpm: "pnpm add @assistant-ui/react",
      }}
    />
  );
}

The command renders as Shiki-highlighted Bash; the copy button always copies the active dialect.

Examples

Synced instances

Two blocks sharing a storageKey switch together, and the choice survives reloads. Every install command on this site shares one key.

npx assistant-ui init

npx shadcn@latest add @assistant-ui/thread

API Reference

CommandTabs

CommandTabsProps

commandsRecord<string, string>: Tab label to command line, in display order.
storageKey?string: Persists the selected tab in localStorage and keeps every instance with the same key in sync.
onValueChange?(value: string) => void: Called when the user picks a tab.
className?string: Additional CSS classes on the outer figure.