Components

Tabs (Radix UI)

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

Installation

pnpm dlx shadcn@latest add @toui/tabs

Examples

Icon

Badge

Button

Pill

Line

Vertical

Size - Large

Size - Medium

Size - Small

Size - Xsmall

Disabled

API Reference

This component is built using Radix UI Tabs primitives. For detailed information, please visit the full API reference.

Tabs

This component is based on the Tabs.Root primitive. For full details, visit the official documentation.

TabsList

This component is based on the Tabs.List primitive and includes the following custom props:

Prop	Type	Default
`variant`	~~enum~~	~~"default"~~
`size`	~~enum~~	~~"md"~~
`className`	~~string~~	~~undefined~~

TabsTrigger

This component is based on the Tabs.Trigger primitive and inherits the following props from context:

Prop	Type	Default
`variant`	~~enum~~	~~"default"~~
`size`	~~enum~~	~~"md"~~
`className`	~~string~~	~~undefined~~

TabsContent

This component is based on the Tabs.Content primitive and includes the following custom props:

Prop	Type	Default
`variant`	~~enum~~	~~"default"~~
`className`	~~string~~	~~undefined~~

Credits

Built with Radix UI Tabs.