Overview

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

Preview

Code

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  TabsIndicator,
} from '@inpulse-ui/tabs';

export function Demo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <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>
  );
}

About

This component is an expansion of the Tabs developed and maintained by Radix UI.

It adheres to the Tabs WAI-ARIA design pattern.

Keyboard Interactions

Key	Description
Tab	When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content.
↑	Moves focus to the previous trigger depending on orientation and activates its associated content.
↓	Moves focus to the next trigger depending on orientation and activates its associated content.
←	Moves focus to the previous trigger depending on orientation and activates its associated content.
→	Moves focus to the next trigger depending on orientation and activates its associated content.
Home	Moves focus to the first trigger and activates its associated content.
End	Moves focus to the last trigger and activates its associated content.

Installation

pnpm

pnpm add @inpulse-ui/tabs

bun

bun add @inpulse-ui/tabs

yarn

yarn add @inpulse-ui/tabs

npm

npm install @inpulse-ui/tabs

API Reference

Root

Contains all the tabs component parts.

Prop	Type	Default Value	Required
asChild	boolean	false	No
defaultValue	string	-	No
value	string	-	No
onValueChange	function	-	No
orientation	enum	horizontalvertical	No
side	enum	leftright	No
dir	enum	ltrrtl	No
activationMode	enum	automaticmanual	No

List

Contains the triggers that are aligned along the edge of the active content.

Prop	Type	Default Value	Required
asChild	boolean	false	No
align	enum	leftcenterright	No
loop	boolean	true	No
mono	boolean	false	No

Trigger

The button that activates its associated content.

Prop	Type	Default Value	Required
asChild	boolean	false	No
value	string	-	Yes
disabled	boolean	false	No

Content

Contains the content associated with each trigger.

Prop	Type	Default Value	Required
asChild	boolean	false	No
value	string	-	Yes
forceMount	boolean	-	No

Indicator

An optional element that visually indicates the active tab. It is not mandatory but when applied within TabsList, it causes the selection indicator to move with a smooth animation.

It inherits props from the TabsList component.

Prop	Type	Default Value	Required
asChild	boolean	false	No

Usage

Wrap all tabs component parts with the Tabs component. The TabsList contains the triggers. Make sure there is a TabsContent for each TabsTrigger and that the value prop of each TabsContent matches the value prop of its corresponding TabsTrigger.

<Tabs>
  <TabsList>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <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.

Preview

Code

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  TabsIndicator,
} from '@inpulse-ui/tabs';

export function Demo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <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>
  );
}

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

Preview

Code

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from '@inpulse-ui/tabs';

export function Demo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <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>
  );
}

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.

Preview

Code

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  TabsIndicator,
} from '@inpulse-ui/tabs';

export function Demo() {
  return (
    <Tabs
      defaultValue="account"
      orientation="vertical"
      className="w-[400px]"
    >
      <TabsList>
        <TabsTrigger value="account">Lorem</TabsTrigger>
        <TabsTrigger value="password">Ipsum</TabsTrigger>
        <TabsIndicator />
      </TabsList>
      <TabsContent value="account">
        Lorem ut ut dolor sit amet, consectetur adipiscing elit. Phasellus varius lacinia justo, et euismod neque rutrum eu. Nunc a ipsum accumsan, ultrices erat ut, vehicula ligula. Vestibulum et nisl libero. Integer ut orci a turpis bibendum gravida. Sed sit amet hendrerit dolor, ut cursus mauris. Duis id tincidunt nibh, eu tempor turpis. Praesent condimentum, magna id euismod eleifend, massa purus pharetra quam, vel lobortis ante augue a quam. Aenean in nibh vulputate massa interdum porta. Sed cursus viverra odio. Sed at ante maximus, efficitur felis vel, semper dui. Mauris rhoncus libero lorem, sed finibus sapien consequat vitae. Donec mattis dictum lorem, non porttitor ex.
      </TabsContent>
      <TabsContent value="password">
        Ipsum risus vel enim vehicula fringilla. Nulla ut purus lectus. Morbi et tincidunt velit. Praesent nec finibus urna, ut finibus dolor. Suspendisse eu blandit nibh. Duis imperdiet interdum est, eget interdum nibh volutpat et. Donec efficitur a nisl at mollis. Pellentesque imperdiet nulla a eros bibendum, et tristique lacus vulputate. Ut egestas mauris a vehicula venenatis. Aenean convallis condimentum pellentesque. Vivamus eget nibh at ligula pellentesque lobortis ut a est. Sed convallis magna dui. Proin porttitor tincidunt metus, ut dignissim diam pretium quis. Praesent convallis tellus sit amet vehicula fermentum. Etiam vitae mi commodo, bibendum.
      </TabsContent>
    </Tabs>
  );
}

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.

Preview

Code

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  TabsIndicator,
} from '@inpulse-ui/tabs';

