Tabs

TS

import { … } from "@fungi.computer/caps/components/tabs";

Bordered

TSX

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@fungi.computer/caps/components/tabs";

export default function Bordered() {
  return (
    <Tabs defaultValue="logs" className="w-full max-w-sm">
      <TabsList>
        <TabsTrigger value="logs">Logs</TabsTrigger>
        <TabsTrigger value="spores">Spores</TabsTrigger>
        <TabsTrigger value="harvest">Harvest</TabsTrigger>
      </TabsList>
      <TabsContent value="logs">
        <p>12 oak logs, 3 ready to fruit.</p>
      </TabsContent>
      <TabsContent value="spores">
        <p>2 syringes in cold storage.</p>
      </TabsContent>
      <TabsContent value="harvest">
        <p>1.2 kg collected this week.</p>
      </TabsContent>
    </Tabs>
  );
}

Segmented

TSX

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@fungi.computer/caps/components/tabs";

export default function Segmented() {
  return (
    <Tabs defaultValue="week" className="w-full max-w-sm">
      <TabsList variant="segmented">
        <TabsTrigger value="day">Day</TabsTrigger>
        <TabsTrigger value="week">Week</TabsTrigger>
        <TabsTrigger value="month">Month</TabsTrigger>
      </TabsList>
      <TabsContent value="day">
        <p>Today: 85% humidity, no action needed.</p>
      </TabsContent>
      <TabsContent value="week">
        <p>This week: two logs moved to fruiting.</p>
      </TabsContent>
      <TabsContent value="month">
        <p>This month: 4.1 kg harvested.</p>
      </TabsContent>
    </Tabs>
  );
}

Controlled

TSX

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@fungi.computer/caps/components/tabs";
import { useState } from "react";

export default function Controlled() {
  const [value, setValue] = useState("logs");
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Tabs value={value} onValueChange={setValue}>
        <TabsList>
          <TabsTrigger value="logs">Logs</TabsTrigger>
          <TabsTrigger value="spores" disabled>
            Spores
          </TabsTrigger>
        </TabsList>
        <TabsContent value="logs">
          <p>12 oak logs, 3 ready to fruit.</p>
        </TabsContent>
      </Tabs>
      <p>Current tab: {value}</p>
    </div>
  );
}

Props

TabsProps

Prop	Type	Description
children	ReactNode
defaultValue?	string
onValueChange()?	(value) => void	Called after the active tab value changes.
value?	string

• childrenReactNode
• defaultValue?string
• onValueChange()?(value) => void

  Called after the active tab value changes.

• value?string

TabsListProps

Prop	Type	Description
variant?	"bordered" | "segmented"	bordered underlines the selected tab. segmented presents a small set of equal, mutually exclusive choices as one inset control.

• variant?"bordered" | "segmented"

  bordered underlines the selected tab. segmented presents a small set of equal, mutually exclusive choices as one inset control.

TabsTriggerProps

Prop	Type	Description
value	string

• valuestring

TabsContentProps

Prop	Type	Description
children	ReactNode
forceMount?	boolean
value	string

• childrenReactNode
• forceMount?boolean
• valuestring

Full types: API reference.