Skip to content

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

Free

Fixed Height ScrollArea Scroll Area for Vue

A Notifications heading over ten rows, Notification 1 onward, inside a panel 200 pixels tall that scrolls.

UI library: Ark UI

Notifications heads a bordered panel 200 pixels tall. Inside are ten rows, Notification 1 onward, each with a number, a message and a relative time.

Fix the height when a list should not push the page down, such as a notification tray. A Popover can hold the same list off to the side. Ark UI in Vue does not choose that height.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<div class="flex w-full max-w-md flex-col gap-2">
  <h3 class="font-semibold text-sm">Notifications</h3>
  <ScrollArea class="h-[200px] rounded-md border bg-background">
    <div class="flex flex-col gap-4 p-4">
      <div
        v-for="notification in notifications"
        class="flex items-start gap-3"
        :key="notification.id"
      >
        <div class="flex size-8 shrink-0 items-center justify-center rounded-full bg-primary/10">
          <span class="font-medium text-primary text-xs">{{ notification.id }}</span>
        </div>
        <div class="flex flex-1 flex-col gap-1">
          <p class="font-medium text-sm leading-none">{{ notification.title }}</p>
          <p class="text-muted-foreground text-sm">{{ notification.message }}</p>
          <p class="text-muted-foreground text-xs">{{ notification.time }}</p>
        </div>
      </div>
    </div>
  </ScrollArea>
</div>

FAQ

What keeps the panel the same height?

ScrollArea has h-[200px], so ten notifications scroll inside that box. The list can grow and the panel stays 200px. The heading "Notifications" is outside the area, so it does not scroll.

What are the frame classes?

rounded-md border bg-background on ScrollArea. The inner wrapper is flex flex-col gap-4 p-4, so the gap and the padding scroll with the rows.

How is one notification laid out?

A row with flex items-start gap-3. The mark is a size-8 shrink-0 circle, rounded-full bg-primary/10, with the id in text-xs text-primary. The title, message, and time stack in flex-1 with gap-1.

What type size is the time?

The title is text-sm and font-medium. The message is text-sm text-muted-foreground. The time is text-xs text-muted-foreground, and it reads "1 minutes ago" through "10 minutes ago" from the item index.

How many notifications are in the file?

Ten. They are built with Array.from and keyed by id. Each message is "This is a notification message for item" plus that id.

Which scrollbar does this panel use?

The vertical one. The fixed height is what gives it something to scroll. This file does not render a second bar. Both bars are already rendered. A list this tall uses the vertical one.

API Reference

Scroll Area

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

All 8 scroll area examples