Zaidan

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Installation

CLI

npx shadcn@latest add @zaidan/tabs

pnpx shadcn add @zaidan/tabs

yarn dlx shadcn@latest add @zaidan/tabs

bunx shadcn@latest add @zaidan/tabs

Manual

Copy and paste the following code into your project.

1
import type { PolymorphicProps } from "@kobalte/core";
2
import {
3
  Content,
4
  List,
5
  Root,
6
  type TabsContentProps as TabsContentPrimitiveProps,
7
  type TabsListProps as TabsListPrimitiveProps,
8
  type TabsRootProps,
9
  type TabsTriggerProps as TabsTriggerPrimitiveProps,
10
  Trigger,
11
} from "@kobalte/core/tabs";
12
import { cva, type VariantProps } from "class-variance-authority";
13
import { type ComponentProps, mergeProps, splitProps, type ValidComponent } from "solid-js";
14
import { cn } from "~/lib/utils";
15

16
type TabsProps<T extends ValidComponent = "div"> = PolymorphicProps<T, TabsRootProps<T>> &
17
  Pick<ComponentProps<T>, "class" | "children">;
18

19
const Tabs = <T extends ValidComponent = "div">(props: TabsProps<T>) => {
20
  const mergedProps = mergeProps({ orientation: "horizontal" }, props);
21
  const [local, others] = splitProps(mergedProps, ["class", "orientation"]);
22
  return (
23
    <Root
24
      data-slot="tabs"
25
      data-orientation={local.orientation}
26
      orientation={local.orientation}
27
      class={cn("group/tabs z-tabs flex data-[orientation=horizontal]:flex-col", local.class)}
28
      {...others}
29
    />
30
  );
31
};
32

33
const tabsListVariants = cva(
34
  "group/tabs-list z-tabs-list inline-flex w-fit items-center justify-center text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
35
  {
36
    variants: {
37
      variant: {
38
        default: "z-tabs-list-variant-default bg-muted",
39
        line: "z-tabs-list-variant-line gap-1 bg-transparent",
40
      },
41
    },
42
    defaultVariants: {
43
      variant: "default",
44
    },
45
  },
46
);
47

48
type TabsListProps<T extends ValidComponent = "div"> = PolymorphicProps<
49
  T,
50
  TabsListPrimitiveProps<T>
51
> &
52
  VariantProps<typeof tabsListVariants> &
53
  Pick<ComponentProps<T>, "class" | "children">;
54

55
const TabsList = <T extends ValidComponent = "div">(props: TabsListProps<T>) => {
56
  const [local, others] = splitProps(props as TabsListProps, ["variant", "class"]);
57
  return (
58
    <List
59
      class={cn(tabsListVariants({ variant: local.variant }), local.class)}
60
      data-slot="tabs-list"
61
      data-variant={local.variant}
62
      {...others}
63
    />
64
  );
65
};
66

67
type TabTriggerProps<T extends ValidComponent = "button"> = PolymorphicProps<
68
  T,
69
  TabsTriggerPrimitiveProps<T>
70
> &
71
  Pick<ComponentProps<T>, "class" | "children">;
72

73
const TabsTrigger = <T extends ValidComponent = "button">(props: TabTriggerProps<T>) => {
74
  const [local, others] = splitProps(props as TabTriggerProps, ["class"]);
75
  return (
76
    <Trigger
77
      data-slot="tabs-trigger"
78
      class={cn(
79
        "relative z-tabs-trigger inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground/60 transition-all hover:text-foreground focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
80
        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-selected:bg-transparent dark:group-data-[variant=line]/tabs-list:data-selected:border-transparent dark:group-data-[variant=line]/tabs-list:data-selected:bg-transparent",
81
        "data-selected:bg-background data-selected:text-foreground dark:data-selected:border-input dark:data-selected:bg-input/30 dark:data-selected:text-foreground",
82
        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-selected:after:opacity-100",
83
        local.class,
84
      )}
85
      {...others}
86
    />
87
  );
88
};
89

