Tabs

Tabs + TabPanel

Tailwind playground examples for headless tabs primitives first, then the <tng-tabs> wrapper.

Headless Primitives Only: Base Tabs Demo

Arrow keys move focus and selection together when activation="auto".

Overview panel with release notes and migration summary.

Last selection: No tab selected yet

Last focus: No tab focused yet

Headless Primitives: Controlled Value

Selection is controlled via [value] and (valueChange).

Profile settings with display name, avatar, and locale preferences.

Controlled value: profile

Last controlled change: No controlled change yet

Headless Primitives: Manual + Vertical

In activation="manual", arrows move focus only. Use Enter / Space to select.

Install steps for primitives, components, and theme packages.

Last manual selection: No manual selection yet

Headless Primitives: Scrollable Strip + Auto Scroll Buttons

Uses scrollButtons="auto", keeps one row with horizontal overflow, and shows ‹ / › only when needed.

Overview panel content. Try wheel/trackpad scroll on the strip, then arrows to verify auto-scroll.

Last overflow selection: No overflow tab selected yet

Component Wrapper: Forced Scroll Buttons

Wrapper demo with scrollButtons="on" keeps left/right icons always visible.

Wrapper panel for Overview.

Component Wrapper: <tng-tabs> (Secondary Demo)

Wrapper provides the root shell while child tabs and panels stay headless.

Feature overview for activation modes, orientation, and controlled state.