Tabs

print("Hello, world!")

A tabbed interface component for organizing content into switchable panels. Built on Radix UI Tabs for accessible keyboard navigation and focus management. Ideal for output type switching, settings panels, and multi-view interfaces.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/tabs.json

Install the dependencies:

npm install radix-ui class-variance-authority

Copy from the nteract/elements registry.

Usage

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@/registry/primitives/tabs"

export function Example() {
  return (
    <Tabs defaultValue="tab1">
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">Content for Tab 1</TabsContent>
      <TabsContent value="tab2">Content for Tab 2</TabsContent>
    </Tabs>
  )
}

Examples

Default Variant

Rendered preview content.

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="raw">Raw</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">Rendered preview content.</TabsContent>
  <TabsContent value="raw">{"{ \"type\": \"display_data\" }"}</TabsContent>
</Tabs>

Line Variant

import pandas as pd

<Tabs defaultValue="python">
  <TabsList variant="line">
    <TabsTrigger value="python">Python</TabsTrigger>
    <TabsTrigger value="r">R</TabsTrigger>
    <TabsTrigger value="julia">Julia</TabsTrigger>
  </TabsList>
  <TabsContent value="python">import pandas as pd</TabsContent>
  <TabsContent value="r">library(tidyverse)</TabsContent>
  <TabsContent value="julia">using DataFrames</TabsContent>
</Tabs>

Vertical Orientation

General settings for the notebook interface.

<Tabs defaultValue="general" orientation="vertical">
  <TabsList>
    <TabsTrigger value="general">General</TabsTrigger>
    <TabsTrigger value="editor">Editor</TabsTrigger>
    <TabsTrigger value="keybindings">Keybindings</TabsTrigger>
  </TabsList>
  <TabsContent value="general">General settings...</TabsContent>
  <TabsContent value="editor">Editor preferences...</TabsContent>
  <TabsContent value="keybindings">Customize shortcuts...</TabsContent>
</Tabs>

Notebook Examples

Output Type Switcher

DataFrame Preview

5 rows x 3 columns

<Tabs defaultValue="rich">
  <TabsList>
    <TabsTrigger value="rich">Rich</TabsTrigger>
    <TabsTrigger value="plain">Plain</TabsTrigger>
    <TabsTrigger value="data">Data</TabsTrigger>
  </TabsList>
  <TabsContent value="rich">
    <DataFramePreview data={output} />
  </TabsContent>
  <TabsContent value="plain">
    <pre>{output.text}</pre>
  </TabsContent>
  <TabsContent value="data">
    <JsonView data={output.data} />
  </TabsContent>
</Tabs>

Components

Component	Description
`Tabs`	Root component managing tab state and orientation
`TabsList`	Container for tab triggers with variant styling
`TabsTrigger`	Clickable tab button that activates its panel
`TabsContent`	Panel content shown when its tab is active

Props

Tabs

Prop	Type	Default	Description
`defaultValue`	`string`	—	Default active tab value
`value`	`string`	—	Controlled active tab value
`onValueChange`	`(value: string) => void`	—	Callback when active tab changes
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout orientation
`className`	`string`	—	Additional CSS classes

TabsList

Prop	Type	Default	Description
`variant`	`"default" \| "line"`	`"default"`	Visual variant
`className`	`string`	—	Additional CSS classes

TabsTrigger

Prop	Type	Default	Description
`value`	`string`	—	Unique value for this tab (required)
`disabled`	`boolean`	`false`	Disable the tab
`className`	`string`	—	Additional CSS classes

TabsContent

Prop	Type	Default	Description
`value`	`string`	—	Value matching the trigger (required)
`className`	`string`	—	Additional CSS classes

Tabs

On this page