Thrive Design System

Components

Scroll Area

A styled scrollable container with custom scrollbars that maintains consistent appearance across browsers.

Installation

npm install @thrivecart/ui
yarn add @thrivecart/ui
pnpm add @thrivecart/ui
bun add @thrivecart/ui

Usage

import { ScrollArea, ScrollBar } from '@thrivecart/ui';

Examples

Vertical Scroll

Scrollable List

Vertical scroll area with content

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
<ScrollArea className="h-48 w-full rounded-lg border p-4">
{Array.from({ length: 20 }, (_, i) => (
  <div key={i} className="py-2 border-b last:border-0">
    Item {i + 1}
  </div>
))}
</ScrollArea>

Best Practices

✓

Set a clear height constraint

Always define a max-height or height for the scroll area so scrolling activates.

✓

Indicate scrollable content

Use visual cues (shadows, fade) to hint that content extends beyond the visible area.

✗

Don't nest scroll areas

Multiple nested scrollable areas create confusing interaction patterns.

✗

Don't use for small content

If content always fits, don't wrap it in a scroll area.

Props

Props

Accessibility

  • Scrollbar is keyboard accessible with Arrow keys when focused.
  • Works with native browser scroll behavior for assistive technologies.
  • Custom scrollbar is visible for mouse users without affecting keyboard behavior.