Tabs component is a powerful navigation element that presents a set of layered sections of content, known as tab panels. Each tab panel is associated with a tab, and only one tab panel is displayed at a time. Users can switch between tabs to access different sets of content, making it an efficient and organized way to present information. The Tabs component enhances user experience by providing clear navigation and compartmentalizing content, ideal for scenarios where multiple views or functionalities need to be presented within a confined space.


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


yarn add @camped-ui/tabs


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