Scroll area

Custom scrollbars for dense panels and sidebars.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Vertical (default ScrollArea)

Row 1 — scroll inside the panel

Row 2 — scroll inside the panel

Row 3 — scroll inside the panel

Row 4 — scroll inside the panel

Row 5 — scroll inside the panel

Row 6 — scroll inside the panel

Row 7 — scroll inside the panel

Row 8 — scroll inside the panel

Row 9 — scroll inside the panel

Row 10 — scroll inside the panel

Row 11 — scroll inside the panel

Row 12 — scroll inside the panel

Row 13 — scroll inside the panel

Row 14 — scroll inside the panel

Row 15 — scroll inside the panel

Row 16 — scroll inside the panel

Horizontal (ScrollBar orientation)

Chip 1

Chip 2

Chip 3

Chip 4

Chip 5

Chip 6

Chip 7

Chip 8

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import { ScrollArea } from "@payglocal_ui/flux-ui";

Example

<ScrollArea className="h-48 rounded-xl border border-border p-3">
  …long content…
</ScrollArea>