Navigation
Tabs

Tabs

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

View sourceARIA Authoring

Anatomy

import { Tabs } from "@lualtek/react-components";
 
export default () => {
  return (
    <Tabs defaultValue="1">
      <Tabs.Panel value="1" label="Tab 1">
        Panel 1
      </Tabs.Panel>
      <Tabs.Panel value="2" label="Tab 2">
        Panel 2
      </Tabs.Panel>
      <Tabs.Panel value="3" label="Tab 3">
        Panel 3
      </Tabs.Panel>
    </Tabs>
  );
};

API Reference

Tabs

This component extends the radix-ui Tabs.Root (opens in a new tab) component, which expose different props that enables multiple functionalities, and adds the following:

export type TabsProps = {
  /**
   * Add extra space around the tab list. This property can be used to
   * add extra space between tab list and surrounding edges.
   */
  listGap?: TokensTypes["space"];
 
  /**
   * Set the dimension of the tabs.
   * @default 'big'
   */
  dimension?: "small" | "regular" | "big";
};

Tabs.Panel

This component extends the radix-ui Tabs.Content (opens in a new tab) and Tabs.Trigger (opens in a new tab) components, which expose different props that enables multiple functionalities, and adds the following:

export type TabPanelProps = {
  /**
   * The label of the tab to show in the tab list.
   */
  label: string;
 
  /**
   * An optional icon to show in the tab list next to the label.
   */
  icon?: IconProps["source"];
 
  /**
   * Add a decorator beside the tab label
   */
  decorator?: ReactNode;
};
StepperClamp Text