Tabs

PreviousNext

Tabbed sections (line or enclosed).

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/rl-ui";

<Tabs defaultValue="overview">
<TabsList>
  <TabsTrigger value="overview">Overview</TabsTrigger>
  <TabsTrigger value="activity">Activity</TabsTrigger>
</TabsList>
<TabsContent value="overview">Overview body</TabsContent>
</Tabs>

Examples

Enclosed variant

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/rl-ui";

<Tabs variant="enclosed" size="medium" defaultValue="a">
<TabsList>
  <TabsTrigger value="a">Alpha</TabsTrigger>
  <TabsTrigger value="b">Beta</TabsTrigger>
</TabsList>
<TabsContent value="a">Alpha body</TabsContent>
</Tabs>

Sizes (line)

import { Tabs, TabsList, TabsTrigger } from "@/rl-ui";

<>
<Tabs size="medium" defaultValue="a">
  <TabsList>
    <TabsTrigger value="a">Medium</TabsTrigger>
    <TabsTrigger value="b">Alt</TabsTrigger>
  </TabsList>
</Tabs>
<Tabs size="large" defaultValue="a">
  <TabsList>
    <TabsTrigger value="a">Large</TabsTrigger>
    <TabsTrigger value="b">Alt</TabsTrigger>
  </TabsList>
</Tabs>
</>

API

PropTypeDefaultDescription
variant"line" | "enclosed""line"Tab chrome.
size"large" | "medium""large"Tab size.
defaultValuestring—Uncontrolled active tab.
valuestring—Controlled active tab.
onValueChange(value: string) => void—Change handler.