Source

Command Palette

Search for a command to run...

Scroll-area

Custom styled scrollable container with horizontal and vertical scrolling support

About ScrollArea

A cross-browser custom scrollbar component that augments native scroll functionality. The scrollbar sits on top of content without taking up layout space, preserving native scrolling behavior and accessibility. Includes sub-components for building complete scrollable layouts.

Installation

Import the ScrollArea component from LSD:
import { ScrollArea } from '@nipsys/lsd'

export default function MyComponent() {
  return <ScrollArea />
}

Usage

The simplest form of the component with default styling.
Basic

Features

Additional features and capabilities of the component.
Both Orientation

Horizontal

Composition

ScrollArea
├── ScrollBar
│ └── ScrollAreaPrimitive.ScrollAreaThumb
├── ScrollAreaPrimitive.Corner
└── ScrollAreaPrimitive.Viewport

API Reference

ScrollArea

onScroll
Callback fired when the viewport scrolls
Type: React.UIEventHandler<HTMLDivElement>

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Arrow keys - Scroll through content (platform-dependent)• Page Up/Down - Scroll by page (platform-dependent)• Home/End - Scroll to top/bottom (platform-dependent)
ARIA Attributes
Proper ARIA attributes for screen readers
• No special ARIA attributes required. Component relies on native scroll semantics.
Focus States
Visible focus indicators for keyboard users
• Standard focus management for scrollable content. Focus follows native browser behavior when navigating with keyboard.
Separator