Imports

Bring in the root directive plus the list, trigger, and panel parts from primitives.

import { TngTabs, TngTab, TngTabList, TngTabPanel } from '@tailng-ui/primitives';

Structure

Build tabs with any host element you want, as long as the parts stay inside the same tngTabs root.

<section tngTabs aria-label="Project sections" defaultValue="overview">
  <div tngTabList ariaLabel="Project sections">
    <button type="button" tngTab value="overview">Overview</button>
    <button type="button" tngTab value="activity">Activity</button>
  </div>

  <section tngTabPanel value="overview">Overview content</section>
  <section tngTabPanel value="activity">Activity content</section>
</section>

Behavior baseline

• Tabs use roving focus and reflect selection through data-selected.
• Panels are hidden when inactive, and you can opt into lazy mount and unmount behavior from the root and panel parts.
• The primitive does not impose wrapper visuals, trigger layout, or panel chrome. Those stay with the owner.