Components
Command Tabs
A command per package manager, with an optional agent prompt tab.
The install commands on this site use Command Tabs. A tab can also hold an agent prompt, like the first tab here:
pnpm dlx @copybook/cli initInstall it:
pnpm dlx shadcn@latest add https://copybook.dev/r/command-tabs.jsonUsage
Make the package manager a param, then render one tab per value:
import { render } from "@copybook/core";
import { CommandTabs } from "@/components/copybook/command-tabs";
import { init, setupPrompt } from "@/content/definitions/get-started";
const managers = ["pnpm", "npm", "yarn", "bun"] as const;
export const GetStarted = () => (
<CommandTabs
defaultTab="pnpm"
tabs={[
{
id: "prompt",
kind: "prompt",
label: "Prompt",
rendered: render(setupPrompt),
},
...managers.map((packageManager) => ({
id: packageManager,
label: packageManager,
rendered: render(init, { packageManager }),
})),
]}
/>
);Props
| Prop | Type | Description |
|---|---|---|
tabs | { id, label, rendered, kind? }[] | One tab each, in order. kind: "prompt" wraps long lines and adds an agent icon. |
defaultTab | string | The tab that starts selected. |
onCopy | (event: CopyEvent) => void | Called with { id, text } after a copy. |