Tabs

1import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
2
3<Tabs />

1"use client";
2
3import { Tabs as ArkTabs, useTabsContext } from "@ark-ui/react/tabs";
4import type React from "react";
5import { tv, type VariantProps } from "tailwind-variants";
6import { cn } from "@/lib/utils";
7
8export const useTabs = useTabsContext;
9
10export const Tabs = (props: React.ComponentProps<typeof ArkTabs.Root>) => {
11  const { lazyMount = true, unmountOnExit = true, className, ...rest } = props;
12
13  return (
14    <ArkTabs.Root
15      className={cn(
16        "flex flex-col gap-2",
17        "data-[orientation=vertical]:flex-row",
18        className
19      )}
20      data-slot="tabs"
21      lazyMount={lazyMount}
22      unmountOnExit={unmountOnExit}
23      {...rest}
24    />
25  );
26};
27
28const tabsListVariants = tv({