Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Tabs overview

The components surface gives you the default <tng-tabs> shell while the tablist, trigger, and panel directives stay explicit, so you can control layout and markup.

Imports

Import the wrapper root from the components package and the structural parts from primitives.

Wrapper import

ts
import { TngTabs } from '@tailng-ui/components';

Required primitive parts

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

Structure

Tabs need one root, one tablist, one or more tab triggers, and one panel for each value you want to reveal.

Basic tabs structure

html
<tng-tabs ariaLabel="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>
</tng-tabs>

Style variants

The same tabs behavior rendered with a Plain-CSS shell and a Tailwind shell.

Tabs shell (Plain CSS)

Overview

Shared wrapper shell plus owner-authored tab and panel markup.

Behavior baseline

  • Use matching value strings on each tngTab and tngTabPanel.
  • activation="manual" keeps arrow-key focus movement separate from selection.
  • The wrapper only styles the root shell. Trigger, list, panel, and vertical layouts are still yours to author.