rokle

Personality

20
40
70
15

Active brand: Meridian

Adjust sliders to see every component on the page respond in real time.

ScrollArea

Custom-styled scrollable container with thin overlay scrollbars on both axes.

Examples

Vertical list

Fixed-height scrollable list of items.

Horizontal

Horizontally scrollable row of cards.

Both directions

Scrollable in both axes. Useful for wide data tables.

Installation

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

Usage

import { ScrollArea } from "@rokle/components";
import { ScrollArea } from "@rokle/components";

export function Example() {
  return <ScrollArea />;
}

API Reference

PropTypeDefaultDescription
orientation"vertical" | "horizontal" | "both""vertical"Scroll direction.
childrenReactNode-Scrollable content.