Scroll Area

Custom styled scrollbar viewport primitive built on Radix ScrollArea supporting vertical and horizontal scrolling.

// Radix — @radix-ui/react-scroll-area
import { ScrollArea } from "@shavin/ui";

Vertical scroll

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

Row 13

Row 14

Row 15

Row 16

Row 17

Row 18

Row 19

Row 20

Row 21

Row 22

Row 23

Row 24

Row 25

Row 26

Row 27

Row 28

Row 29

Row 30

Row 31

Row 32

Row 33

Row 34

Row 35

Row 36

Row 37

Row 38

Row 39

Row 40

<ScrollArea className="h-64 w-72 rounded-[var(--radius-xl)] border border-hairline">
  <div className="p-3">
    {rows.map((row) => (
      <div key={row} className="border-b border-hairline py-2 text-sm last:border-b-0">
        {row}
      </div>
    ))}
  </div>
</ScrollArea>

Both axes

Row 1 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 2 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 3 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 4 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 5 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 6 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 7 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 8 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 9 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 10 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 11 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 12 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 13 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 14 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 15 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 16 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 17 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 18 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 19 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 20 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 21 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 22 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 23 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 24 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 25 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 26 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 27 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 28 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 29 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 30 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 31 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 32 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 33 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 34 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 35 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 36 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 37 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 38 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 39 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

Row 40 — a wide row that forces horizontal scrolling to appear alongside the vertical scrollbar.

<ScrollArea className="h-64 w-72 rounded-[var(--radius-xl)] border border-hairline">
  <div className="w-[900px] p-3">
    {rows.map((row) => (
      <div key={row} className="whitespace-nowrap border-b border-hairline py-2 text-sm last:border-b-0">
        {row} — a wide row that forces horizontal scrolling.
      </div>
    ))}
  </div>
</ScrollArea>

Props

Prop	Type	Default
children*	ReactNode	—
className	string	—
style	CSSProperties	—

* required