104Get started
HextaUI

Scroll area: Text

Edges fade only where there is more content to scroll to. At the top only the bottom fades, and the fade grows in as you scroll away from an edge.

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

export function ScrollAreaText() {
  return (
    <ScrollArea className="h-48 w-full max-w-md rounded-lg border">
      <div className="flex flex-col gap-3 p-4 text-sm leading-6">
        {Array.from({ length: 6 }, (_, index) => (
          <p key={index}>
            Vernacular architecture is building done outside any academic
            tradition, and without professional guidance. It reflects local
            traditions, materials and climate, and makes up most of the world’s
            built environment.
          </p>
        ))}
      </div>
    </ScrollArea>
  )
}

Add this example

This adds the example as components/examples/scroll-area/text.tsx, together with the Scroll area component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/scroll-area-text.json

To add only the component, follow the Scroll area installation.

Props in this example

The Scroll area props this example sets, from the API reference.

ScrollArea

PropTypeDefault
className
string | (state) => string–

Every prop is in the Scroll area API reference.

More Scroll area examples

See them all, with keyboard support and accessibility notes, on the Scroll area page.

Related components