Tabs | Cortexcn

Installation

pnpm dlx shadcn@latest add @cortexcn/tabs

pnpm dlx shadcn@latest add @cortexcn/tabs

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants } from "@/components/tabs";

Examples

Basic

import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"

export function TabsBasic() {
  return (
    <div className="flex flex-col gap-6">
      <Tabs defaultValue="home">
        <TabsList>
          <TabsTrigger value="home">Home</TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>
      </Tabs>
    </div>
  )
}

import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"export function TabsBasic() {  return (    <div className="flex flex-col gap-6">      <Tabs defaultValue="home">        <TabsList>          <TabsTrigger value="home">Home</TabsTrigger>          <TabsTrigger value="settings">Settings</TabsTrigger>        </TabsList>      </Tabs>    </div>  )}

Line

import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"

export function TabsLine() {
  return (
    <div className="flex flex-col gap-6">
      <Tabs defaultValue="overview">
        <TabsList variant="line">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="analytics">Analytics</TabsTrigger>
          <TabsTrigger value="reports">Reports</TabsTrigger>
        </TabsList>
      </Tabs>
    </div>
  )
}

import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"export function TabsLine() {  return (    <div className="flex flex-col gap-6">      <Tabs defaultValue="overview">        <TabsList variant="line">          <TabsTrigger value="overview">Overview</TabsTrigger>          <TabsTrigger value="analytics">Analytics</TabsTrigger>          <TabsTrigger value="reports">Reports</TabsTrigger>        </TabsList>      </Tabs>    </div>  )}

Variants alignment

import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"

export function TabsVariantsComparison() {
  return (
    <div className="flex flex-col gap-6">
      <div className="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>
    </div>
  )
}

import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"export function TabsVariantsComparison() {  return (    <div className="flex flex-col gap-6">      <div className="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>    </div>  )}

Disabled

import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"

export function TabsDisabled() {
  return (
    <div className="flex flex-col gap-6">
      <Tabs defaultValue="home">
        <TabsList>
          <TabsTrigger value="home">Home</TabsTrigger>
          <TabsTrigger value="settings" disabled>
            Disabled
          </TabsTrigger>
        </TabsList>
      </Tabs>
    </div>
  )
}

import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"export function TabsDisabled() {  return (    <div className="flex flex-col gap-6">      <Tabs defaultValue="home">        <TabsList>          <TabsTrigger value="home">Home</TabsTrigger>          <TabsTrigger value="settings" disabled>            Disabled          </TabsTrigger>        </TabsList>      </Tabs>    </div>  )}

With icons

import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"
import { AppWindowIcon, CodeIcon } from "lucide-react"

export function TabsWithIcons() {
  return (
    <div className="flex flex-col gap-6">
      <Tabs defaultValue="preview">
        <TabsList>
          <TabsTrigger value="preview">
            <AppWindowIcon data-icon="inline-start" />
            Preview
          </TabsTrigger>
          <TabsTrigger value="code">
            <CodeIcon data-icon="inline-start" />
            Code
          </TabsTrigger>
        </TabsList>
      </Tabs>
    </div>
  )
}

import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"import { AppWindowIcon, CodeIcon } from "lucide-react"export function TabsWithIcons() {  return (    <div className="flex flex-col gap-6">      <Tabs defaultValue="preview">        <TabsList>          <TabsTrigger value="preview">            <AppWindowIcon data-icon="inline-start" />            Preview          </TabsTrigger>          <TabsTrigger value="code">            <CodeIcon data-icon="inline-start" />            Code          </TabsTrigger>        </TabsList>      </Tabs>    </div>  )}

Icon only

import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"
import { HomeIcon, SearchIcon, SettingsIcon } from "lucide-react"

