Tabs

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

Account

Make changes to your account here. Click save when you're done.

Name

Username

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@sihaxito/deluxe-ui";

<Tabs>
  <TabsList>
    <TabsTrigger value="tab-1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab-2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab-1">Tab 1 content</TabsContent>
  <TabsContent value="tab-2">Tab 2 content</TabsContent>
</Tabs>

Variants

Solid

Underline

Examples

With icons

TabsTrigger component allows you to pass the left and right props to display elements (icons, text, badges, etc.) on the sides.

Without animation

You can pass the disableAnimation prop to the Tabs component to disable any animation that the component has. This also works in underline variant

Useful links

Switch Tooltip