Tabs

Tabs allow you to organise related content into switchable panels. They're particularly useful for showing the same concept across different package managers, frameworks, or languages.

Overview

The Tabs component is powered by shadcn/ui and Radix UI, providing full keyboard navigation and accessibility out of the box.

Package managers

A common pattern for installation commands:

bash

bun add streamdown @streamdown/code @streamdown/math

Framework examples

Show different framework implementations side by side:

app/page.tsx

import { Streamdown } from "streamdown"
import { code } from "@streamdown/code"

export default function Page() {
  return (
    <Streamdown plugins={{ code }}>
      {"# Hello from Next.js"}
    </Streamdown>
  )
}

Usage

Example

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function PackageInstall() {
  return (
    <Tabs defaultValue="bun">
      <TabsList>
        <TabsTrigger value="bun">bun</TabsTrigger>
        <TabsTrigger value="npm">npm</TabsTrigger>
      </TabsList>
      <TabsContent value="bun">
        bun add my-package
      </TabsContent>
      <TabsContent value="npm">
        npm install my-package
      </TabsContent>
    </Tabs>
  )
}