Surfaces / Scroll Area

Scroll Area

<ScrollArea />Stable

Custom-rendered scrollbars for fixed-height containers. Use when the OS scrollbar would feel out of place — sidebars, dropdowns, lists. Built on Radix ScrollArea.

import { ScrollArea, ScrollBar } from "@/components/upnext";

Orientations

Practice note · day 1

Marcus throws with high accuracy when uncontested. Pressure changes him.

Practice note · day 2

Marcus throws with high accuracy when uncontested. Pressure changes him.

Practice note · day 3

Marcus throws with high accuracy when uncontested. Pressure changes him.

Practice note · day 4

Marcus throws with high accuracy when uncontested. Pressure changes him.

Practice note · day 5

Marcus throws with high accuracy when uncontested. Pressure changes him.

Practice note · day 6

Marcus throws with high accuracy when uncontested. Pressure changes him.

Practice note · day 7

Marcus throws with high accuracy when uncontested. Pressure changes him.

Practice note · day 8

Marcus throws with high accuracy when uncontested. Pressure changes him.

Practice note · day 9

Marcus throws with high accuracy when uncontested. Pressure changes him.

Practice note · day 10

Marcus throws with high accuracy when uncontested. Pressure changes him.

Practice note · day 11

Marcus throws with high accuracy when uncontested. Pressure changes him.

Practice note · day 12

Marcus throws with high accuracy when uncontested. Pressure changes him.

Practice note · day 13

Marcus throws with high accuracy when uncontested. Pressure changes him.

Practice note · day 14

Marcus throws with high accuracy when uncontested. Pressure changes him.

Practice note · day 15

Marcus throws with high accuracy when uncontested. Pressure changes him.

1<ScrollArea className="h-56 w-64 rounded-md border p-3">
2  {notes.map((n) => (
3    <div key={n.id}>{n.title}</div>
4  ))}
5</ScrollArea>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.