Tabs

Display tab content.

Usage

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

import { Tabs } from "kitchn"

Default

() => {
  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}
    />
  );
}

↓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

() => {
  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

() => {
  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}
    />
  );
}

↓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

Name	Type	Default	Required	Description	Accepted values
`title`	`string`	-	✅	The title of the tab.	-
`value`	`string`	-	✅	The value of the tab.	-
`icon`	`JSX.Element`	-	-	The icon of the tab.	-

Switch Text