Scroll Area

A scrollable region with a slim custom scrollbar that fades in on hover and while scrolling.

springs preset #1

springs preset #2

springs preset #3

springs preset #4

springs preset #5

springs preset #6

springs preset #7

springs preset #8

springs preset #9

springs preset #10

springs preset #11

springs preset #12

springs preset #13

springs preset #14

springs preset #15

springs preset #16

springs preset #17

springs preset #18

springs preset #19

springs preset #20

tsx

import { ScrollArea } from "@/registry/seam/ui/scroll-area"

export default function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-40 w-64 rounded-md border p-4">
      <div className="space-y-2">
        {Array.from({ length: 20 }).map((_, i) => (
          <div key={i} className="text-sm">
            springs preset #{i + 1}
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

bunx --bun @seamui/cli@latest add scroll-area

Notes

The scrollbar fades in on data-[hovering] and data-[scrolling] and fades back out after a short delay.
Native scrolling is preserved (keyboard, wheel, touch) — the custom scrollbar is a visual layer over it, not a replacement.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.