Scroll Area

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

shadcn/ui docs →

Preview

Tags

v1.0.0 — Release notes for version 1.0.0
v1.0.1 — Release notes for version 1.0.1
v1.0.2 — Release notes for version 1.0.2
v1.0.3 — Release notes for version 1.0.3
v1.0.4 — Release notes for version 1.0.4
v1.0.5 — Release notes for version 1.0.5
v1.0.6 — Release notes for version 1.0.6
v1.0.7 — Release notes for version 1.0.7
v1.0.8 — Release notes for version 1.0.8
v1.0.9 — Release notes for version 1.0.9
v1.0.10 — Release notes for version 1.0.10
v1.0.11 — Release notes for version 1.0.11
v1.0.12 — Release notes for version 1.0.12
v1.0.13 — Release notes for version 1.0.13
v1.0.14 — Release notes for version 1.0.14
v1.0.15 — Release notes for version 1.0.15
v1.0.16 — Release notes for version 1.0.16
v1.0.17 — Release notes for version 1.0.17
v1.0.18 — Release notes for version 1.0.18
v1.0.19 — Release notes for version 1.0.19
v1.0.20 — Release notes for version 1.0.20
v1.0.21 — Release notes for version 1.0.21
v1.0.22 — Release notes for version 1.0.22
v1.0.23 — Release notes for version 1.0.23
v1.0.24 — Release notes for version 1.0.24
v1.0.25 — Release notes for version 1.0.25
v1.0.26 — Release notes for version 1.0.26
v1.0.27 — Release notes for version 1.0.27
v1.0.28 — Release notes for version 1.0.28
v1.0.29 — Release notes for version 1.0.29
v1.0.30 — Release notes for version 1.0.30
v1.0.31 — Release notes for version 1.0.31
v1.0.32 — Release notes for version 1.0.32
v1.0.33 — Release notes for version 1.0.33
v1.0.34 — Release notes for version 1.0.34
v1.0.35 — Release notes for version 1.0.35
v1.0.36 — Release notes for version 1.0.36
v1.0.37 — Release notes for version 1.0.37
v1.0.38 — Release notes for version 1.0.38
v1.0.39 — Release notes for version 1.0.39
v1.0.40 — Release notes for version 1.0.40
v1.0.41 — Release notes for version 1.0.41
v1.0.42 — Release notes for version 1.0.42
v1.0.43 — Release notes for version 1.0.43
v1.0.44 — Release notes for version 1.0.44
v1.0.45 — Release notes for version 1.0.45
v1.0.46 — Release notes for version 1.0.46
v1.0.47 — Release notes for version 1.0.47
v1.0.48 — Release notes for version 1.0.48
v1.0.49 — Release notes for version 1.0.49

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/scroll-area.json

Dependencies: @radix-ui/react-scroll-area

Usage

example.tsx
import { ScrollArea } from "@/components/ui/scroll-area"

<ScrollArea className="h-[200px] w-full max-w-sm rounded-base border-2 border-border p-4">
  <h4 className="mb-4 text-sm font-heading">Tags</h4>
  {Array.from({ length: 50 }).map((_, i) => (
    <div key={i} className="text-sm py-1">
      v1.0.{i}
    </div>
  ))}
</ScrollArea>
0