Stalk UI

Component

ScrollArea

Adds a styled, cross-browser scroll viewport with custom scrollbars.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/scroll-area

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<div
  style={{ border: '1px solid var(--colors-border-default)', borderRadius: 8, overflow: 'hidden' }}
>
  <ScrollArea style={{ blockSize: 180, inlineSize: 240 }}>
    <div style={{ padding: 12 }}>
      {Array.from({ length: 24 }, (_, i) => (
        <div
          key={i}
          style={{ borderBottom: '1px solid var(--colors-border-muted)', padding: '6px 0' }}
        >
          Row {i + 1}
        </div>
      ))}
    </div>
  </ScrollArea>
</div>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`orientation``'horizontal' \'vertical' \'both'`No

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

No recipe variants are documented for this component.

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/scroll-area.json`
  • Recipe: `scrollArea`
  • Files: `src/components/ui/scroll-area.tsx`