Tabs

Overview

Tabs organize content into panels that share the same space, one visible at a time. Compose them from TabsList, TabsTrigger, and TabsContent.

A snapshot of your workspace at a glance.

$ npx morpha-ui add tabs

Examples

Line

Set variant="line" on TabsList for the underline style; the primary bar slides between tabs.

Everything in your inbox.

Disabled tab

Your project overview.

Installation

Morpha UI components are distributed via the Morpha CLI (coming in a later step): npx morpha-ui add tabs. In the meantime, since this is the base shadcn component, you can also add it directly:

npx shadcn@latest add tabs

API Reference

The table documents the Tabs root. TabsList, TabsTrigger, and TabsContent forward their Base UI props; each TabsContent is associated with a trigger by matching value.

Prop

Type

Accessibility

Place every TabsTrigger inside a TabsList.
Arrow keys move focus between tabs (Base UI); Space/Enter activates the focused tab.
Each TabsContent is linked to its trigger via a shared value.