Scroll Area

Augments native scroll functionality for custom, cross-platform styling. Built on top of Radix UI Scroll Area primitive.

Installation

npm install @darksnow-ui/scroll-area

Peer Dependencies

npm install react react-dom

Usage

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

export function ScrollAreaExample() {
  return (
    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
      <div className="space-y-4">
        {Array.from({ length: 50 }, (_, i) => (
          <div key={i} className="text-sm">
            This is item {i + 1}
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

Props

| Prop | Type | Default | Description | |-----------|-------------------|---------|--------------------------------| | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Scrollable content |

Examples

Basic Scroll Area

<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) => (
      <div key={tag} className="text-sm">
        {tag}
      </div>
    ))}
  </div>
</ScrollArea>

Horizontal Scroll

<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex w-max space-x-4 p-4">
    {artworks.map((artwork) => (
      <figure key={artwork.artist} className="shrink-0">
        <div className="overflow-hidden rounded-md">
          <img
            src={artwork.art}
            alt={`Photo by ${artwork.artist}`}
            className="aspect-[3/4] h-fit w-fit object-cover"
            width={300}
            height={400}
          />
        </div>
        <figcaption className="pt-2 text-xs text-theme-content-muted">
          Photo by{" "}
          <span className="font-semibold text-theme-content">
            {artwork.artist}
          </span>
        </figcaption>
      </figure>
    ))}
  </div>
</ScrollArea>

Accessibility

• Native scrolling behavior preserved
• Keyboard navigation support
• Screen reader accessible
• Focus management

Styling

Uses DarkSnow UI design tokens for consistent theming with custom scrollbars.

Related Components

• Dialog - Modal containers
• Sheet - Slide-out panels