Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Dynamic Content Scroll Area for Ark UI

A scroll panel that starts with Item 1 through Item 10, each with a description, and a Load More button under the panel.

A tall bordered panel lists Item 1 onward, each with a one-line description. It starts with ten items. A Load More button sits under the panel.

Grow a list inside a fixed panel when more pages load on demand. Pagination fits if each page should replace the rows. In React, Ark UI does not fetch the next page.

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

Anatomy

Scroll Area anatomy: root, viewport, content, scrollbar, thumb

Usage

<div className="flex w-full max-w-md flex-col gap-4">
  <ScrollArea className="h-[400px] rounded-md border bg-background">
    <div className="flex flex-col gap-4 p-4">
      {items.map((item) => (
        <div
          className="rounded-lg border bg-card p-4 text-card-foreground shadow-sm"
          key={item.id}
        >
          <h3 className="font-semibold text-sm">{item.title}</h3>
          <p className="mt-1 text-muted-foreground text-sm">
            {item.description}
          </p>
        </div>
      ))}
      <Button className="w-full" onClick={handleLoadMore} variant="outline">
        Load More
      </Button>
    </div>
  </ScrollArea>
  <p className="text-center text-muted-foreground text-sm">
    Showing {items.length} items
  </p>
</div>

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.

API Reference

Scroll Area

No extra props in this demo. The rest is on the Scroll Area page.

Button

Sets onClick={handleLoadMore} and variant="outline". The rest is on the Button page.

All 8 scroll area examples