ScrollArea

Custom scrollable area via Radix UI

Vertical

Usage

import { ScrollArea, ScrollBar } from '@tryvienna/ui'

<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">
    <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
    {tags.map((tag, i) => (
      <div key={tag}>
        <div className="text-sm">{tag}</div>
        {i < tags.length - 1 && <Separator className="my-2" />}
      </div>
    ))}
  </div>
</ScrollArea>

Examples

Vertical

Vertical

<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">
    <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
    {tags.map((tag, i) => (
      <div key={tag}>
        <div className="text-sm">{tag}</div>
        {i < tags.length - 1 && <Separator className="my-2" />}
      </div>
    ))}
  </div>
</ScrollArea>

Horizontal

Horizontal

<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex gap-4 p-4">
    {Array.from({ length: 20 }, (_, i) => (
      <div
        key={i}
        className="flex size-24 shrink-0 items-center justify-center rounded-md border bg-muted text-sm"
      >
        {i + 1}
      </div>
    ))}
  </div>
</ScrollArea>

API Reference

ScrollArea

Also accepts all props from ScrollAreaPrimitive.Root.

ScrollBar

Prop	Type	Default	Description
orientation	"horizontal" | "vertical"	vertical

Also accepts all props from ScrollAreaPrimitive.ScrollAreaScrollbar.

Data Attributes

Component	data-slot
ScrollArea	"scroll-area"
ScrollBar	"scroll-bar"