Tabs

A set of layered sections that show one panel at a time.

Basic

A high-level summary of the project.

Show code

import { Icon } from "@makeplane/propel/components/icon";
import { Tab, Tabs, TabsList, TabsPanel } from "@makeplane/propel/components/tabs";
import { Activity, LayoutGrid, Settings } from "lucide-react";
import * as React from "react";

const TAB_ITEMS = [
  {
    value: "overview",
    label: "Overview",
    icon: <Icon icon={LayoutGrid} />,
    panel: "A high-level summary of the project.",
  },
  {
    value: "activity",
    label: "Activity",
    icon: <Icon icon={Activity} />,
    panel: "The latest activity feed.",
  },
  {
    value: "settings",
    label: "Settings",
    icon: <Icon icon={Settings} />,
    panel: "Configuration and preferences.",
  },
];

export default function BasicDemo() {
  const [value, setValue] = React.useState("overview");

  return (
    <Tabs appearance="contained" value={value} onValueChange={setValue}>
      <TabsList>
        {TAB_ITEMS.map((tab) => (
          <Tab key={tab.value} value={tab.value} icon={tab.icon} label={tab.label} />
        ))}
      </TabsList>
      {TAB_ITEMS.map((tab) => (
        <TabsPanel key={tab.value} value={tab.value}>
          {tab.panel}
        </TabsPanel>
      ))}
    </Tabs>
  );
}

Underline

The underline appearance keeps the tabs flat and slides a bar under the active one, in contrast to the raised contained pill.

A high-level summary of the project.

Show code

import { Tab, Tabs, TabsList, TabsPanel } from "@makeplane/propel/components/tabs";

const TAB_ITEMS = [
  { value: "overview", label: "Overview", panel: "A high-level summary of the project." },
  { value: "activity", label: "Activity", panel: "The latest activity feed." },
  { value: "settings", label: "Settings", panel: "Configuration and preferences." },
];

export default function UnderlineDemo() {
  return (
    <Tabs appearance="underline" defaultValue="overview">
      <TabsList>
        {TAB_ITEMS.map((tab) => (
          <Tab key={tab.value} value={tab.value} label={tab.label} />
        ))}
      </TabsList>
      {TAB_ITEMS.map((tab) => (
        <TabsPanel key={tab.value} value={tab.value}>
          {tab.panel}
        </TabsPanel>
      ))}
    </Tabs>
  );
}

Disabled

A high-level summary of the project.

Show code

import { Tab, Tabs, TabsList, TabsPanel } from "@makeplane/propel/components/tabs";

const TAB_ITEMS = [
  {
    value: "overview",
    label: "Overview",
    panel: "A high-level summary of the project.",
    disabled: false,
  },
  {
    value: "activity",
    label: "Activity",
    panel: "The latest activity feed.",
    disabled: false,
  },
  {
    value: "billing",
    label: "Billing",
    panel: "Upgrade the workspace to manage billing.",
    disabled: true,
  },
];

export default function DisabledDemo() {
  return (
    <Tabs appearance="contained" defaultValue="overview">
      <TabsList>
        {TAB_ITEMS.map((tab) => (
          <Tab key={tab.value} value={tab.value} label={tab.label} disabled={tab.disabled} />
        ))}
      </TabsList>
      {TAB_ITEMS.map((tab) => (
        <TabsPanel key={tab.value} value={tab.value}>
          {tab.panel}
        </TabsPanel>
      ))}
    </Tabs>
  );
}

Installation

import { Tabs, TabsList, Tab, TabsPanel } from "@makeplane/propel/components/tabs";

Props

Tabs

Prop	Type	Required	Description
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, TabsRootState>	No	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
appearance	"contained" \| "underline"	Yes	Whether the set is a contained pill or a flat underline strip. Shared with its parts.

Tab

Prop	Type	Required	Description
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, TabsTabState>	No	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
icon	ReactNode	No	Element rendered before the label (inline-start), e.g. `<Icon icon={Folder} />`.
label	string	Yes	Visible tab label.