ScrollableArea

Scrollable container with optional scroll arrows and hidden scrollbar.

Preview

Loading preview…

Import

// Web Component
import '@kittl/ui';

// React
import { ScrollableArea } from '@kittl/ui-react';

Usage

Web Component

<kittl-scrollable-area max-height="300px">
  <p>Long content...</p>
</kittl-scrollable-area>

<kittl-scrollable-area direction="horizontal" show-arrows hide-scrollbar>
  <div style="display: flex; gap: 8px;">
    <kittl-card>Item 1</kittl-card>
    <kittl-card>Item 2</kittl-card>
    <kittl-card>Item 3</kittl-card>
  </div>
</kittl-scrollable-area>

React

<ScrollableArea maxHeight="300px">
  <p>Long content...</p>
</ScrollableArea>

<ScrollableArea direction="horizontal" showArrows hideScrollbar>
  <div style={{ display: 'flex', gap: '8px' }}>
    <Card>Item 1</Card>
    <Card>Item 2</Card>
    <Card>Item 3</Card>
  </div>
</ScrollableArea>

Props

Property	Type	Default	Description
direction	'vertical' | 'horizontal' | 'both'	'vertical'	Scroll direction
hideScrollbar	boolean	false	Hide the native scrollbar
maxHeight	string	—	CSS max-height value
showArrows	boolean	false	Show scroll arrow buttons (horizontal only)

HTML attribute names

Use hide-scrollbar, max-height, and show-arrows as HTML attribute names (kebab-case).

Accessibility

• Scroll arrow buttons have aria-label ("Scroll left", "Scroll right")
• Uses ResizeObserver to track when arrows should appear