90
type TabsContentProps<T extends ValidComponent = "div"> = PolymorphicProps<
91
  T,
92
  TabsContentPrimitiveProps<T>
93
> &
94
  Pick<ComponentProps<T>, "class" | "children">;
95

96
const TabsContent = <T extends ValidComponent = "div">(props: TabsContentProps<T>) => {
97
  const [local, others] = splitProps(props as TabsContentProps, ["class"]);
98
  return (
99
    <Content
100
      data-slot="tabs-content"
101
      class={cn("z-tabs-content flex-1 outline-none", local.class)}
102
      {...others}
103
    />
104
  );
105
};
106

107
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

Examples

Here are the source code of all the examples from the preview page:

Basic

import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";

function TabsBasic() {
  return (
    <Example title="Basic">
      <Tabs defaultValue="home">
        <TabsList>
          <TabsTrigger value="home">Home</TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>
      </Tabs>
    </Example>
  );
}

Line

import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";

function TabsLine() {
  return (
    <Example title="Line">
      <Tabs defaultValue="overview">
        <TabsList variant="line">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="analytics">Analytics</TabsTrigger>
          <TabsTrigger value="reports">Reports</TabsTrigger>
        </TabsList>
      </Tabs>
    </Example>
  );
}

Variants Alignment

import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";

function TabsVariantsComparison() {
  return (
    <Example title="Variants Alignment">
      <div class="flex gap-4">
        <Tabs defaultValue="overview">
          <TabsList>
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="analytics">Analytics</TabsTrigger>
          </TabsList>
        </Tabs>
        <Tabs defaultValue="overview">
          <TabsList variant="line">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="analytics">Analytics</TabsTrigger>
          </TabsList>
        </Tabs>
      </div>
    </Example>
  );
}

Disabled

import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";

function TabsDisabled() {
  return (
    <Example title="Disabled">
      <Tabs defaultValue="home">
        <TabsList>
          <TabsTrigger value="home">Home</TabsTrigger>
          <TabsTrigger value="settings" disabled>
            Disabled
          </TabsTrigger>
        </TabsList>
      </Tabs>
    </Example>
  );
}

With Icons

import { AppWindow, Code } from "lucide-solid";
import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";

function TabsWithIcons() {
  return (
    <Example title="With Icons">
      <Tabs defaultValue="preview">
        <TabsList>
          <TabsTrigger value="preview">
            <AppWindow />
            Preview
          </TabsTrigger>
          <TabsTrigger value="code">
            <Code />
            Code
          </TabsTrigger>
        </TabsList>
      </Tabs>
    </Example>
  );
}

Icon Only

import { Home, Search, Settings } from "lucide-solid";
import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";

function TabsIconOnly() {
  return (
    <Example title="Icon Only">
      <Tabs defaultValue="home">
        <TabsList>
          <TabsTrigger value="home">
            <Home />
          </TabsTrigger>
          <TabsTrigger value="search">
            <Search />
          </TabsTrigger>
          <TabsTrigger value="settings">
            <Settings />
          </TabsTrigger>
        </TabsList>
      </Tabs>
    </Example>
  );
}

Multiple

import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";

function TabsMultiple() {
  return (
    <Example title="Multiple">
      <Tabs defaultValue="overview">
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="analytics">Analytics</TabsTrigger>
          <TabsTrigger value="reports">Reports</TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>
      </Tabs>
    </Example>
  );
}

With Content

import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";

function TabsWithContent() {
  return (
    <Example title="With Content">
      <Tabs defaultValue="account">
        <TabsList>
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="password">Password</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
        </TabsList>
        <div class="rounded-lg border p-4">
          <TabsContent value="account">
            Manage your account preferences and profile information.
          </TabsContent>
          <TabsContent value="password">
            Update your password to keep your account secure.
          </TabsContent>
          <TabsContent value="notifications">
            Configure how you receive notifications and alerts.
          </TabsContent>
        </div>
      </Tabs>
    </Example>
  );
}

