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.

RAC
PaginationTabs
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>

Component API

Snippet

The Snippet component wraps tabbed code snippets.

PropTypeDefault
classNamestring-

SnippetTab

The SnippetTab component represents one snippet tab.

PropTypeDefault
classNamestring-

SnippetTabPanel

The SnippetTabPanel component renders snippet tab content.

PropTypeDefault
classNamestring-

SnippetTabPanels

The SnippetTabPanels component groups snippet tab panels.

PropTypeDefault
classNamestring-

SnippetTabsList

The SnippetTabsList component groups snippet tabs.

PropTypeDefault
classNamestring-

See the React Aria for the full API reference.

Unlock the full power of
Intent UI Design

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

Learn more
Pagination
Tabs