kagadmodyaa

Scroll Area

Aspect RatioKbd

A scrollable region with slim, themed scrollbars.

import { ScrollArea } from '@/components/ui/scroll-area'
import { Separator } from '@/components/ui/separator'

const releases = Array.from({ length: 40 }, (_, i) => `v1.${40 - i}.0`)

export default function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-64 w-48 rounded-lg border border-border">
      <div className="p-4">
        <h4 className="mb-3 text-sm leading-none font-medium">Releases</h4>
        {releases.map(release => (
          <div key={release}>
            <div className="text-sm">{release}</div>
            <Separator className="my-2" />
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

Built on Base UI

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/scroll-area.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Scroll Area imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

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

<ScrollArea className="h-64 w-48 rounded-lg border">
  <div className="p-4">…long content…</div>
</ScrollArea>

// Scroll sideways instead
<ScrollArea orientation="horizontal" className="w-full max-w-md">
  <div className="flex w-max gap-4 p-4">…wide content…</div>
</ScrollArea>

Examples

Horizontal

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

const swatches = [
  'oklch(0.63 0.23 36)',
  'oklch(0.55 0.2 252)',
  'oklch(0.58 0.16 145)',
  'oklch(0.78 0.18 75)',
  'oklch(0.52 0.015 260)',
  'oklch(0.7 0.14 320)',
  'oklch(0.45 0.12 200)',
  'oklch(0.85 0.06 85)',
]

export default function ScrollAreaHorizontal() {
  return (
    <ScrollArea orientation="horizontal" className="w-full max-w-md rounded-lg border border-border">
      <div className="flex w-max gap-4 p-4 pb-6">
        {swatches.map((color, i) => (
          <figure key={color} className="shrink-0">
            <div className="h-24 w-32 rounded-md" style={{ background: color }} />
            <figcaption className="pt-2 text-xs text-muted-foreground">Swatch {i + 1}</figcaption>
          </figure>
        ))}
      </div>
    </ScrollArea>
  )
}

API Reference

NameTypeDefaultDescription
orientation'vertical' | 'horizontal' | 'both''vertical'Which scrollbars to render.
classNamestring—Classes for the outer frame. Give it a height (or a width for horizontal scrolling) so it has something to scroll inside.
viewportClassNamestring—Classes for the scrolling viewport itself.
ScrollBarcomponent—The styled scrollbar, exported for custom compositions. Takes an orientation.
Keyboard——The viewport is focusable when it overflows, so the arrow keys, Page Up/Down and Space scroll it.