Line With Content

import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";

function TabsLineWithContent() {
  return (
    <Example title="Line With Content">
      <Tabs defaultValue="account">
        <TabsList variant="line">
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="password">Password</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
        </TabsList>
        <div class="rounded-lg border p-4">
          <TabsContent value="account">
            Manage your account preferences and profile information.
          </TabsContent>
          <TabsContent value="password">
            Update your password to keep your account secure.
          </TabsContent>
          <TabsContent value="notifications">
            Configure how you receive notifications and alerts.
          </TabsContent>
        </div>
      </Tabs>
    </Example>
  );
}

Line Disabled

import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";

function TabsLineDisabled() {
  return (
    <Example title="Line Disabled">
      <Tabs defaultValue="overview">
        <TabsList variant="line">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="analytics">Analytics</TabsTrigger>
          <TabsTrigger value="reports" disabled>
            Reports
          </TabsTrigger>
        </TabsList>
      </Tabs>
    </Example>
  );
}

import { MoreHorizontal } from "lucide-solid";
import { Button } from "~/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";

function TabsWithDropdown() {
  return (
    <Example title="With Dropdown">
      <Tabs defaultValue="overview">
        <div class="flex items-center justify-between">
          <TabsList>
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="analytics">Analytics</TabsTrigger>
            <TabsTrigger value="reports">Reports</TabsTrigger>
          </TabsList>
          <DropdownMenu placement="bottom-end">
            <DropdownMenuTrigger as={Button} variant="ghost" size="icon" class="size-8">
              <MoreHorizontal />
              <span class="sr-only">More options</span>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuItem>Settings</DropdownMenuItem>
              <DropdownMenuItem>Export</DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem>Archive</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>

        <div class="rounded-lg border p-4">
          <TabsContent value="overview">
            View your dashboard metrics and key performance indicators.
          </TabsContent>
          <TabsContent value="analytics">
            Detailed analytics and insights about your data.
          </TabsContent>
          <TabsContent value="reports">Generate and view custom reports.</TabsContent>
        </div>
      </Tabs>
    </Example>
  );
}

Vertical

import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";

function TabsVertical() {
  return (
    <Example title="Vertical">
      <Tabs defaultValue="account" orientation="vertical">
        <TabsList>
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="password">Password</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
        </TabsList>
        <div class="rounded-lg border p-4">
          <TabsContent value="account">
            Manage your account preferences and profile information.
          </TabsContent>
          <TabsContent value="password">
            Update your password to keep your account secure. Use a strong password with a mix of
            letters, numbers, and symbols.
          </TabsContent>
          <TabsContent value="notifications">
            Configure how you receive notifications and alerts. Choose which types of notifications
            you want to receive and how you want to receive them.
          </TabsContent>
        </div>
      </Tabs>
    </Example>
  );
}

With Input and Button

import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";

function TabsWithInputAndButton() {
  return (
    <Example title="With Input and Button" containerClass="col-span-full">
      <Tabs defaultValue="overview" class="mx-auto w-full max-w-lg">
        <div class="flex items-center gap-4">
          <TabsList>
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="analytics">Analytics</TabsTrigger>
          </TabsList>
          <div class="ml-auto flex items-center gap-2">
            <Input placeholder="Search..." class="w-44" />
            <Button>Action</Button>
          </div>
        </div>
        <div class="rounded-lg border p-4">
          <TabsContent value="overview">
            View your dashboard metrics and key performance indicators.
          </TabsContent>
          <TabsContent value="analytics">
            Detailed analytics and insights about your data.
          </TabsContent>
          <TabsContent value="reports">Generate and view custom reports.</TabsContent>
        </div>
      </Tabs>
    </Example>
  );
}

Preview Docs

Build your own Zaidan

When you're done, click Setup Project to setup your new project.