# 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.

Example: https://hextaui.com/docs/scroll-area/examples/text
Component docs: https://hextaui.com/docs/scroll-area.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/scroll-area-text.json
```

This adds `components/examples/scroll-area/text.tsx` with the Scroll area component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/scroll-area/text.tsx"
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>
  )
}
```

## Props in this example

### ScrollArea

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| (state) => string` | – |  |

## More Scroll area examples

- [Peek](https://hextaui.com/docs/scroll-area/examples/peek.md)
- [Start at the bottom](https://hextaui.com/docs/scroll-area/examples/chat.md)
- [Horizontal](https://hextaui.com/docs/scroll-area/examples/horizontal.md)
- [Both axes](https://hextaui.com/docs/scroll-area/examples/both.md)
- [Dynamic content](https://hextaui.com/docs/scroll-area/examples/dynamic.md)
- [On a colored surface](https://hextaui.com/docs/scroll-area/examples/colored-surface.md)
- [Inside a sheet](https://hextaui.com/docs/scroll-area/examples/sheet.md)
- [Without fade](https://hextaui.com/docs/scroll-area/examples/without-fade.md)
- [Right to left](https://hextaui.com/docs/scroll-area/examples/rtl.md)