Getting StartedInstallation and setup guides 6
FormInput and selection components 26
LayoutWorkflow and structural layout components 10
NavigationMenu surfaces and hierarchical actions 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 6
UtilityGeneral-purpose interface utilities 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

The stock wrapper, triggers, and panel are ready without application CSS.

Behavior baseline

  • Use matching value strings on each tngTab and tngTabPanel.
  • activation="manual" keeps arrow-key focus movement separate from selection.
  • The wrapper styles the shell, tablist, triggers, panels, orientation, and interactive states. Override component variables when a product surface needs a different visual treatment.