# Scroll area: Right to left

> Content starts at the right edge, the scrollbar and fades follow the reading direction, and the direction is picked up from the page.

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

## Add this example

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

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

## Source

```tsx title="components/examples/scroll-area/rtl.tsx"
import { ScrollArea } from "@/components/ui/scroll-area"

const tags = [
  "أنظمة التصميم",
  "الحركة",
  "إمكانية الوصول",
  "الطباعة",
  "الألوان",
  "التخطيط",
  "النماذج",
  "جداول البيانات",
  "الرسوم البيانية",
  "التنقل",
]

export function ScrollAreaRtl() {
  return (
    <div dir="rtl" className="w-full max-w-md">
      <ScrollArea scrollbars="horizontal" className="rounded-lg border">
        <div className="flex w-max gap-2 p-3">
          {tags.map((tag) => (
            <span
              key={tag}
              className="rounded-full border px-3 py-1 text-sm whitespace-nowrap"
            >
              {tag}
            </span>
          ))}
        </div>
      </ScrollArea>
    </div>
  )
}
```

## Props in this example

### ScrollArea

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `scrollbars` | `"vertical" \| "horizontal" \| "both"` | `"vertical"` |  |
| `className` | `string \| (state) => string` | – |  |

## More Scroll area examples

- [Peek](https://hextaui.com/docs/scroll-area/examples/peek.md)
- [Text](https://hextaui.com/docs/scroll-area/examples/text.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)