Scroll Area

TSX
import * as React from "react";

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

const tags = Array.from({ length: 50 }, (_, i) => `v1.2.0-beta.${50 - i}`);

export default function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-72 w-48 rounded-md border">
      <div className="p-4">
        <h4 className="mb-4 text-sm leading-none font-medium">Tags</h4>
        {tags.map((tag) => (
          <React.Fragment key={tag}>
            <div className="text-sm">{tag}</div>
            <Separator className="my-2" />
          </React.Fragment>
        ))}
      </div>
    </ScrollArea>
  );
}

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

const artworks = [
  "Sunrise over the bay",
  "Concrete and glass",
  "Field studies",
  "Night traffic",
  "Quiet interiors",
  "Coastal walk",
];

export default function ScrollAreaHorizontal() {
  return (
    <ScrollArea
      orientation="horizontal"
      className="w-full max-w-sm rounded-lg border"
    >
      <div className="flex w-max gap-3 p-3">
        {artworks.map((title) => (
          <figure key={title} className="w-36 shrink-0">
            <img
              src="/placeholder.svg"
              alt=""
              className="aspect-square rounded-md object-cover"
            />
            <figcaption className="mt-1.5 truncate text-xs text-muted-foreground">
              {title}
            </figcaption>
          </figure>
        ))}
      </div>
    </ScrollArea>
  );
}