Ethereal Garden

Tabs

A set of layered sections of content, known as tab panels, that display one panel of content at a time.

When To Use

Use the Tabs component when you need to:

  • Organize related content into separate views where only one view is visible at a time
  • Allow users to switch between different sections without navigating to a new page
  • Save space by showing only the relevant content for the selected tab
  • Group content by category or function
  • Create a workflow where users need to focus on one section at a time

Tabs are especially useful for forms, settings pages, dashboards, and any interface where multiple related sections of content need to be organized.

Examples

Basic

Account Settings

Manage your account settings and set your email preferences.

Custom

Dashboard
View your project overview and key metrics.

Total Projects

12

Active Tasks

24

Team Members

8

Completion

67%

Vertical

General Settings

Profile Information

Update your basic profile information such as email address and name.

Language Preferences

Choose your preferred language for the interface.

Props

PropTypeDefault
$$typeof
symbol
-
displayName?
string
-
propTypes?
any
-
PropTypeDefault
$$typeof
symbol
-
displayName?
string
-
propTypes?
any
-
PropTypeDefault
$$typeof
symbol
-
displayName?
string
-
propTypes?
any
-
PropTypeDefault
$$typeof
symbol
-
displayName?
string
-
propTypes?
any
-