Tabs

A set of content sections - where only one can be displayed at a time.

Installation

pnpm add @inpulse-ds/tabs

Usage

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  TabsIndicator,
} from "@inpulse-ds/tabs";
 
return (
  <Tabs>
    <TabsList>
      <TabsTrigger value="account">Account</TabsTrigger>
      <TabsTrigger value="password">Password</TabsTrigger>
      <TabsIndicator />
    </TabsList>
    <TabsContent value="account">Make changes to your account here.</TabsContent>
    <TabsContent value="password">Change your password here.</TabsContent>
  </Tabs>
);

Examples

Horizontal

By default, Tabs are displayed horizontally and inherit the theme's primary color. TabsIndicator is not mandatory but when applied within TabsList, it causes the selection indicator to move with a smooth animation.

Otherwise, the selection indicator will still be applied - but without any animation.

In the next examples, TabsIndicator will always be applied as it offers a better experience.

Vertical

Tabs can also be displayed vertically. To do this, simply add the orientation property to Tabs, with the value vertical.

Only in vertical mode, it is possible to change the side where the TabList is presented using the side property. Possible values ​​are left and right.

Trigger Position

By default, TabsTriggers are displayed at the beginning of the TabsList. To change the position, simply change the align property in the TabsList. Possible values ​​are start, center and end.

Colors

By default, TabsTrigger and TabsIndicator will be assigned the theme's primary color when enabled. But you can customize this color through CSS classes. The class must be applied to the two components mentioned, as below.

Adopt a monochromatic style for your Tabs by setting the mono property to true. This style will adapt to the system's light and dark mode. The property must be applied once, directly in the TabsList.

Events

Use the onChange event to perform an action every time the Tabs tab is changed.

Changing Triggers

By applying the asChild property to TabsTrigger, it is possible to use any component in place of text.