import * as React from "react";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
const tags = Array.from({ length: 50 }).map(Installation
Usage
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
Your scrollable content here.
</ScrollArea>Composition
Use the following composition to build a ScrollArea:
ScrollArea
└── ScrollBarHorizontal
Use ScrollBar with orientation="horizontal" for horizontal scrolling.
import Image from "next/image";
import * as React from "react";
import { ScrollArea } from "@/components/ui/scroll-area";
export interface Artwork {RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
"use client";
import * as React from "react";
import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";API Reference
See the Base UI Scroll Area documentation.