Tabs

A high-level summary of the workspace.

Installation

pnpm add @notion-kit/ui

pnpm add @notion-kit/ui

Anatomy

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content</TabsContent>
  <TabsContent value="activity">Activity content</TabsContent>
</Tabs>

Examples

Controlled

Use value and onValueChange when the selected tab is owned by parent state.

A high-level summary of the workspace.

"use client";

import { useState } from "react";

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@notion-kit/ui/primitives";

enum TabType {
  Overview = "overview",
  Tasks = "tasks",
  Notes = "notes",
}

export default function Demo() {
  const [value, setValue] = useState(TabType.Overview);

  return (
    <Tabs className="w-80" value={value} onValueChange={setValue}>
      <TabsList>
        <TabsTrigger value={TabType.Overview}>Overview</TabsTrigger>
        <TabsTrigger value={TabType.Tasks}>Tasks</TabsTrigger>
        <TabsTrigger value={TabType.Notes}>Notes</TabsTrigger>
      </TabsList>
      <TabsContent value={TabType.Overview} className="p-4 text-sm">
        A high-level summary of the workspace.
      </TabsContent>
      <TabsContent value={TabType.Tasks} className="p-4 text-sm">
        Open decisions and follow-up tasks.
      </TabsContent>
      <TabsContent value={TabType.Notes} className="p-4 text-sm">
        Meeting notes and context for the team.
      </TabsContent>
    </Tabs>
  );
}

"use client";import { useState } from "react";import {  Tabs,  TabsContent,  TabsList,  TabsTrigger,} from "@notion-kit/ui/primitives";enum TabType {  Overview = "overview",  Tasks = "tasks",  Notes = "notes",}export default function Demo() {  const [value, setValue] = useState(TabType.Overview);  return (    <Tabs className="w-80" value={value} onValueChange={setValue}>      <TabsList>        <TabsTrigger value={TabType.Overview}>Overview</TabsTrigger>        <TabsTrigger value={TabType.Tasks}>Tasks</TabsTrigger>        <TabsTrigger value={TabType.Notes}>Notes</TabsTrigger>      </TabsList>      <TabsContent value={TabType.Overview} className="p-4 text-sm">        A high-level summary of the workspace.      </TabsContent>      <TabsContent value={TabType.Tasks} className="p-4 text-sm">        Open decisions and follow-up tasks.      </TabsContent>      <TabsContent value={TabType.Notes} className="p-4 text-sm">        Meeting notes and context for the team.      </TabsContent>    </Tabs>  );}

API Reference

Tabs

The root component that manages the selected tab. It accepts Base UI Tabs root props and the controlled value props below.

Prop	Type	Default	Description
`defaultValue`	`TabValue`	First tab	The uncontrolled initial tab value.
`value`	`TabValue`	-	The controlled selected tab value.
`onValueChange`	`(value: TabValue) => void`	-	Handler called when a tab is selected.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The tab navigation orientation.

TabsList

The container for tab triggers.

Prop	Type	Default	Description
`activateOnFocus`	`boolean`	`false`	Whether arrow-key focus also activates the tab.
`loopFocus`	`boolean`	`true`	Whether keyboard focus loops through the list.

TabsTrigger

A selectable tab. Its value must match a TabsContent value.

Prop	Type	Default	Description
`value`	`TabValue`	-	The value selected by the trigger.
`disabled`	`boolean`	-	Whether this trigger is disabled.

TabsContent

The panel associated with a tab trigger.

Prop	Type	Default	Description
`value`	`TabValue`	-	The trigger value that shows this panel.
`keepMounted`	`boolean`	`false`	Whether the panel remains mounted when hidden.

Tabs

On this page