Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Preview

Account
Make changes to your account here.

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/tabs.json

Usage

tsx
14 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function MyComponent() {
  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

Simple Tabs

Overview content goes here.

Disabled Tab

This tab is active.

Props

PropDescription
Tabs*The root component that manges tab state and layout.
TabsList*Container for tab triggers.
TabsTrigger*Individual tab trigger.
TabsContent*Content panel for a tab.