Components

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
function Component() {
return (
<Tabs defaultValue="tab-1">
<TabsList>
<TabsTrigger value="tab-1">Tab 1</TabsTrigger>
<TabsTrigger value="tab-2">Tab 2</TabsTrigger>
<TabsTrigger value="tab-3">Tab 3</TabsTrigger>
</TabsList>
<TabsContent value="tab-1">
<p className="p-4 text-center text-xs text-muted-foreground">Content for Tab 1</p>
</TabsContent>
<TabsContent value="tab-2">
<p className="p-4 text-center text-xs text-muted-foreground">Content for Tab 2</p>
</TabsContent>
<TabsContent value="tab-3">
<p className="p-4 text-center text-xs text-muted-foreground">Content for Tab 3</p>
</TabsContent>
</Tabs>
);
}
export { Component };



![With line and hover [Vercel] preview](https://cdn.21st.dev/user_originui/tabs/with-line-and-hover-vercel/preview.png?v=1)







Part of Origin UI — browse the full library on 21st.dev.