A
Aether UI

Scroll Area

Augments native scroll functionality for custom, cross-browser consistent scrollbar styling — without sacrificing accessibility.

Built on Radix UI.

  • ✓Custom styled scrollbar that looks consistent across browsers
  • ✓Supports vertical and horizontal scroll orientations
  • ✓ScrollBar is separate — add it explicitly for horizontal scroll
  • ✓Scrollbar auto-hides when not scrolling (OS-level behavior preserved)
  • ✓Forwards ref to the underlying Radix ScrollArea root
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

import { Scroll Area }from "@aetherstack/ui"

scroll area.tsx
import { ScrollArea } from "@/components/ui/scroll-area"

const items = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`)

export function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
      <div className="space-y-2">
        {items.map((item) => (
          <div key={item} className="text-sm text-muted-foreground">
            {item}
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

Usage

Vertical scroll

Set a fixed height on ScrollArea and let content overflow naturally. The custom scrollbar appears automatically.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

Horizontal scroll

Add a ScrollBar with orientation="horizontal" for horizontal overflow. Use whitespace-nowrap to prevent wrapping.

Dashboard
Analytics
Reports
Users
Settings
Billing
Integrations
Docs
Support
Changelog
API
Webhooks

Props

PropTypeDefaultDescription
classNamestring—Applied to the root element. Use to set height, width, border-radius, etc.
children*ReactNode—Content to display inside the scrollable viewport.
...propsReact.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>—All Radix ScrollArea Root props are forwarded.

ScrollBar

PropTypeDefaultDescription
orientation"vertical" | "horizontal""vertical"Controls the scrollbar axis. Add a ScrollBar with orientation="horizontal" for horizontal scroll.
classNamestring—Additional class names applied to the scrollbar track.

* Required props

Accessibility

  • →Scroll area uses native browser scrolling internally — keyboard scroll (arrow keys, Page Up/Down) works as expected.
  • →The custom scrollbar is purely visual; it does not affect focus or ARIA semantics.
  • →Ensure scrollable regions have a visible focus indicator when focused via keyboard.