export function Demo() {
  return (
    <Tabs
      defaultValue="account"
      orientation="vertical"
      side="right"
      className="w-[400px]"
    >
      <TabsList>
        <TabsTrigger value="account">Lorem</TabsTrigger>
        <TabsTrigger value="password">Ipsum</TabsTrigger>
        <TabsIndicator />
      </TabsList>
      <TabsContent value="account">
        Lorem ut ut dolor sit amet, consectetur adipiscing elit. Phasellus varius lacinia justo, et euismod neque rutrum eu. Nunc a ipsum accumsan, ultrices erat ut, vehicula ligula. Vestibulum et nisl libero. Integer ut orci a turpis bibendum gravida. Sed sit amet hendrerit dolor, ut cursus mauris. Duis id tincidunt nibh, eu tempor turpis. Praesent condimentum, magna id euismod eleifend, massa purus pharetra quam, vel lobortis ante augue a quam. Aenean in nibh vulputate massa interdum porta. Sed cursus viverra odio. Sed at ante maximus, efficitur felis vel, semper dui. Mauris rhoncus libero lorem, sed finibus sapien consequat vitae. Donec mattis dictum lorem, non porttitor ex.
      </TabsContent>
      <TabsContent value="password">
        Ipsum risus vel enim vehicula fringilla. Nulla ut purus lectus. Morbi et tincidunt velit. Praesent nec finibus urna, ut finibus dolor. Suspendisse eu blandit nibh. Duis imperdiet interdum est, eget interdum nibh volutpat et. Donec efficitur a nisl at mollis. Pellentesque imperdiet nulla a eros bibendum, et tristique lacus vulputate. Ut egestas mauris a vehicula venenatis. Aenean convallis condimentum pellentesque. Vivamus eget nibh at ligula pellentesque lobortis ut a est. Sed convallis magna dui. Proin porttitor tincidunt metus, ut dignissim diam pretium quis. Praesent convallis tellus sit amet vehicula fermentum. Etiam vitae mi commodo, bibendum.
      </TabsContent>
    </Tabs>
  );
}

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.

Preview

Code

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  TabsIndicator,
} from '@inpulse-ui/tabs';

export function Demo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList align="center">
        <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>
  );
}

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.

Preview

Code

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  TabsIndicator,
} from '@inpulse-ui/tabs';

export function Demo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account" className="data-[state=active]:after:bg-teal-500">Account</TabsTrigger>
        <TabsTrigger value="password" className="data-[state=active]:after:bg-teal-500">Password</TabsTrigger>
        <TabsIndicator className="bg-teal-500" />
      </TabsList>
      <TabsContent value="account">Make changes to your account here.</TabsContent>
      <TabsContent value="password">Change your password here.</TabsContent>
    </Tabs>
  );
}

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.

Preview

Code

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  TabsIndicator,
} from '@inpulse-ui/tabs';

export function Demo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList mono>
        <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>
  );
}

Events

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

Preview

Code

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  TabsIndicator,
} from '@inpulse-ui/tabs';

export function Demo() {
  return (
    <Tabs
      defaultValue="account"
      className="w-[400px]"
      onChange={(value) => console.log(value)}
    >
      <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>
  );
}

Custom Triggers

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

Preview

Code

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  TabsIndicator,
} from '@inpulse-ui/tabs';

export function Demo() {
  return (
    <Tabs
      defaultValue="account"
      orientation="vertical"
      className="w-[400px]"
    >
      <TabsList>
        <TabsTrigger value="account" asChild>
          <Button icon size="lg" variant="ghost">
            <PhoneCall />
          </Button>
        </TabsTrigger>
        <TabsTrigger value="password" asChild>
          <Button icon size="lg" variant="ghost">
            <Megaphone />
          </Button>
        </TabsTrigger>
        <TabsIndicator />
      </TabsList>
      <TabsContent value="account">
        Lorem ut ut dolor sit amet, consectetur adipiscing elit. Phasellus varius lacinia justo, et euismod neque rutrum eu. Nunc a ipsum accumsan, ultrices erat ut, vehicula ligula. Vestibulum et nisl libero. Integer ut orci a turpis bibendum gravida. Sed sit amet hendrerit dolor, ut cursus mauris. Duis id tincidunt nibh, eu tempor turpis. Praesent condimentum, magna id euismod eleifend, massa purus pharetra quam, vel lobortis ante augue a quam. Aenean in nibh vulputate massa interdum porta. Sed cursus viverra odio. Sed at ante maximus, efficitur felis vel, semper dui. Mauris rhoncus libero lorem, sed finibus sapien consequat vitae. Donec mattis dictum lorem, non porttitor ex.
      </TabsContent>
      <TabsContent value="password">
        Ipsum risus vel enim vehicula fringilla. Nulla ut purus lectus. Morbi et tincidunt velit. Praesent nec finibus urna, ut finibus dolor. Suspendisse eu blandit nibh. Duis imperdiet interdum est, eget interdum nibh volutpat et. Donec efficitur a nisl at mollis. Pellentesque imperdiet nulla a eros bibendum, et tristique lacus vulputate. Ut egestas mauris a vehicula venenatis. Aenean convallis condimentum pellentesque. Vivamus eget nibh at ligula pellentesque lobortis ut a est. Sed convallis magna dui. Proin porttitor tincidunt metus, ut dignissim diam pretium quis. Praesent convallis tellus sit amet vehicula fermentum. Etiam vitae mi commodo, bibendum.
      </TabsContent>
    </Tabs>
  );
}