Components
Loading preview...
modified shadcn's tabs with animations. it is a slightly modified version of it's owner "github.com/list-jonas"
npx shadcn@latest add https://21st.dev/r/cybergaz/animated-shadcn-s-tabs
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/animated-shadcn-s-tabs";
export default function HorizontalTabsShowcase() {
return (
<div className="flex flex-col gap-10">
<div className="w-full max-w-xl">
<h2 className="scroll-m-20 text-xl font-semibold tracking-tight mb-4">
Horizontal Tabs
</h2>
<Tabs defaultValue="option1">
<TabsList>
<TabsTrigger value="option1">Option 1</TabsTrigger>
<TabsTrigger value="option2">Option 2</TabsTrigger>
<TabsTrigger value="option3">Option 3</TabsTrigger>
<TabsTrigger value="option4">Option 4</TabsTrigger>
</TabsList>
<TabsContent value="option1">
<div className="flex flex-col gap-1 p-4 border rounded-lg">
<span className="text-lg font-semibold"> Option 1 </span>
Culpa et irure aute incididunt anim fugiat elit irure ullamco consectetur consequat labore. Dolore officia anim do sunt. Esse aliquip amet Lorem reprehenderit. Aliqua ea id reprehenderit dolor qui et aliquip. Elit sit sit ut id esse ex velit nostrud minim ea sint reprehenderit ex reprehenderit. Cillum magna in elit est duis exercitation elit dolor eu deserunt reprehenderit. In exercitation tempor mollit aute labore.
</div>
</TabsContent>
<TabsContent value="option2">
<div className="flex flex-col gap-1 p-4 border rounded-lg">
<span className="text-lg font-semibold"> Option 2 </span>
Culpa et irure aute incididunt anim fugiat elit irure ullamco consectetur consequat labore. Dolore officia anim do sunt. Esse aliquip amet Lorem reprehenderit. Aliqua ea id reprehenderit dolor qui et aliquip. Elit sit sit ut id esse ex velit nostrud minim ea sint reprehenderit ex reprehenderit. Cillum magna in elit est duis exercitation elit dolor eu deserunt reprehenderit. In exercitation tempor mollit aute labore.
</div>
</TabsContent>
<TabsContent value="option3">
<div className="flex flex-col gap-1 p-4 border rounded-lg">
<span className="text-lg font-semibold"> Option 3 </span>
Culpa et irure aute incididunt anim fugiat elit irure ullamco consectetur consequat labore. Dolore officia anim do sunt. Esse aliquip amet Lorem reprehenderit. Aliqua ea id reprehenderit dolor qui et aliquip. Elit sit sit ut id esse ex velit nostrud minim ea sint reprehenderit ex reprehenderit. Cillum magna in elit est duis exercitation elit dolor eu deserunt reprehenderit. In exercitation tempor mollit aute labore.
</div>
</TabsContent>
<TabsContent value="option4">
<div className="flex flex-col gap-1 p-4 border rounded-lg">
<span className="text-lg font-semibold"> Option 4 </span>
Culpa et irure aute incididunt anim fugiat elit irure ullamco consectetur consequat labore. Dolore officia anim do sunt. Esse aliquip amet Lorem reprehenderit. Aliqua ea id reprehenderit dolor qui et aliquip. Elit sit sit ut id esse ex velit nostrud minim ea sint reprehenderit ex reprehenderit. Cillum magna in elit est duis exercitation elit dolor eu deserunt reprehenderit. In exercitation tempor mollit aute labore.
</div>
</TabsContent>
</Tabs>
</div>
<div className="w-full max-w-xl">
<h2 className="scroll-m-20 text-xl font-semibold tracking-tight mb-4">
With indicator classname
</h2>
<Tabs defaultValue="option1">
<TabsList className="flex gap-2 p-1 w-full h-12 bg-transparent" indicatorClassName="bg-transparent border-gray-800 shadow-none" >
<TabsTrigger value="option1">Option 1</TabsTrigger>
<TabsTrigger value="option2">Option 2</TabsTrigger>
<TabsTrigger value="option3">Option 3</TabsTrigger>
<TabsTrigger value="option4">Option 4</TabsTrigger>
</TabsList>
<TabsContent value="option1">
<div className="flex flex-col gap-1 p-4 border rounded-lg">
<span className="text-lg font-semibold"> Option 1 </span>
Culpa et irure aute incididunt anim fugiat elit irure ullamco consectetur consequat labore. Dolore officia anim do sunt. Esse aliquip amet Lorem reprehenderit. Aliqua ea id reprehenderit dolor qui et aliquip. Elit sit sit ut id esse ex velit nostrud minim ea sint reprehenderit ex reprehenderit. Cillum magna in elit est duis exercitation elit dolor eu deserunt reprehenderit. In exercitation tempor mollit aute labore.
</div>
</TabsContent>
<TabsContent value="option2">
<div className="flex flex-col gap-1 p-4 border rounded-lg">
<span className="text-lg font-semibold"> Option 2 </span>
Culpa et irure aute incididunt anim fugiat elit irure ullamco consectetur consequat labore. Dolore officia anim do sunt. Esse aliquip amet Lorem reprehenderit. Aliqua ea id reprehenderit dolor qui et aliquip. Elit sit sit ut id esse ex velit nostrud minim ea sint reprehenderit ex reprehenderit. Cillum magna in elit est duis exercitation elit dolor eu deserunt reprehenderit. In exercitation tempor mollit aute labore.
</div>
</TabsContent>
<TabsContent value="option3">
<div className="flex flex-col gap-1 p-4 border rounded-lg">
<span className="text-lg font-semibold"> Option 3 </span>
Culpa et irure aute incididunt anim fugiat elit irure ullamco consectetur consequat labore. Dolore officia anim do sunt. Esse aliquip amet Lorem reprehenderit. Aliqua ea id reprehenderit dolor qui et aliquip. Elit sit sit ut id esse ex velit nostrud minim ea sint reprehenderit ex reprehenderit. Cillum magna in elit est duis exercitation elit dolor eu deserunt reprehenderit. In exercitation tempor mollit aute labore.
</div>
</TabsContent>
<TabsContent value="option4">
<div className="flex flex-col gap-1 p-4 border rounded-lg">
<span className="text-lg font-semibold"> Option 4 </span>
Culpa et irure aute incididunt anim fugiat elit irure ullamco consectetur consequat labore. Dolore officia anim do sunt. Esse aliquip amet Lorem reprehenderit. Aliqua ea id reprehenderit dolor qui et aliquip. Elit sit sit ut id esse ex velit nostrud minim ea sint reprehenderit ex reprehenderit. Cillum magna in elit est duis exercitation elit dolor eu deserunt reprehenderit. In exercitation tempor mollit aute labore.
</div>
</TabsContent>
</Tabs>
</div>
<div className="w-full max-w-xl">
<h2 className="scroll-m-20 text-xl font-semibold tracking-tight mb-4">
Vertical Tabs
</h2>
<Tabs
defaultValue="option1"
className="flex flex-row gap-2"
>
<TabsList className="mt-2 flex flex-col items-stretch w-full h-auto">
<TabsTrigger value="option1">Option 1</TabsTrigger>
<TabsTrigger value="option2">Option 2</TabsTrigger>
<TabsTrigger value="option3">Option 3</TabsTrigger>
<TabsTrigger value="option4">Option 4</TabsTrigger>
</TabsList>
<TabsContent value="option1">
<div className="flex flex-col gap-1 p-4 border rounded-lg">
<span className="text-lg font-semibold"> Option 1 </span>
Culpa et irure aute incididunt anim fugiat elit irure ullamco consectetur consequat labore. Dolore officia anim do sunt. Esse aliquip amet Lorem reprehenderit. Aliqua ea id reprehenderit dolor qui et aliquip. Elit sit sit ut id esse ex velit nostrud minim ea sint reprehenderit ex reprehenderit. Cillum magna in elit est duis exercitation elit dolor eu deserunt reprehenderit. In exercitation tempor mollit aute labore.
</div>
</TabsContent>
<TabsContent value="option2">
<div className="flex flex-col gap-1 p-4 border rounded-lg">
<span className="text-lg font-semibold"> Option 2 </span>
Culpa et irure aute incididunt anim fugiat elit irure ullamco consectetur consequat labore. Dolore officia anim do sunt. Esse aliquip amet Lorem reprehenderit. Aliqua ea id reprehenderit dolor qui et aliquip. Elit sit sit ut id esse ex velit nostrud minim ea sint reprehenderit ex reprehenderit. Cillum magna in elit est duis exercitation elit dolor eu deserunt reprehenderit. In exercitation tempor mollit aute labore.
</div>
</TabsContent>
<TabsContent value="option3">
<div className="flex flex-col gap-1 p-4 border rounded-lg">
<span className="text-lg font-semibold"> Option 3 </span>
Culpa et irure aute incididunt anim fugiat elit irure ullamco consectetur consequat labore. Dolore officia anim do sunt. Esse aliquip amet Lorem reprehenderit. Aliqua ea id reprehenderit dolor qui et aliquip. Elit sit sit ut id esse ex velit nostrud minim ea sint reprehenderit ex reprehenderit. Cillum magna in elit est duis exercitation elit dolor eu deserunt reprehenderit. In exercitation tempor mollit aute labore.
</div>
</TabsContent>
<TabsContent value="option4">
<div className="flex flex-col gap-1 p-4 border rounded-lg">
<span className="text-lg font-semibold"> Option 4 </span>
Culpa et irure aute incididunt anim fugiat elit irure ullamco consectetur consequat labore. Dolore officia anim do sunt. Esse aliquip amet Lorem reprehenderit. Aliqua ea id reprehenderit dolor qui et aliquip. Elit sit sit ut id esse ex velit nostrud minim ea sint reprehenderit ex reprehenderit. Cillum magna in elit est duis exercitation elit dolor eu deserunt reprehenderit. In exercitation tempor mollit aute labore.
</div>
</TabsContent>
</Tabs>
</div>
</div>
);
}