Tabs

A set of layered sections of content that display one panel at a time. Built on Base UI Tabs primitives.

Make changes to your account settings here.

Usage

import {
  TabsRoot,
  TabsList,
  TabsTab,
  TabsPanel,
} from "@/components/ui/static/tabs"

<TabsRoot defaultValue="tab1">
  <TabsList>
    <TabsTab value="tab1">Tab 1</TabsTab>
    <TabsTab value="tab2">Tab 2</TabsTab>
  </TabsList>
  <TabsPanel value="tab1">Content 1</TabsPanel>
  <TabsPanel value="tab2">Content 2</TabsPanel>
</TabsRoot>

Installation

Install dependencies

TypeScript

npm install @base-ui/react

Examples

Full Width

Overview

View your project overview and recent activity.

API Reference

valuestring

Controlled value of the active tab.

onValueChange(value: string) => void

Callback when active tab changes.

defaultValuestring

Default active tab for uncontrolled usage.

orientation'horizontal' | 'vertical'

='horizontal'

Orientation of the tabs.