Tabs Component

import { Tabs, TabsList, TabsPanel, TabsTrigger } from "@/registry/components/tabs/react/tabs";

export const TabsDemo = () => {
    return (
        <Tabs defaultValue="account" className="grid gutter-2xs">
            <TabsList className="w-fit">
                <TabsTrigger value="account">Account</TabsTrigger>
                <TabsTrigger value="password">Password</TabsTrigger>
            </TabsList>
            <TabsPanel value="account">
                <p>Tab 1 content</p>
            </TabsPanel>
            <TabsPanel value="password">
                <p>Tab 2 content</p>
            </TabsPanel>
        </Tabs>
    );
};

"use client";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import cn from "clsx";
import type * as React from "react";

function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
    return <TabsPrimitive.Root data-slot="tabs" className={cn("tabs", className)} {...props} />;
}
function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
    return (
        <TabsPrimitive.List
            data-slot="tabs-list"
            className={cn("tabs-list", className)}
            {...props}
        />
    );
}
function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
    return (
        <TabsPrimitive.Trigger
            data-slot="tabs-trigger"
            className={cn("tabs-trigger", className)}
            {...props}
        />
    );
}
function TabsPanel({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
    return (
        <TabsPrimitive.Content
            data-slot="tabs-content"
            className={cn("tabs-panel", className)}
            {...props}
        />
    );
}
export { Tabs, TabsList, TabsTrigger, TabsPanel };

.tabs-list {
    display: flex;
    background-color: var(--color-bg-offset-1);
    padding: 3px 3px;
    border-radius: var(--radius-lg);
}

.tabs-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    gap: 0.375rem;
    padding-block: var(--space-3xs);
    padding-inline: var(--space-xs);
    background-color: var(--color-bg-offset-1);
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.tabs-trigger[data-state="active"] {
    background-color: var(--color-bg);
    box-shadow: var(--shadow-sm);
}

.tabs-panel[data-state="inactive"] {
    display: none;
}