Tabs

The Tabs Component allows the content author to organize page content within multiple tabs.

import { Tab } from "rizzui";

Simple Tabs

A simple style of Tabs.

Recent panel

import { Tab } from "rizzui";

export default function App() {
  return (
    <Tab>
      <Tab.List>
        <Tab.ListItem>Recent</Tab.ListItem>
        <Tab.ListItem>Popular</Tab.ListItem>
        <Tab.ListItem>Trending</Tab.ListItem>
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel>Recent panel</Tab.Panel>
        <Tab.Panel>Popular panel</Tab.Panel>
        <Tab.Panel>Trending panel</Tab.Panel>
      </Tab.Panels>
    </Tab>
  );
}

With Icon

You can use icon in the tab list item

Account panel

import { Tab } from "rizzui";
import {
  UserIcon,
  BuildingOfficeIcon,
  UsersIcon,
  CreditCardIcon,
} from "@heroicons/react/24/outline";

export default function App() {
  return (
    <Tab>
      <Tab.List>
        <Tab.ListItem>
          <UserIcon className="h-4 w-4" /> My Account
        </Tab.ListItem>
        <Tab.ListItem>
          <BuildingOfficeIcon className="h-4 w-4" /> Company
        </Tab.ListItem>
        <Tab.ListItem>
          <UsersIcon className="h-4 w-4" /> Team Member
        </Tab.ListItem>
        <Tab.ListItem>
          <CreditCardIcon className="h-4 w-4" /> Billing
        </Tab.ListItem>
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel>Account panel</Tab.Panel>
        <Tab.Panel>Company panel</Tab.Panel>
        <Tab.Panel>Team member panel</Tab.Panel>
        <Tab.Panel>Billing panel</Tab.Panel>
      </Tab.Panels>
    </Tab>
  );
}

Vertical Tabs

You can create a vertical tab by adding a vertical prop into the Tab component.

Recent panel

import { Tab } from "rizzui";

export default function App() {
  return (
    <Tab vertical>
      <Tab.List>
        <Tab.ListItem>Recent</Tab.ListItem>
        <Tab.ListItem>Popular</Tab.ListItem>
        <Tab.ListItem>Trending</Tab.ListItem>
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel>Recent panel</Tab.Panel>
        <Tab.Panel>Popular panel</Tab.Panel>
        <Tab.Panel>Trending panel</Tab.Panel>
      </Tab.Panels>
    </Tab>
  );
}

Auto Responsive

Experience our auto-responsive, scrollable tabs. The active tab stays visible, whether the tab was partially visibile or last hidden tab. Swipe or use left, right arrow keys or shift mousewheel to access hidden tabs.

Home panel

import { Tab } from "rizzui";

export default function App() {
  return (
    <Tab>
      <Tab.List>
        <Tab.ListItem>Home</Tab.ListItem>
        <Tab.ListItem>Explore</Tab.ListItem>
        <Tab.ListItem>Products</Tab.ListItem>
        ...
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel>Home</Tab.Panel>
        <Tab.Panel>Explore</Tab.Panel>
        <Tab.Panel>Products</Tab.Panel>
        ...
      </Tab.Panels>
    </Tab>
  );
}

API Reference

---

Tab Props

Here is the API documentation of the Tab component.

Props	Type	Description	Default
vertical	boolean	When true, the orientation of the Tab.List will be vertical, otherwise it will be horizontal.	__
selectedIndex	number	The selected index if you want to use the Tab component as a controlled component.	__
onChange	((index: number) => void)	A function called whenever the active tab changes.	__
hideHoverAnimation	boolean	Use this prop to hide hover animation	false
children	ReactElement	Only allow Tab.List and Tab.Panels as children	__
className	string	Add classes to the main wrapper of this component	__

Tab.List Props

Here is the API documentation of the Tab.List component.

Props	Type	Description	Default
children	ReactElement	Only allow Tab.ListItem as children	__
className	string	Add classes to the Tab.List of this component	__

Tab.ListItem Props

Here is the API documentation of the Tab.ListItem component.

Props	Type	Description	Default
children	ReactNode	Use any valid React element or string	__
className	string	Add classes to the Tab.ListItem of this component	__

Tab.Panels Props

Here is the API documentation of the Tab.Panels component.

Props	Type	Description	Default
children	ReactElement	Only allow Tab.Panel as children	__
className	string	Add classes to the Tab.Panels of this component	__

Tab.Panel Props

Here is the API documentation of the Tab.Panel component.

Props	Type	Description	Default
children	ReactNode	Use any valid React element or string	__
className	string	Add classes to the Tab.Panel of this component	__