Tabs

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

Installation


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

Basic Usage

import { Tabs, TabsListContent, TabsPanel, TabsTab } from "@/registry/ui/tabs";

<Tabs>
  <TabsListContent>
    <TabsTab>Tab 1</TabsTab>
    <TabsTab>Tab 2</TabsTab>
  </TabsListContent>
  <TabsPanel>Content 1</TabsPanel>
  <TabsPanel>Content 2</TabsPanel>
</Tabs>

Anatomy

 <Tabs>
   <TabsListContent>
     <TabsTab/>
   </TabsListContent>
   <TabsPanel/>
 </Tabs>

Cookbook

Note

We've added css variables to handle vertical tabs by default. If your app does not need vertical tabs, you can delete all the data-[orientation=vertical] styles.

Underline

Ghost

Ignore the TabsIndicator if you're only styling text.

Note

The TabsListContent component is a composite component for common usage that has default "pill" like indicator. Tweaking the styles of TabIndicator to fit your design system.

API Reference

Primitives

Component	Description
`Tabs`	Groups the tabs and the corresponding panels. Renders a `<div>` element.
`TabsList`	Groups the individual tab buttons. Renders a `<div>` element.
`TabsTab`	An individual interactive tab button that toggles the corresponding panel. Renders a `<button>` element.
`TabsIndicator`	A visual indicator that can be styled to match the position of the currently active tab. Renders a `<span>` element.
`TabsPanel`	A panel displayed when the corresponding tab is active. Renders a `<div>` element.

Composite Component

Component	Description
`TabsListContent`	A composite component that wraps the `TabsList` and `TabsIndicator` components. Default `"pill"` like styles.