Components
Loading preview...
Enchanced shadcn/ui tabs
npx shadcn@latest add https://21st.dev/r/originui/tabsimport { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
function Component() {
return (
<Tabs defaultValue="tab-1">
<TabsList className="mx-auto flex max-w-xs bg-transparent">
<TabsTrigger
value="tab-1"
className="group flex-1 flex-col p-3 text-xs data-[state=active]:bg-muted data-[state=active]:shadow-none"
>
<Badge className="mb-1.5 min-w-5 px-1 transition-opacity group-data-[state=inactive]:opacity-50">
3
</Badge>
Overview
</TabsTrigger>
<TabsTrigger
value="tab-2"
className="group flex-1 flex-col p-3 text-xs data-[state=active]:bg-muted data-[state=active]:shadow-none"
>
<Badge className="mb-1.5 min-w-5 px-1 transition-opacity group-data-[state=inactive]:opacity-50">
0
</Badge>
Projects
</TabsTrigger>
<TabsTrigger
value="tab-3"
className="group flex-1 flex-col p-3 text-xs data-[state=active]:bg-muted data-[state=active]:shadow-none"
>
<Badge className="mb-1.5 min-w-5 px-1 transition-opacity group-data-[state=inactive]:opacity-50">
7
</Badge>
Packages
</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 };