Tabs

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

Base UI React Aria Radix UI

Overview

Analytics

Reports

Settings

Overview

View your key metrics and recent project activity. Track progress across all your active projects.

You have 12 active projects and 3 pending tasks.

import {
  Card,
  CardContent,

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/tabs.json

Usage

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

<Tabs defaultSelectedKey="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger id="account">Account</TabsTrigger>
    <TabsTrigger id="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent id="account">Make changes to your account here.</TabsContent>
  <TabsContent id="password">Change your password here.</TabsContent>
</Tabs>

Composition

Use the following composition to build Tabs:

Tabs
├── TabsList
│   ├── TabsTrigger
│   └── TabsTrigger
├── TabsContent
└── TabsContent

Line

Use the variant="line" prop on TabsList for a line style.

Overview

Analytics

Reports

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

export function TabsLine() {

Vertical

Use orientation="vertical" for vertical tabs.

Account

Password

Notifications

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

export function TabsVertical() {

Disabled

Home

Disabled

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

export function TabsDisabled() {

Icons

Preview

Code

import { AppWindowIcon, CodeIcon } from "@phosphor-icons/react"

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

RTL

To enable RTL support, see the RTL configuration guide.

نظرة عامة

التحليلات

التقارير

الإعدادات

نظرة عامة

عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.

لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.

"use client"

import * as React from "react"

API Reference

See the React Aria Tabs documentation.

Table Tag Input

On This Page

Installation Usage Composition Line Vertical Disabled Icons RTL API Reference