Scroll Area

Scrollable region with sketch border and rough scrollbar.

Sketchy scroll line 1

Sketchy scroll line 2

Sketchy scroll line 3

Sketchy scroll line 4

Sketchy scroll line 5

Sketchy scroll line 6

Sketchy scroll line 7

Sketchy scroll line 8

Sketchy scroll line 9

Sketchy scroll line 10

Sketchy scroll line 11

Sketchy scroll line 12

Roughness1.5Lock seedAnimate

<ScrollArea style={{ height: 160 }} roughness={1.5}>
  <ScrollAreaViewport>...</ScrollAreaViewport>
  <ScrollBar />
</ScrollArea>

CLI install

npx doodleui-react add scroll-area

Usage

import { ScrollArea, ScrollAreaViewport, ScrollBar } from "doodleui-react";

<ScrollArea style={{ height: 200 }}>\n  <ScrollAreaViewport>...</ScrollAreaViewport>\n  <ScrollBar />\n</ScrollArea>

Props

Prop	Type	Default	Notes
animate	boolean	true	Draw-in the outer border on mount. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.