Tabs
A simplified wrapper for Shadcn Tabs with flexible option handling and automatic type conversion
Welcome
This is the overview tab content.
Installation
npx shadcn@latest add @glrk-ui/tabsIf you haven't set up the prerequisites yet, check out Prerequest section.
Copy and paste the following code into your project.
"use client"
import { cva, type VariantProps } from "class-variance-authority"
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
import { cn } from "@/lib/utils"
function Tabs({
className,
orientation = "horizontal",
...props
}: TabsPrimitive.Root.Props) {
return (
<TabsPrimitive.Root
data-slot="tabs"
data-orientation={orientation}
className={cn(
"group/tabs flex gap-2 flex-col", // data-horizontal:flex-col
className
)}
{...props}
/>
)
}
const tabsListVariants = cva(
"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
{
variants: {
variant: {
default: "bg-muted",
line: "gap-1 bg-transparent",
},
},
defaultVariants: {
variant: "default",
},
}
)
function TabsList({
className,
variant = "default",
...props
}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
return (
<TabsPrimitive.List
data-slot="tabs-list"
data-variant={variant}
className={cn(tabsListVariants({ variant }), className)}
{...props}
/>
)
}
function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
return (
<TabsPrimitive.Tab
data-slot="tabs-trigger"
className={cn(
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
className
)}
{...props}
/>
)
}
function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
return (
<TabsPrimitive.Panel
data-slot="tabs-content"
className={cn("flex-1 text-sm outline-none", className)}
{...props}
/>
)
}
type tabItemT = {
value: string
trigger: React.ReactNode
content: React.ReactNode
disabled?: boolean
triggerCls?: string
contentCls?: string
}
type tabItemsT = tabItemT[]
type tabsWrapperProps = {
tabs: tabItemsT
listCls?: string
triggerCls?: string
contentCls?: string
}
function TabsWrapper({
tabs,
listCls,
triggerCls,
contentCls,
...props
}: React.ComponentProps<typeof TabsPrimitive.Root> & tabsWrapperProps) {
return (
<Tabs {...props}>
<TabsList className={cn(listCls)}>
{tabs.map(tab => (
<TabsTrigger
key={tab.value}
value={tab.value}
disabled={tab.disabled}
className={cn(triggerCls, tab.triggerCls)}
>
{tab.trigger}
</TabsTrigger>
))}
</TabsList>
{tabs.map(tab => (
<TabsContent
key={tab.value}
value={tab.value}
className={cn(contentCls, tab.contentCls)}
>
{tab.content}
</TabsContent>
))}
</Tabs>
)
}
export {
Tabs,
TabsList,
TabsTrigger,
TabsContent,
tabsListVariants,
TabsWrapper,
type tabItemT,
type tabItemsT,
}Usage
Basic
import { TabsWrapper } from "@/components/ui/tabs";
export function Basic() {
return (
<TabsWrapper
tabs={[
{
value: "overview",
trigger: "Overview",
content: "Over content",
},
{
value: "details",
trigger: <><User /> Details</>,
content: (
<div>
<h3 className="text-lg font-semibold mb-2">Details</h3>
<p>More detailed information here.</p>
</div>
),
},
]}
/>
)
}Controlled
import { useState } from "react"
import { TabsWrapper } from "@/components/tabs-wrapper"
function ControlledTabs() {
const [activeTab, setActiveTab] = useState("profile")
const tabs = [
{
value: "profile",
trigger: "Profile",
content: <ProfileForm />,
},
{
value: "account",
trigger: "Account",
content: <AccountSettings />,
},
{
value: "security",
trigger: "Security",
content: <SecuritySettings />,
},
]
return (
<div>
<div className="mb-4 text-sm text-gray-600">
Current tab: {activeTab}
</div>
<TabsWrapper
tabs={tabs}
value={activeTab}
onValueChange={setActiveTab}
/>
</div>
)
}Custom Styling
import { TabsWrapper } from "@/components/tabs-wrapper"
function StyledTabs() {
const tabs = [
{
value: "code",
trigger: "Code",
content: (
<pre className="bg-gray-900 text-gray-100 p-4 rounded-md">
<code>function hello() {`{\n console.log("Hello")\n}`}</code>
</pre>
),
contentCls: "mt-0",
},
{
value: "preview",
trigger: "Preview",
content: (
<div className="border rounded-md p-4">
<button className="bg-blue-500 text-white px-4 py-2 rounded">
Hello Button
</button>
</div>
),
contentCls: "mt-0",
},
]
return (
<TabsWrapper
tabs={tabs}
defaultValue="code"
listCls="bg-gray-100 p-1 rounded-t-lg"
triggerCls="data-[state=active]:bg-white data-[state=active]:shadow-sm"
contentCls="border border-t-0 rounded-b-lg p-4"
/>
)
}Reference
tabItemT
Prop
Type
TabsWrapper
Prop
Type