Tabs
Organize related content into layered sections with horizontal, controlled, and vertical tab layouts.
Installation
Overview Tabs
Start with the standard uncontrolled pattern. This mirrors the common settings layout where each trigger reveals a related panel.
Preview
Account
Review the public profile details connected to your workspace.
Display name
Maddex UI Team
Contact email
design@example.com
Password
Rotate credentials and verify who can access your dashboard.
Last updated
12 days ago
Two-factor auth
Enabled for all admins
Team
Keep shared roles and review workflows visible to collaborators.
Owners
2 members
Editors
5 members
Pending invites
1 waiting
Controlled Tabs
Promote the selected tab into route state when outside controls or other UI need to drive the active panel.
Preview
Visitors
18.2K
Conversion
4.8%
Avg. session
6m 12s
Plan
Scale
Renewal
May 28
Product
3 active editors
Engineering
6 active editors
Vertical Manual Activation
Use a vertical list for dense navigation. With manual activation enabled, arrow keys move focus first, then Enter or Space commits the focused tab.
Preview
Inbox
Review new requests, triage follow-up work, and keep handoffs moving.
Mentions
Collect items that need direct feedback from the current team lead.
Archived
Keep completed conversations available without crowding the active queue.