Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
asChild
with Link
s
Account
Make changes to your account here. Click save when you're done.
import { Button } from "@ngrok/mantle/button";
import { Card } from "@ngrok/mantle/card";
import { Icon } from "@ngrok/mantle/icon";
import { Input, PasswordInput } from "@ngrok/mantle/input";
import { Tabs } from "@ngrok/mantle/tabs";
<Tabs.Root orientation="horizontal" defaultValue="account" className="w-[400px]">
<Tabs.List>
<Tabs.Trigger value="account">
<Icon svg={<UserIcon />} />
Account
<Tabs.Badge>2</Tabs.Badge>
</Tabs.Trigger>
<Tabs.Trigger value="password">
<Icon svg={<ShieldCheckIcon />} />
Password
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="account">
<Card.Root>
<Card.Header>
<Card.Title>Account</Card.Title>
<p className="text-muted">Make changes to your account here. Click save when you're done.</p>
</Card.Header>
<Card.Body className="space-y-2">
<div className="space-y-1">
<label htmlFor="name">Name</label>
<Input id="name" defaultValue="Cody Price" />
</div>
<div className="space-y-1">
<label htmlFor="username">Username</label>
<Input id="username" defaultValue="@cody-dot-js" />
</div>
</Card.Body>
<Card.Footer>
<Button type="button">Save changes</Button>
</Card.Footer>
</Card.Root>
</Tabs.Content>
<Tabs.Content value="password">
<Card.Root>
<Card.Header>
<Card.Title>Password</Card.Title>
<p className="text-muted">Change your password here. After saving, you'll be logged out.</p>
</Card.Header>
<Card.Body className="space-y-2">
<div className="space-y-1">
<label htmlFor="current">Current password</label>
<PasswordInput id="current" />
</div>
<div className="space-y-1">
<label htmlFor="new">New password</label>
<PasswordInput id="new" />
</div>
</Card.Body>
<Card.Footer>
<Button type="button">Save password</Button>
</Card.Footer>
</Card.Root>
</Tabs.Content>
</Tabs.Root>
API Reference
The Tabs
components accept the following props.
Tabs.Root
The root container of the tabs component that provides context for all tab components. Based on Radix Tabs Root.
Tabs.List
Contains the triggers that are aligned along the edge of the active content. Based on Radix Tabs List.
Tabs.Trigger
The button that activates its associated content. Based on Radix Tabs Trigger.
Tabs.Content
Contains the content associated with each trigger. Based on Radix Tabs Content.
Tabs.Badge
A badge component that can be used inside tab triggers to display additional information like counts or status indicators.