120k
New

Tabs

PreviousNext

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

Base UIReact AriaRadix UI
Radix UI
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 @force-ui/tabs

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
<Tabs defaultValue="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Make changes to your account here.</TabsContent>
  <TabsContent value="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.

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

export function TabsLine() {

Vertical

Use orientation="vertical" for vertical tabs.

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

export function TabsVertical() {

Disabled

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

export function TabsDisabled() {

Icons

import AppWindowIcon from "@material-symbols/svg-400/rounded/web_asset.svg?react"
import CodeIcon from "@material-symbols/svg-400/rounded/code.svg?react"

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

نظرة عامة
عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.
لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.
"use client"

import * as React from "react"

API Reference

See the Radix Tabs documentation.