Navigation

Snippet

A tabbed code snippet UI with copy to clipboard support, built on accessible React Aria snippet, styled with Tailwind, and designed for clean, compact command switching.

Tabs
PaginationTabs

Basic

Tabs divide content into sections, allowing users to easily switch between them.

Loading...

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/snippet

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

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>
Unlock the full power of
Design Intent UI

Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.

Learn more
Pagination
Tabs