Scroll Area

Overview

Use Scroll Area when content needs its own scrollable region with custom scrollbars.

Scroll areas are useful for menus, sidebars, code panes, tables, activity feeds, and fixed-height panels.

Anatomy

A scroll area has a viewport, content, and optional horizontal or vertical scrollbars.

Usage guidance

Use scroll areas when the surrounding layout needs to stay fixed. Avoid hiding important content in a small scroll region when the page itself can scroll naturally.

Accessibility

Make sure keyboard and touch users can reach the content. Keep scrollable regions large enough to use comfortably.

Installation

npm

npx love-ui@latest add scroll-area

Usage

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

<ScrollArea className="h-64 rounded-md border">
  <div className="p-4">
    Just as suddenly as it had begun, the sensation stopped, leaving Alice
    feeling slightly disoriented. She looked around and realized that the room
    hadn't changed at all - it was she who had grown smaller, shrinking down to
    a fraction of her previous size. Alice felt herself growing larger and
    larger, filling up the entire room until she feared she might burst. The
    sensation was both thrilling and terrifying, as if she were expanding beyond
    the confines of her own body. She wondered if this was what it felt like to
    be a balloon, swelling with air until it could hold no more.
  </div>
</ScrollArea>

Examples

The examples show horizontal scrolling and combined horizontal and vertical scrolling.

Horizontal Scroll

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

Just as suddenly as it had begun, the sensation stopped, leaving Alice feeling slightly disoriented. She looked around and realized that the room hadn't changed at all - it was she who had grown smaller, shrinking down to a fraction of her previous size. Alice felt herself growing larger and larger, filling up the entire room until she feared she might burst. The sensation was both thrilling and terrifying, as if she were expanding beyond the confines of her own body. She wondered if this was what it felt like to be a balloon, swelling with air until it could hold no more. Alice peered into the mirror, her reflection staring back at her with an air of mischief. She wondered what it would be like to step through the glass and into the world beyond, where everything seemed to be topsy-turvy and nothing was quite as it seemed. It's no use going back to yesterday, because I was a different person then, reflected Alice.