WFP logoDesign System

Augments native scroll functionality for custom, cross-browser styling.

Tags

v1.2.0-beta.50
v1.2.0-beta.49
v1.2.0-beta.48
v1.2.0-beta.47
v1.2.0-beta.46
v1.2.0-beta.45
v1.2.0-beta.44
v1.2.0-beta.43
v1.2.0-beta.42
v1.2.0-beta.41
v1.2.0-beta.40
v1.2.0-beta.39
v1.2.0-beta.38
v1.2.0-beta.37
v1.2.0-beta.36
v1.2.0-beta.35
v1.2.0-beta.34
v1.2.0-beta.33
v1.2.0-beta.32
v1.2.0-beta.31
v1.2.0-beta.30
v1.2.0-beta.29
v1.2.0-beta.28
v1.2.0-beta.27
v1.2.0-beta.26
v1.2.0-beta.25
v1.2.0-beta.24
v1.2.0-beta.23
v1.2.0-beta.22
v1.2.0-beta.21
v1.2.0-beta.20
v1.2.0-beta.19
v1.2.0-beta.18
v1.2.0-beta.17
v1.2.0-beta.16
v1.2.0-beta.15
v1.2.0-beta.14
v1.2.0-beta.13
v1.2.0-beta.12
v1.2.0-beta.11
v1.2.0-beta.10
v1.2.0-beta.9
v1.2.0-beta.8
v1.2.0-beta.7
v1.2.0-beta.6
v1.2.0-beta.5
v1.2.0-beta.4
v1.2.0-beta.3
v1.2.0-beta.2
v1.2.0-beta.1

Installation

pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/scroll-area.json

Usage

import { ScrollArea } from "@/components/ui/scroll-area";
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit.
  Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id,
  mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor
  libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo.
  Suspendisse potenti.
</ScrollArea>

Examples

Horizontal scrolling

Photo by Ornella Binni
Photo by Ornella Binni
Photo by Tom Byrom
Photo by Tom Byrom
Photo by Vladimir Malyavko
Photo by Vladimir Malyavko