Scroll Area

A custom scrollbar container.

Installation

bash

npx shadcn@latest add scroll-area

npx shadcn@latest add scroll-area

Import

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

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

Vertical

const tags = Array.from({ length: 50 }).map((_, i) => `v1.0.${i}`)<ScrollArea className="h-72 w-48 rounded-md border">  <div className="p-4">    <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>    {tags.map((tag) => (      <React.Fragment key={tag}>        <div className="text-sm">{tag}</div>        <Separator className="my-2" />      </React.Fragment>    ))}  </div></ScrollArea>

const tags = Array.from({ length: 50 }).map((_, i) => `v1.0.${i}`)<ScrollArea className="h-72 w-48 rounded-md border">  <div className="p-4">    <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>    {tags.map((tag) => (      <React.Fragment key={tag}>        <div className="text-sm">{tag}</div>        <Separator className="my-2" />      </React.Fragment>    ))}  </div></ScrollArea>

Horizontal

<ScrollArea className="w-96 whitespace-nowrap rounded-md border">  <div className="flex w-max space-x-4 p-4">    {Array.from({ length: 20 }).map((_, i) => (      <div key={i} className="w-32 shrink-0 rounded-md border p-4">        Item {i + 1}      </div>    ))}  </div></ScrollArea>

<ScrollArea className="w-96 whitespace-nowrap rounded-md border">  <div className="flex w-max space-x-4 p-4">    {Array.from({ length: 20 }).map((_, i) => (      <div key={i} className="w-32 shrink-0 rounded-md border p-4">        Item {i + 1}      </div>    ))}  </div></ScrollArea>

Props

PROPTYPEDEFAULTDESCRIPTION

classNamestring—Sets dimensions (height/width) of the scroll container

orientation"vertical" | "horizontal""vertical"Scroll direction