Tabs

A component for toggling between related panels on the same page.

Installation


pnpm dlx shadcn@latest add @lumi-ui/tabs

Anatomy

 <Tabs>
  <TabsList>
    <TabsTab/>
  </TabsList>
  <TabsPanel/>
 </Tabs>

Variants

Pill

Underline

Ghost

Solid

Orientation

Pill Vertical

Underline Vertical

Solid Vertical

Ghost Vertical

Migration from shadcn/ui

Component Naming & Structure

The names for the tab trigger and content panel have been updated to be more descriptive.

shadcn/ui	lumi/ui	Change
`TabsTrigger`	`TabsTab`	Renamed
`TabsContent`	`TabsPanel`	Renamed

Styling with Variants

While shadcn/ui provides a single, polished style that you customize with className, our component comes with a built-in variant system. You can get the default pill look (similar to shadcn/ui's) out-of-the-box, or choose another variant like underline with a single prop.

Feature	lumi/ui	shadcn/ui
Available Variants	`pill`, `underline`, `ghost`, `solid`	Default `pill` style only

Migration Example

demo-tabs.tsx

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@/components/ui/tabs";
 
function Demo() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        Make changes to your account here.
      </TabsContent>
      <TabsContent value="password">
        Change your password here.
      </TabsContent>
    </Tabs>
  );
}