Tabs

Overview

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

Make changes to your account here.

$ npx morpha-ui add tabs

Examples

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 Radix props; each TabsContent is associated with a trigger by matching value.

Prop

Type

Accessibility

Place every TabsTrigger inside a TabsList.
Arrow-key navigation between tabs is handled natively by Radix.
Each TabsContent is linked to its trigger via a shared value.