Documentation
Components
Tabs

Tabs

Display tab content.

Usage

First of all, you need to import the Tabs component from the kitchn package.

import { Tabs } from "kitchn"

Default

Code Editor
() => {
  const [selected, setSelected] = React.useState("apple");
  return (
    <Tabs
      tabs={[
        { title: "Apple", value: "apple" },
        { title: "Orange", value: "orange" },
        { title: "Mango", value: "mango" },
      ]}
      selected={selected}
      setSelected={setSelected}
    />
  );
}

Disabled

Code Editor
() => {
  const [selected, setSelected] = React.useState("apple");
  return (
    <Tabs
      tabs={[
        { title: "Apple", value: "apple" },
        { title: "Orange", value: "orange" },
        { title: "Mango", value: "mango" },
      ]}
      selected={selected}
      setSelected={setSelected}
      disabled
    />
  );
}

With icons

Code Editor
() => {
  const [selected, setSelected] = React.useState("apple");
  return (
    <Tabs
      tabs={[
        { title: "Apple", value: "apple", icon: <RiAppleFill />, },
        { title: "Orange", value: "orange", icon: <RiAndroidFill /> },
        { title: "Mango", value: "mango", icon: <RiWindowsFill /> },
      ]}
      selected={selected}
      setSelected={setSelected}
    />
  );
}

Props

NameTypeDefaultRequiredDescriptionAccepted values
titlestring-✅The title of the tab.-
valuestring-✅The value of the tab.-
iconJSX.Element--The icon of the tab.-
Last updated on
SwitchText