Scroll Area

A region with custom scrollbars.

Default

Give the root a fixed height. The overlay scrollbar stays hidden until you hover or scroll, so it never takes width from the content.

Outbound, renewal reminder

Inbound, billing question

Outbound, appointment confirmation

Inbound, order status

Outbound, payment follow-up

Inbound, password reset

Outbound, feedback survey

Inbound, plan upgrade

Outbound, delivery window

Inbound, cancellation request

import { ScrollArea } from "@smallest-inc/ui";

const CALLS = [
  "Outbound, renewal reminder",
  "Inbound, billing question",
  "Outbound, appointment confirmation",
  "Inbound, order status",
  "Outbound, payment follow-up",
  "Inbound, password reset",
  "Outbound, feedback survey",
  "Inbound, plan upgrade",
  "Outbound, delivery window",
  "Inbound, cancellation request",
];

export default function ScrollAreaDefault() {
  return (
    <ScrollArea className="h-48 w-72 rounded-[10px] bg-neutral-0 shadow-sm">
      <div className="flex flex-col gap-px p-1.5">
        {CALLS.map((call) => (
          <div key={call} className="rounded-lg px-2 py-1.5 text-sm text-fg">
            {call}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}

Fade

Pass scrollFade to fade only the edges that hide content. Each fade clears as the viewport reaches that edge.

Pending

In queue

Dialing

Ringing

In progress

On hold

Transferred

Voicemail

Completed

No answer

Busy

Failed

Cancelled

Archived

import { ScrollArea } from "@smallest-inc/ui";

const STATUSES = [
  "Pending",
  "In queue",
  "Dialing",
  "Ringing",
  "In progress",
  "On hold",
  "Transferred",
  "Voicemail",
  "Completed",
  "No answer",
  "Busy",
  "Failed",
  "Cancelled",
  "Archived",
];

export default function ScrollAreaFade() {
  return (
    <ScrollArea scrollFade className="h-48 w-72 rounded-[10px] bg-neutral-0 shadow-sm">
      <div className="flex flex-col gap-px p-1.5">
        {STATUSES.map((status) => (
          <div key={status} className="rounded-lg px-2 py-1.5 text-sm text-fg">
            {status}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}

Max height

Put a max height on viewportClassName instead of a height on the root. The area hugs short content and scrolls once it passes the cap.

Support line

Sales line

Support line

Sales line

Billing line

Collections

Appointment reminders

Order status

After-hours triage

Partner hotline

Recruiting screen

Feedback survey

import { ScrollArea } from "@smallest-inc/ui";

const SHORT = ["Support line", "Sales line"];

const LONG = [
  "Support line",
  "Sales line",
  "Billing line",
  "Collections",
  "Appointment reminders",
  "Order status",
  "After-hours triage",
  "Partner hotline",
  "Recruiting screen",
  "Feedback survey",
];

function NumberList({ numbers }: { numbers: string[] }) {
  return (
    <ScrollArea scrollFade viewportClassName="max-h-48" className="w-64 rounded-[10px] bg-neutral-0 shadow-sm">
      <div className="flex flex-col gap-px p-1.5">
        {numbers.map((name) => (
          <div key={name} className="rounded-lg px-2 py-1.5 text-sm text-fg">
            {name}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}

export default function ScrollAreaMaxHeight() {
  return (
    <div className="flex flex-wrap items-start gap-6">
      <NumberList numbers={SHORT} />
      <NumberList numbers={LONG} />
    </div>
  );
}

Horizontal

Content wider than the root scrolls sideways. With scrollFade, the left and right edges fade instead.

AriaRohanMeiLucasPriyaTomásHanaOmarElenaKofiSofiaArjun

import { ScrollArea } from "@smallest-inc/ui";

const VOICES = ["Aria", "Rohan", "Mei", "Lucas", "Priya", "Tomás", "Hana", "Omar", "Elena", "Kofi", "Sofia", "Arjun"];

export default function ScrollAreaHorizontal() {
  return (
    <ScrollArea scrollFade className="w-80">
      <div className="flex w-max gap-2 py-1">
        {VOICES.map((voice) => (
          <span key={voice} className="rounded-[10px] bg-neutral-100 px-3 py-1.5 text-sm font-medium text-fg">
            {voice}
          </span>
        ))}
      </div>
    </ScrollArea>
  );
}

Best practices

When to use

Use when a bounded panel needs its own scrolling, such as a long menu list, a transcript pane or a side panel.
Avoid nested scrolling in ordinary page content; let the page scroll whenever possible.

Behavior

Give the root a fixed height, or put a max height on viewportClassName (for example max-h-48) so short content hugs and long content scrolls.
Add scrollFade whenever content is clipped; it fades only the edges that hide content.
The overlay scrollbar appears on hover or scroll and never takes width from the content.

Accessibility

Keep focused descendants scrolled into view, and do not put the only copy of required content below the fold.

PreviousRipple Media NextSearchbar