Components
Loading preview...
Tabs with varients
npx shadcn@latest add https://21st.dev/r/bankkroll/tabs"use client"
import * as React from "react"
import {
Tabs,
TabsList,
TabsTrigger,
TabsContent,
} from "@/components/ui/tabs"
function BaseTabs({ variant }: { variant: any }) {
return (
<Tabs defaultValue="tab1" variant={variant} className="w-full max-w-md mx-auto">
<TabsList>
<TabsTrigger value="tab1">Tab One</TabsTrigger>
<TabsTrigger value="tab2">Tab Two</TabsTrigger>
<TabsTrigger value="tab3">Tab Three</TabsTrigger>
</TabsList>
<TabsContent value="tab1">This is tab one content.</TabsContent>
<TabsContent value="tab2">Here goes content for tab two.</TabsContent>
<TabsContent value="tab3">Tab three's content shows here.</TabsContent>
</Tabs>
)
}
function DemoDefault() {
return <BaseTabs variant="default" />
}
function DemoUnderline() {
return <BaseTabs variant="underline" />
}
function DemoPill() {
return <BaseTabs variant="pill" />
}
function DemoRounded() {
return <BaseTabs variant="rounded" />
}
function DemoFolder() {
return <BaseTabs variant="folder" />
}
export {
DemoDefault,
DemoUnderline,
DemoPill,
DemoRounded,
DemoFolder,
}