Snippet

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