Common tabs patterns rendered through the components wrapper while the tab parts stay explicit.
Controlled value
Bind the selected tab to app state when other UI depends on the active section.
Controlled tabs (Plain CSS)
Overview metrics and project summary.Activity stream and recent updates.Settings form and integration toggles.
Current value: overview
Controlled tabs (Tailwind CSS)
Overview metrics and project summary. Activity stream and recent updates. Settings form and integration toggles.
Current value: overview
Vertical layout
Switch to vertical orientation when tabs behave more like a side navigation rail.
Vertical tabs (Plain CSS)
Account preferences and profile details.Team roles, invites, and shared settings.Security policies and session controls.
Vertical tabs (Tailwind CSS)
Account preferences and profile details. Team roles, invites, and shared settings. Security policies and session controls.
Scroll buttons
Pair scrollButtons on the root with tngTabsScrollButtonPrev and tngTabsScrollButtonNext when the tab list overflows horizontally. Use auto to show controls only when needed, or on to keep them visible.