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

Examples

Component listbox patterns

These examples use <tng-listbox> directly, so component apps can hand in option data while keeping the same primitive keyboard model underneath.

Form usage

Listboxes can sit inside a standard form when you want keyboard-first single selection.

Listbox form usage

Live form

Set triage priority

Use a listbox inside a form when arrow-key selection matters as much as click support.

Selected priority: Medium priority

Priority picker

Compare a light editorial treatment in Plain CSS with a Tailwind utility translation that keeps the same wrapper API and summary feedback.

Priority picker (Plain-CSS)

Priority queue

Use the component wrapper to carry a fully styled listbox while keeping the primitive keyboard model underneath.

Selected priority: Medium priority

Dual listbox keyboard handoff

Each listbox keeps roving focus scoped locally; use Tab to move to the next listbox.

Dual listbox keyboard handoff (Plain-CSS)

Publish channels A

selected: Docs

Publish channels B

selected: Team updates