minflow

Display

Scroll area

The native scrollbar is hidden and replaced with an overlay thumb that fades in while scrolling and sleeps a beat later, so a nested panel carries no permanent chrome. Wheel input inside the area is eased for momentum, and that momentum honours prefers-reduced-motion and the app-level motion switch, which makes smoothness a preference rather than a rule.

npx shadcn@latest add @minflow/scroll-area

Where to use it

  • Nested regions with their own scroll: sidebars, option lists, panel bodies, chat history.
  • Any pane whose scrollbar would otherwise draw a permanent grey stripe through a quiet layout.
  • Never for the page itself; the document scrollbar is the one the reader's browser already gave them.

Variations

With momentum

The default. Eased wheel input inside the area, which makes a short nested list feel like a surface rather than a clipped box.

Component 1Component 2Component 3Component 4Component 5Component 6Component 7Component 8Component 9Component 10Component 11Component 12Component 13Component 14

Without momentum

Inside a region that already scrolls under something else, or wherever eased wheel input would fight a virtualised list. The overlay thumb stays either way.

Component 1Component 2Component 3Component 4Component 5Component 6Component 7Component 8Component 9Component 10Component 11Component 12Component 13Component 14