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
Account Settings
Manage your account settings and set your email preferences.
Dashboard
View your project overview and key metrics.
Total Projects
12
Active Tasks
24
Team Members
8
Completion
67%
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
Prop | Type | Default |
---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
Prop | Type | Default |
---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
Prop | Type | Default |
---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
Prop | Type | Default |
---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |