Skip to main content

ScrollArea

Scrolls overflowing content with a slim scrollbar and optional edge fades.

import { ScrollArea } from "@/fragments/ui";Source

Preview

import { Box } from '@/components/Box';
import { ScrollArea } from '@/components/ScrollArea';
import { Stack } from '@/components/Stack';
import { Text } from '@/components/Text';

<Box width="100%">

Installation

npx @usefragments/cli add scrollarea

Writes src/fragments/ui/components/ScrollArea plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Examples

Horizontal

Keeps an overflowing row of chips on one line.

import { Box } from '@/components/Box';
import { Chip } from '@/components/Chip';
import { ScrollArea } from '@/components/ScrollArea';
import { Stack } from '@/components/Stack';

<Box width="100%">

With Fades

Edge fades signal there is more content each way.

import { Box } from '@/components/Box';
import { Chip } from '@/components/Chip';
import { ScrollArea } from '@/components/ScrollArea';
import { Stack } from '@/components/Stack';

<Box width="100%">

Hover Scrollbar

Thumb stays invisible until hover or keyboard focus.

import { Box } from '@/components/Box';
import { ScrollArea } from '@/components/ScrollArea';
import { Stack } from '@/components/Stack';
import { Text } from '@/components/Text';

<Box width="100%">

API

Component props
Prop
Type
Default
Description
childrenRequirednodeNot setScrollable content
orientationenumhorizontalverticalbothverticalScroll direction
scrollbarVisibilityenumautoalwayshoverautoWhen to show the scrollbar
showFadesbooleanfalseShow gradient fade indicators at scroll edges
classNamestringNot setAdditional class name
dirstringNot set—

Accessibility

  • Preserves native scroll behavior and keyboard support across both axes
  • Scrollbar is visible on focus for keyboard users
  • Respects prefers-reduced-motion for fade transitions

Guidance

Use when

  • Content that overflows a fixed-size container
  • Tab bars or chip rows that may run past the edge
  • Scrollable panels, sidebars, and menu content

Avoid when

  • Whole-page scrolling (use the native body scroll)
  • Content that can never overflow

Next steps