export function TabsIconOnly() {
  return (
    <div className="flex flex-col gap-6">
      <Tabs defaultValue="home">
        <TabsList>
          <TabsTrigger value="home">
            <HomeIcon />
          </TabsTrigger>
          <TabsTrigger value="search">
            <SearchIcon />
          </TabsTrigger>
          <TabsTrigger value="settings">
            <SettingsIcon />
          </TabsTrigger>
        </TabsList>
      </Tabs>
    </div>
  )
}

import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"import { HomeIcon, SearchIcon, SettingsIcon } from "lucide-react"export function TabsIconOnly() {  return (    <div className="flex flex-col gap-6">      <Tabs defaultValue="home">        <TabsList>          <TabsTrigger value="home">            <HomeIcon />          </TabsTrigger>          <TabsTrigger value="search">            <SearchIcon />          </TabsTrigger>          <TabsTrigger value="settings">            <SettingsIcon />          </TabsTrigger>        </TabsList>      </Tabs>    </div>  )}

Multiple

import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"

export function TabsMultiple() {
  return (
    <div className="flex flex-col gap-6">
      <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>
    </div>
  )
}

import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"export function TabsMultiple() {  return (    <div className="flex flex-col gap-6">      <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>    </div>  )}

With content

Manage your account preferences and profile information.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/tabs"

export function TabsWithContent() {
  return (
    <div className="flex flex-col gap-6">
      <Tabs defaultValue="account">
        <TabsList>
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="password">Password</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
        </TabsList>
        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6 style-rhea:rounded-xl style-rhea:p-6">
          <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>
    </div>
  )
}

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/tabs"export function TabsWithContent() {  return (    <div className="flex flex-col gap-6">      <Tabs defaultValue="account">        <TabsList>          <TabsTrigger value="account">Account</TabsTrigger>          <TabsTrigger value="password">Password</TabsTrigger>          <TabsTrigger value="notifications">Notifications</TabsTrigger>        </TabsList>        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6 style-rhea:rounded-xl style-rhea:p-6">          <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>    </div>  )}

Line with content

Manage your account preferences and profile information.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/tabs"

export function TabsLineWithContent() {
  return (
    <div className="flex flex-col gap-6">
      <Tabs defaultValue="account">
        <TabsList variant="line">
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="password">Password</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
        </TabsList>
        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6 style-rhea:rounded-xl style-rhea:p-6">
          <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>
    </div>
  )
}

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/tabs"export function TabsLineWithContent() {  return (    <div className="flex flex-col gap-6">      <Tabs defaultValue="account">        <TabsList variant="line">          <TabsTrigger value="account">Account</TabsTrigger>          <TabsTrigger value="password">Password</TabsTrigger>          <TabsTrigger value="notifications">Notifications</TabsTrigger>        </TabsList>        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6 style-rhea:rounded-xl style-rhea:p-6">          <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>    </div>  )}

Line disabled

import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"

export function TabsLineDisabled() {
  return (
    <div className="flex flex-col gap-6">
      <Tabs defaultValue="overview">
        <TabsList variant="line">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="analytics">Analytics</TabsTrigger>
          <TabsTrigger value="reports" disabled>
            Reports
          </TabsTrigger>
        </TabsList>
      </Tabs>
    </div>
  )
}

import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"export function TabsLineDisabled() {  return (    <div className="flex flex-col gap-6">      <Tabs defaultValue="overview">        <TabsList variant="line">          <TabsTrigger value="overview">Overview</TabsTrigger>          <TabsTrigger value="analytics">Analytics</TabsTrigger>          <TabsTrigger value="reports" disabled>            Reports          </TabsTrigger>        </TabsList>      </Tabs>    </div>  )}

View your dashboard metrics and key performance indicators.

import { Button } from "@/components/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/dropdown-menu"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/tabs"
import { MoreHorizontalIcon } from "lucide-react"

