Scroll Area

A styled scroll container with a brutalist dashed scrollbar. Supports vertical, horizontal, and both orientations with three size presets.

Import

import { ScrollArea } from "poyraz-ui/atoms";

Vertical

Vertical scrollbar with dashed track.

Item 1 — Scrollable content line
Item 2 — Scrollable content line
Item 3 — Scrollable content line
Item 4 — Scrollable content line
Item 5 — Scrollable content line
Item 6 — Scrollable content line
Item 7 — Scrollable content line
Item 8 — Scrollable content line
Item 9 — Scrollable content line
Item 10 — Scrollable content line
Item 11 — Scrollable content line
Item 12 — Scrollable content line
Item 13 — Scrollable content line
Item 14 — Scrollable content line
Item 15 — Scrollable content line
Item 16 — Scrollable content line
Item 17 — Scrollable content line
Item 18 — Scrollable content line
Item 19 — Scrollable content line
Item 20 — Scrollable content line
Item 21 — Scrollable content line
Item 22 — Scrollable content line
Item 23 — Scrollable content line
Item 24 — Scrollable content line
Item 25 — Scrollable content line
Item 26 — Scrollable content line
Item 27 — Scrollable content line
Item 28 — Scrollable content line
Item 29 — Scrollable content line
Item 30 — Scrollable content line
<ScrollArea maxHeight={200} className="border-2 border-dashed border-slate-200 p-4">
  {items.map((item) => (
    <div key={item}>{item}</div>
  ))}
</ScrollArea>

Horizontal

Horizontal scrollbar for wide content.

1
2
3
4
5
6
7
8
9
10
11
12
<ScrollArea orientation="horizontal" className="border-2 border-dashed border-slate-200 p-4">
  <div className="flex gap-3" style={{ width: "800px" }}>
    {boxes.map((box) => (
      <div key={box} className="w-24 h-24" />
    ))}
  </div>
</ScrollArea>

Scrollbar Sizes

Three size variants: sm (6px), md (10px), lg (14px).

sm
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Line 17
Line 18
Line 19
Line 20
md
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Line 17
Line 18
Line 19
Line 20
lg
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Line 17
Line 18
Line 19
Line 20
<ScrollArea scrollbarSize="sm" maxHeight={150}>…</ScrollArea>
<ScrollArea scrollbarSize="md" maxHeight={150}>…</ScrollArea>
<ScrollArea scrollbarSize="lg" maxHeight={150}>…</ScrollArea>