Tabs

Tab list with roving keyboard navigation and automatic activation.

Previewlive — edit controls below

3 invoices need approval today

Content

value

Basic

import { Tabs } from "@loom/muslin-react";

<Tabs tabs={[{ value: "day", label: "Day" }]} panels={{ day: "3 invoices need approval today" }} />

Controlled tabs

value + onValueChange; panels render by key.

import { Tabs } from "@loom/muslin-react";

const [view, setView] = useState("day");

<Tabs
  tabs={[
    { value: "day", label: "Day" },
    { value: "week", label: "Week" },
  ]}
  panels={{ day: <DayTable />, week: <WeekTable /> }}
  value={view}
  onValueChange={setView}
/>