@urban-ui/scrollable

layout | scrollable

Creates a scrollable area

Getting started

pnpm add -S @urban-ui/scrollable

import {Container} from '@urban-ui/container
import {Scrollable} from '@urban-ui/scrollable'

export function MyComponent() {
  return (
    <Container css={{backgroundColor: '$bg1', width: '200px', height: '250px'}}>
      <Scrollable.Root>
        <Scrollable.Viewport>
          {// content for the scrollable area}
        </Scrollable.Viewport>
        <Scrollable.Scrollbar>
          <Scrollable.Thumb />
        </Scrollable.Scrollbar>
      </Scrollable.Root>
    </Container>
  )
}

Details

Styled version of radix-ui/scrollarea.

Props that apply to the radix-ui scrollarea component also apply here. Additional props are listed here.

Scrollable is a layout component that gives some control over when and how scrollbars appear. It also attaches keyboard listeners for better control.