Snippet

Tabs

NPM

PNPM

Yarn

Bun

npm install react-aria-components

Installation

Add the component with the CLI.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/snippet

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

button tabs

Manual installation

Install the dependencies, then copy the component source into your project.

npm

pnpm

yarn

bun

npm install react-aria-components

Anatomy

import {
  Snippet,
  SnippetTab,
  SnippetTabPanel,
  SnippetTabPanels,
  SnippetTabsList,
} from "@/components/ui/snippet"

const commands = [
  { id: "npm", label: "NPM", command: "npm install react-aria-components" },
  { id: "pnpm", label: "PNPM", command: "pnpm add react-aria-components" },
  { id: "yarn", label: "Yarn", command: "yarn add react-aria-components" },
  { id: "bun", label: "Bun", command: "bun add react-aria-components" },
]

<Snippet>
  <SnippetTabsList items={commands}>
    {(cmd) => <SnippetTab key={cmd.id}>{cmd.label}</SnippetTab>}
  </SnippetTabsList>
  <SnippetTabPanels items={commands}>
    {(cmd) => <SnippetTabPanel id={cmd.id}>{cmd.command}</SnippetTabPanel>}
  </SnippetTabPanels>
</Snippet>