Scroll Area

Demos

A fixed-height list of biomarkers that scrolls inside its border.

Biomarkers

ApoB

LDL-C

HDL-C

Triglycerides

Lp(a)

HbA1c

Fasting glucose

Insulin

hs-CRP

Ferritin

Vitamin D

Vitamin B12

TSH

Free T4

ALT

AST

Creatinine

eGFR

Uric acid

Testosterone

"use client"

import { ScrollArea } from "@workspace/ui/components/scroll-area"
import { Separator } from "@workspace/ui/components/separator"

const markers = [
  "ApoB",
  "LDL-C",
  "HDL-C",
  "Triglycerides",
  "Lp(a)",
  "HbA1c",
  "Fasting glucose",
  "Insulin",
  "hs-CRP",
  "Ferritin",
  "Vitamin D",
  "Vitamin B12",
  "TSH",
  "Free T4",
  "ALT",
  "AST",
  "Creatinine",
  "eGFR",
  "Uric acid",
  "Testosterone",
]

export function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-72 w-56 rounded-md border">
      <div className="p-4">
        <p className="mb-4 text-sm font-medium">Biomarkers</p>
        {markers.map((marker) => (
          <div key={marker}>
            <div className="text-xs">{marker}</div>
            <Separator className="my-2" />
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

Usage

Use a scroll area when a list must fit a fixed space, such as a sidebar or a panel inside a card. Let the page scroll when it can. Nested scrolling is harder to use, especially on touch.

Import it from @workspace/ui/components/scroll-area.

Anatomy

ScrollArea — The root and viewport. Adds a vertical scrollbar.
ScrollBar — Add one with orientation="horizontal" for sideways scrolling.

Notes

Give the scroll area a fixed height or width, or it grows with its content and never scrolls.
The viewport is focusable so keyboard users can scroll it.

Examples

Horizontal

Add a ScrollBar with orientation="horizontal" for content that scrolls sideways.

Jan panel72

Mar panel75

May panel74

Jul panel79

Sep panel81

Nov panel83

"use client"

import { ScrollArea, ScrollBar } from "@workspace/ui/components/scroll-area"

const panels = [
  { month: "Jan", score: 72 },
  { month: "Mar", score: 75 },
  { month: "May", score: 74 },
  { month: "Jul", score: 79 },
  { month: "Sep", score: 81 },
  { month: "Nov", score: 83 },
]

export function ScrollAreaHorizontal() {
  return (
    <ScrollArea className="w-full max-w-sm rounded-md border">
      <div className="flex w-max gap-3 p-4">
        {panels.map((panel) => (
          <div key={panel.month} className="grid w-28 gap-1 rounded-md border p-3">
            <span className="text-xs text-muted-foreground">{panel.month} panel</span>
            <span className="text-xl font-medium tabular-nums">{panel.score}</span>
          </div>
        ))}
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  )
}

Props

These are the props you set most often. Unlisted props pass through to the underlying element.

ScrollArea

Prop	Type	Default	Description
`className`	`string`	—	Classes merged onto the root. Set the size here.

ScrollBar

Prop	Type	Default	Description
`orientation`	`"vertical" or "horizontal"`	`vertical`	Direction of the scrollbar.