Scroll Area

A scroll container that hides the scrollbar by default, or renders a slim custom one. Pass `showScrollbar` for Stepwise's minimal scrollbar instead - a fully transparent track with a slim rounded thumb that darkens when you hover or drag it. Theme-aware and self-contained; it's what powers the scroll region inside Command Palette.

Installation

npx stepwise-ui add scroll-area

Vertical

Amsterdam

Bangalore

Copenhagen

Dubai

Edinburgh

Florence

Geneva

Helsinki

Istanbul

Jakarta

Kyoto

Lisbon

Madrid

Nairobi

Oslo

Prague

Quebec

Reykjavik

Stockholm

Tokyo

Utrecht

Vienna

Warsaw

Zurich

import { ScrollArea } from '@/components/stepwise/scroll-area'

<ScrollArea maxHeight={220} showScrollbar className="w-[240px] …">
  {items.map(item => <Row key={item} />)}
</ScrollArea>

Horizontal

Amsterdam

Bangalore

Copenhagen

Dubai

Edinburgh

Florence

Geneva

Helsinki

Istanbul

Jakarta

Kyoto

Lisbon

<ScrollArea axis="x" showScrollbar className="w-[320px] …">
  <div className="flex gap-3">{cards}</div>
</ScrollArea>

Props

PropTypeDescription

maxHeight

number | string

Cap the height and scroll vertically past it.

maxWidth

number | string

Cap the width and scroll horizontally past it - for axis="x" or "both".

axis

'y' | 'x' | 'both'

Scroll axis. Default y.

showScrollbar

boolean

Show the thumb instead of scrolling invisibly. Default false.

className

string

Merged onto the scroll container.