Scroll Area

Preview

Installation

npx shadcn@latest add @cubby-ui/scroll-area

Usage


import { ScrollArea } from "@/components/ui/cubby-ui/scroll-area";


<ScrollArea />

Examples

Fade Edges

Use the fadeEdges prop to add a subtle fade effect at the edges. The fade appears when content is scrollable in that direction and uses CSS masks, so it works over any background.

The scroll fade effect uses CSS masks to create a subtle fade at the edges of the scroll container. This provides a visual hint that more content is available.

As you scroll, the fade appears and disappears based on your position. When at the top, only the bottom fade shows. When at the bottom, only the top fade shows.

This approach uses Tailwind's mask utilities and works over any background color or pattern without needing to match colors.

The fade size is set to 1.5rem by default, providing a clean transition that's visible but not distracting.

Scrollbar Gutter

Use the scrollbarGutter prop to reserve space for the scrollbar when content overflows. This prevents layout shift when the scrollbar appears.

Without gutter

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

With gutter

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Persistent Scrollbar

Use the persistScrollbar prop to always show the scrollbar instead of fading it in on hover or scroll.

The scrollbar is always visible, providing constant awareness of scroll position and content length.

This is useful for interfaces where users need to quickly gauge how much content exists or navigate large lists efficiently.

Unlike the default behavior where the scrollbar fades in on hover or scroll, persistent scrollbars remain visible at all times.

Horizontal Scroll

Enable horizontal scrolling for wide content.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Type

Default

Preview

Tags

Installation

Usage

Examples

Fade Edges

Scrollbar Gutter

Persistent Scrollbar

Horizontal Scroll

Both Scrollbars

API Reference

Props

ScrollArea

On this page