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

Styling contract

At the component layer, the supported styling surface is host-level semantic token overrides on <tng-button-toggle-group> and <tng-button-toggle> plus the shell classes your page owns around them.

ContractApply onPurpose
--tng-semantic-background-surface<tng-button-toggle> hostIdle background for each toggle item.
--tng-semantic-background-muted<tng-button-toggle> hostHover background when the component renders its default shell.
--tng-semantic-border-subtleGroup or item hostBorder color for the segmented container and individual toggles.
--tng-semantic-accent-brand<tng-button-toggle> hostSelected-state fill and border color.
--tng-semantic-foreground-primary<tng-button-toggle> hostProjected label color for the idle state.
--tng-color-white<tng-button-toggle> hostSelected-state foreground color when you need standalone copy-paste safety.
Shell classesApp-owned containerCards, headings, layout spacing, helper text, and any surrounding chrome.

If you need selector-level access to data-selected or data-focused on the actual button element, use the headless or ownable surfaces instead of depending on the internal component template.

User scenario style examples

Use the same button-toggle component contract inside a plain CSS shell or a Tailwind shell by overriding host-level semantic tokens.

Release target selection (Plain-CSS)

Release target

Use host-level semantic tokens when one action needs stronger emphasis.