Tabs

Tabs organize content into switchable panels. Use with the Tab sub-component.

Import

import { Tabs } from "@gumtree/ui/Tabs";

Prop	Type	Default	Description
`variant`	`"box" \| "border" \| "lift"`	-	Visual style of the tab bar
`size`	`"xs" \| "sm" \| "md" \| "lg"`	-	Size of the tabs
`children`	`ComponentChildren`	-	Tab items

Tabs with an underline border style.

<Tabs variant="border">
  <Tab active>Code</Tab>
  <Tab>Issues</Tab>
  <Tab>Pull Requests</Tab>
</Tabs>

Tabs with a box/card style.

<Tabs variant="box">
  <Tab active>Overview</Tab>
  <Tab>Activity</Tab>
  <Tab>Settings</Tab>
</Tabs>

Tabs with a lifted visual effect.

<Tabs variant="lift">
  <Tab>First</Tab>
  <Tab active>Second</Tab>
  <Tab>Third</Tab>
</Tabs>

Tabs can render as links using the href prop.

<Tabs variant="border">
  <Tab href="/docs/tabs" active>Tabs</Tab>
  <Tab href="/docs/button">Button</Tab>
</Tabs>