Primitive · CLI

Scroll Area

Bounded scroll region with soft-rect thumb that fades when idle.

Preview

npx shadcn@latest add @atroui/scroll-area

Registry

button

dialog

popover

preview-card

scroll-area

separator

tabs

tooltip

Installation

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/scroll-area

Source lands in your repo. Installation · Registry

Usage

Give the root a fixed height (or max-height) so content can overflow. Thumb fades when idle; soft-rect, not a capsule.

tsx

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

<ScrollArea className="h-48 w-56 rounded-[var(--radius)] border border-border-subtle">
  <div className="p-3">
    {tags.map((tag) => (
      <div key={tag}>
        <div className="text-sm">{tag}</div>
        <Separator className="my-2" />
      </div>
    ))}
  </div>
</ScrollArea>

Primitive · CLI

Scroll Area

Bounded scroll region with soft-rect thumb that fades when idle.

Preview

npx shadcn@latest add @atroui/scroll-area

Registry

button

dialog

popover

preview-card

scroll-area

separator

tabs

tooltip

Installation

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/scroll-area

Source lands in your repo. Installation · Registry

Usage

Give the root a fixed height (or max-height) so content can overflow. Thumb fades when idle; soft-rect, not a capsule.

tsx

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

<ScrollArea className="h-48 w-56 rounded-[var(--radius)] border border-border-subtle">
  <div className="p-3">
    {tags.map((tag) => (
      <div key={tag}>
        <div className="text-sm">{tag}</div>
        <Separator className="my-2" />
      </div>
    ))}
  </div>
</ScrollArea>

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

<ScrollArea className="h-48 w-56 rounded-[var(--radius)] border border-border-subtle">
  <div className="p-3">
    {tags.map((tag) => (
      <div key={tag}>
        <div className="text-sm">{tag}</div>
        <Separator className="my-2" />
      </div>
    ))}
  </div>
</ScrollArea>