ns-ui
A page header that morphs between a full-width quiet nav bar at the top and a floating centered pill once scrolled — spring-like width/radius/padding morph, section label roll, and a progress hairline, with hysteresis so it never flutters at the threshold and a fast upward scroll flicks it back open with overshoot.
Use when the header's silhouette itself should change on scroll, a full bar collapsing into a small centered floating pill with a rolling active-section label, and the component already owns scroll-linked section tracking with hysteresis and a fast-scroll-up overshoot; pick nav-condense-rail instead when the bar should keep its full-width shape and only change density.
Install
npx shadcn add https://design.helpmarq.comns-ui / header-scroll-pill
Scroll to compress the bar into a pill; a fast upward scroll flicks it back open with overshoot.
Fake page content for the scroll demo — the header above reacts to scroll position and this section's visibility.
Fake page content for the scroll demo — the header above reacts to scroll position and this section's visibility.
Fake page content for the scroll demo — the header above reacts to scroll position and this section's visibility.
Fake page content for the scroll demo — the header above reacts to scroll position and this section's visibility.
| Prop | Type | Default | Description |
|---|---|---|---|
| wordmark? | string | — | — |
| sections? | ScrollIslandSection[] | — | — |
| activeId? | string | — | id of the currently active section; the label rolls when this changes |
| className? | string | — | — |