export function TabsWithDropdown() {
  return (
    <div className="flex flex-col gap-6">
      <Tabs defaultValue="overview">
        <div className="flex items-center justify-between">
          <TabsList>
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="analytics">Analytics</TabsTrigger>
            <TabsTrigger value="reports">Reports</TabsTrigger>
          </TabsList>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="size-8">
                <MoreHorizontalIcon />
                <span className="sr-only">More options</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem>Settings</DropdownMenuItem>
              <DropdownMenuItem>Export</DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem>Archive</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>

        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6 style-rhea:rounded-xl style-rhea:p-6">
          <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>
    </div>
  )
}

import { Button } from "@/components/button"import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/dropdown-menu"import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/tabs"import { MoreHorizontalIcon } from "lucide-react"export function TabsWithDropdown() {  return (    <div className="flex flex-col gap-6">      <Tabs defaultValue="overview">        <div className="flex items-center justify-between">          <TabsList>            <TabsTrigger value="overview">Overview</TabsTrigger>            <TabsTrigger value="analytics">Analytics</TabsTrigger>            <TabsTrigger value="reports">Reports</TabsTrigger>          </TabsList>          <DropdownMenu>            <DropdownMenuTrigger asChild>              <Button variant="ghost" size="icon" className="size-8">                <MoreHorizontalIcon />                <span className="sr-only">More options</span>              </Button>            </DropdownMenuTrigger>            <DropdownMenuContent align="end">              <DropdownMenuItem>Settings</DropdownMenuItem>              <DropdownMenuItem>Export</DropdownMenuItem>              <DropdownMenuSeparator />              <DropdownMenuItem>Archive</DropdownMenuItem>            </DropdownMenuContent>          </DropdownMenu>        </div>        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6 style-rhea:rounded-xl style-rhea:p-6">          <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>    </div>  )}

Vertical

Manage your account preferences and profile information.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/tabs"

export function TabsVertical() {
  return (
    <div className="flex flex-col gap-6">
      <Tabs defaultValue="account" orientation="vertical">
        <TabsList>
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="password">Password</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
        </TabsList>
        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6 style-rhea:rounded-xl style-rhea:p-6">
          <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>
    </div>
  )
}

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/tabs"export function TabsVertical() {  return (    <div className="flex flex-col gap-6">      <Tabs defaultValue="account" orientation="vertical">        <TabsList>          <TabsTrigger value="account">Account</TabsTrigger>          <TabsTrigger value="password">Password</TabsTrigger>          <TabsTrigger value="notifications">Notifications</TabsTrigger>        </TabsList>        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6 style-rhea:rounded-xl style-rhea:p-6">          <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>    </div>  )}

With input and button

View your dashboard metrics and key performance indicators.

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

export function TabsWithInputAndButton() {
  return (
    <div className="flex flex-col gap-6">
      <Tabs defaultValue="overview" className="mx-auto w-full max-w-lg">
        <div className="flex items-center gap-4">
          <TabsList>
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="analytics">Analytics</TabsTrigger>
          </TabsList>
          <div className="ml-auto flex items-center gap-2">
            <Input placeholder="Search..." className="w-44" />
            <Button>Action</Button>
          </div>
        </div>
        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6 style-rhea:rounded-xl style-rhea:p-6">
          <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>
    </div>
  )
}

import { Button } from "@/components/button"import { Input } from "@/components/input"import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/tabs"export function TabsWithInputAndButton() {  return (    <div className="flex flex-col gap-6">      <Tabs defaultValue="overview" className="mx-auto w-full max-w-lg">        <div className="flex items-center gap-4">          <TabsList>            <TabsTrigger value="overview">Overview</TabsTrigger>            <TabsTrigger value="analytics">Analytics</TabsTrigger>          </TabsList>          <div className="ml-auto flex items-center gap-2">            <Input placeholder="Search..." className="w-44" />            <Button>Action</Button>          </div>        </div>        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6 style-rhea:rounded-xl style-rhea:p-6">          <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>    </div>  )}

Adapted from the shadcn/ui Tabs (MIT).