Theme Switcher

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

asChild with Links

ColorsShadowsTypography

Account

Make changes to your account here. Click save when you're done.

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.

PropTypeDefaultDescription
defaultValue
string

The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.

value
string

The controlled value of the tab to activate. Should be used in conjunction with onValueChange.

onValueChange
(value: string) => void

Event handler called when the value changes.

orientation
  • horizontal
  • vertical
horizontal

The orientation of the tabs.

className
string

Additional CSS classes to apply to the tabs root element.

Tabs.List

Contains the triggers that are aligned along the edge of the active content. Based on Radix Tabs List.

PropTypeDefaultDescription
className
string

Additional CSS classes to apply to the tabs list element.

Tabs.Trigger

The button that activates its associated content. Based on Radix Tabs Trigger.

PropTypeDefaultDescription
value
string

A unique value that associates the trigger with a content.

asChild
booleanfalse

Use the asChild prop to compose the trigger styling and functionality onto alternative element types or your own React components.

disabled
booleanfalse

When true, prevents the user from interacting with the tab.

className
string

Additional CSS classes to apply to the trigger element.

Tabs.Content

Contains the content associated with each trigger. Based on Radix Tabs Content.

PropTypeDefaultDescription
value
string

A unique value that associates the content with a trigger.

className
string

Additional CSS classes to apply to the content element.

Tabs.Badge

A badge component that can be used inside tab triggers to display additional information like counts or status indicators.

PropTypeDefaultDescription
children
ReactNode

The content to be rendered inside the badge.

className
string

Additional CSS classes to apply to the badge element.