ScrollArea Pro

Galleries

About

A scrollable container with auto-hiding scrollbars, horizontal/vertical scroll progress indicators, and cross-axis wheel/touch scrolling for content overflow.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds ScrollArea Pro to your project and fits it to your theme.

Code

How ScrollArea Pro is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { ScrollAreaPro } from "@/components/ui/scroll-areapro";

export interface Artwork {
  artist: string;
  art: string;
}

export const works: Artwork[] = [
  {
    artist: "Lawrence Krowdeed",
    art: "https://cdn.21st.dev/assets/mirror/22/22e4cb44508340a45351d791fa9b28e76e1b5cbfbb318b885431eb58966d6503.jpg",
  },
  {
    artist: "烧不酥在上海 老的",
    art: "https://cdn.21st.dev/assets/mirror/3c/3c500a310b26f6f7e18b16d2db6130b0cb200159c52237867fdfd4185ffc6dc5.jpg",
  },
  {
    artist: "Hulki Okan Tabak",
    art: "https://cdn.21st.dev/assets/mirror/3d/3d5816d821db3c5f56408ed1ff3880c0480219fb67f0b62ae38cf413fa4d8867.jpg",
  },
  {
    artist: "Sam Baroudi",
    art: "https://cdn.21st.dev/assets/mirror/63/6357535f519c961e17434db399efc8cad384d5b4b349869f9696901b314d4520.jpg",
  },
];

export default function ScrollAreaProHorizontal() {
  return (
    <div className="flex items-center justify-center">
      <ScrollAreaPro
        className="w-96 rounded-md border"
        crossDirectionalScroll
        showProgress="horizontal"
      >
        <div className="flex w-max space-x-4 px-4 py-4">
          {works.map((artwork) => (
            <figure key={artwork.artist} className="shrink-0">
              <div className="overflow-hidden rounded-md">
                <img
                  src={artwork.art}
                  alt={`Photo by ${artwork.artist}`}
                  className="aspect-3/4 object-cover grayscale"
                  width={300}
                  height={400}
                />
              </div>
              <figcaption className="pt-2 text-xs text-muted-foreground">
                Photo by{" "}
                <span className="font-semibold text-foreground">
                  {artwork.artist}
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </ScrollAreaPro>
    </div>
  );
}