ns-ui
A grouped listbox for long lists (timezones, countries, currencies) where every passed group header sticks in place, stacking into overlapping 20px slivers you can still read and click — a live table of contents made from the headers themselves.
Use when a long grouped listbox (timezones, countries, currencies — hundreds of rows) where the user needs to keep orientation across every group already scrolled past, not just the current one; the passed group headers themselves stack into a persistent, clickable trail. Pick select-caustic or dropdown-drape instead for a short flat option list where the interesting behavior is opening and closing the panel, not navigating inside it.
Install
npx shadcn add https://design.helpmarq.comns-ui / listbox-sticky-groups
Scroll the list — passed regions compress into a stacked trail of headers at the top, still clickable, still labeled.
tz → europe-berlin
Arrow through options, type to jump by name — Home/End/PageUp/PageDown behave like a native select. Tab reaches each region header too; click one to ease back to the top of that group.
| Prop | Type | Default | Description |
|---|---|---|---|
| groups? | ShingleCourseGroup[] | DEFAULT_GROUPS | — |
| value? | string | — | controlled value; omit for uncontrolled |
| defaultValue? | string | — | — |
| onValueChange? | (value: string) => void | — | — |
| label? | string | "Timezone" | field label rendered above the listbox |
| disabled? | boolean | false | — |
| name? | string | — | when set, renders a hidden input for form posts |
| className? | string | — | — |