Components

Tabs

Organize content with tabs

Tabs organize related content into switchable panels.

Package Manager Example

npm install @barodoc/core

<Tabs client:load items={[
  { label: "npm", value: "npm", children: "npm install @barodoc/core" },
  { label: "pnpm", value: "pnpm", children: "pnpm add @barodoc/core" },
  { label: "yarn", value: "yarn", children: "yarn add @barodoc/core" }
]} />

Code Examples

const greeting = 'Hello, World!';
console.log(greeting);

<Tabs client:load items={[
  { label: "JavaScript", value: "js", children: "const greeting = 'Hello';" },
  { label: "TypeScript", value: "ts", children: "const greeting: string = 'Hello';" },
  { label: "Python", value: "py", children: "greeting = 'Hello'" }
]} />

Default Value

Set the initially active tab with defaultValue:

pnpm install

<Tabs client:load defaultValue="pnpm" items={[
  { label: "npm", value: "npm", children: "npm install" },
  { label: "pnpm", value: "pnpm", children: "pnpm install" },
  { label: "yarn", value: "yarn", children: "yarn" }
]} />

Props

Tab Item

Each item in the items array: