Components
Loading preview...
Enchanced shadcn/ui tabs
npx shadcn@latest add https://21st.dev/r/originui/tabsimport { Badge } from "@/components/ui/badge";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Box, House, PanelsTopLeft } from "lucide-react";
function Component() {
return (
<Tabs defaultValue="tab-1">
<ScrollArea>
<TabsList className="mb-3">
<TabsTrigger value="tab-1">
<House
className="-ms-0.5 me-1.5 opacity-60"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
Overview
</TabsTrigger>
<TabsTrigger value="tab-2" className="group">
<PanelsTopLeft
className="-ms-0.5 me-1.5 opacity-60"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
Projects
<Badge
className="ms-1.5 min-w-5 bg-primary/15 px-1 transition-opacity group-data-[state=inactive]:opacity-50"
variant="secondary"
>
3
</Badge>
</TabsTrigger>
<TabsTrigger value="tab-3" className="group">
<Box
className="-ms-0.5 me-1.5 opacity-60"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
Packages
<Badge className="ms-1.5 transition-opacity group-data-[state=inactive]:opacity-50">
New
</Badge>
</TabsTrigger>
</TabsList>
<ScrollBar orientation="horizontal" />
</ScrollArea>
<TabsContent value="tab-1">
<p className="p-4 pt-1 text-center text-xs text-muted-foreground">Content for Tab 1</p>
</TabsContent>
<TabsContent value="tab-2">
<p className="p-4 pt-1 text-center text-xs text-muted-foreground">Content for Tab 2</p>
</TabsContent>
<TabsContent value="tab-3">
<p className="p-4 pt-1 text-center text-xs text-muted-foreground">Content for Tab 3</p>
</TabsContent>
</Tabs>
);
}
export { Component };