"use client"; import * as TabsPrimitive from "@radix-ui/react-tabs"; import { cva, type VariantProps } from "class-variance-authority"; import type * as React from "react"; import { cn } from "@/lib/registry/cn"; const tabsListVariants = cva( "inline-flex h-9 w-fit items-center justify-center", { variants: { variant: { line: "", "soft-rounded": "", segmented: "h-10 rounded-lg bg-muted p-1", }, }, defaultVariants: { variant: "line", }, }, ); const tabsTriggerVariants = cva( "inline-flex h-9 items-center justify-center gap-1.5 text-base font-medium whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { line: "text-neutral data-[state=active]:text-primary border-b-2 border-border data-[state=active]:border-primary hover:cursor-pointer px-4", "soft-rounded": "text-neutral data-[state=active]:text-primary data-[state=active]:bg-primary-background hover:cursor-pointer px-4 rounded-[9999px]", segmented: "h-8 text-muted-foreground data-[state=active]:text-foreground data-[state=active]:bg-primary-background hover:cursor-pointer px-3 rounded-md data-[state=active]:shadow-sm", }, }, defaultVariants: { variant: "line", }, }, ); function Tabs({ className, ...props }: React.ComponentProps) { return ( ); } function TabsList({ className, variant, ...props }: React.ComponentProps & VariantProps) { return ( ); } function TabsTrigger({ className, variant, ...props }: React.ComponentProps & VariantProps) { return ( ); } function TabsContent({ className, ...props }: React.ComponentProps) { return ( ); } export { Tabs, TabsContent, TabsList, TabsTrigger };

Tabs

Showcase

Tabs