ScrollableArea

Scrollable container with optional scroll arrows and hidden scrollbar.

Import

import '@kittl/ui';

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

Usage

<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>

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

/** Basic ScrollableArea usage, rendered live on the docs site. */
export const ScrollableAreaUsage = () => (
  <>
    <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	Attribute	Type	Default	Description
direction	direction	'vertical' | 'horizontal' | 'both'	'vertical'	Scroll direction
hideScrollbar	hide-scrollbar	boolean	false	Hide the native scrollbar
maxHeight	max-height	string	—	CSS max-height value
showArrows	show-arrows	boolean	false	Show scroll arrow buttons (horizontal only)

Accessibility

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