Docs
Tabs

Tabs

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

DocsAPI ReferenceSource

Account

Make changes to your account here. Click save when you're done.

Installation

Install the following dependencies:

npm install @radix-ui/react-tabs

Copy and paste the following code into your project.

'use client';
 
import * as TabsPrimitive from '@radix-ui/react-tabs';
import clsx from 'clsx';
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';
import styles from './styles.module.scss';
 
const Tabs = TabsPrimitive.Root;
 
const TabsList = forwardRef<ElementRef<typeof TabsPrimitive.List>, ComponentPropsWithoutRef<typeof TabsPrimitive.List>>(
    ({ className, ...props }, ref) => (
        <TabsPrimitive.List ref={ref} className={clsx(styles.tabs__list, className)} {...props} />
    )
);
TabsList.displayName = TabsPrimitive.List.displayName;
 
const TabsTrigger = forwardRef<
    ElementRef<typeof TabsPrimitive.Trigger>,
    ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
    <TabsPrimitive.Trigger ref={ref} className={clsx(styles.tabs_trigger, className)} {...props} />
));
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
const TabsContent = forwardRef<
    ElementRef<typeof TabsPrimitive.Content>,
    ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
    <TabsPrimitive.Content ref={ref} className={clsx(styles.tabs__content, className)} {...props} />
));
TabsContent.displayName = TabsPrimitive.Content.displayName;
 
export { Tabs, TabsContent, TabsList, TabsTrigger };

Update the import paths to match your project setup.

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>