Tabs
A component for toggling between related panels on the same page.
A component for toggling between related panels on the same page.
import { Tabs, TabsList, TabsTrigger, TabsPanel } from "@/components/ui/tabs";<Tabs defaultValue="account" className="w-[400px]">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsPanel value="account">Make changes to your account here.</TabsPanel>
<TabsPanel value="password">Change your password here.</TabsPanel>
</Tabs>You can change the orientation of the tabs to horizontal or vertical by passing the orientation prop to the Tabs component.
You can use the TabsPanel component to render the content of the tabs.
Docs are a great way to learn about the product and how to use it.
Docs are a great way to learn about the product and how to use it.
Docs are a great way to learn about the product and how to use it.
If content of the tabs vary in height, you can use the TabsPanelsWrapper component to wrap tab panels and the height will be animated smoothly.
Docs are a great way to learn about the product and how to use it.