Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Scroll Area examples · Advanced

Dynamic Content Scroll Area for React

A scroll area whose list grows with a Load More button, for paginated content.

Framework
UI library

People scroll to the bottom of a feed and wonder whether there is more. This example starts with ten cards in a 400px Scroll Area and puts a Load More button after the last one: each click appends five items, and the count under the frame updates. New items join the end of the list, so the reading position stays where it was. Use it for activity feeds, search results, and listings where loading everything at once would be too much.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How many cards show at first?

Ten. createItems(1, 10) builds the initial state. Each card is a bordered div with an h3 title, "Item" plus the id, and a p description, inside ScrollArea at h-[400px].

What does Load More add?

The button's onClick appends five items. PAGE_SIZE is 5, and the new ids continue after items.length. The button is a Button with variant outline and className w-full, after the cards, inside the scroller.

Where does the count update?

A p under ScrollArea prints Showing and items.length. It is text-center text-sm text-muted-foreground. Appending cards updates that number because items is state.

Does the list jump when cards are added?

The new cards are spread onto the end of items. The scroll offset is unchanged by that append, so the view stays on the cards you were reading, with Load More still after the last card.

What are the frame classes?

h-[400px] rounded-md border bg-background on ScrollArea. The inner list is flex flex-col gap-4 p-4. The column around the area and the count is max-w-md with gap-4.

Why is this file a client component?

It calls useState for items and updates that state from the button. The card title and description are plain text from createItems.

All 8 scroll area examples