Scroll Area

Component 3

About

A scroll area with slim auto hiding custom scrollbars for lists, sidebars, chat panels and code blocks. Keeps constrained containers tidy on every browser.

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

Code

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

Usage.tsx

"use client";

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

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

const primitivePreviewCardSurfaceFrameClass = cn(
  "relative isolate overflow-hidden rounded-2xl",
  "border",
);

const primitivePreviewCardSurfaceLightClass = cn(
  "border-black/[0.08] bg-[#f4f4f5]",
  "[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);

const primitivePreviewCardSurfaceClass = cn(
  primitivePreviewCardSurfaceFrameClass,
  primitivePreviewCardSurfaceLightClass,
  // Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
  // PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
  "dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);

const cardSurface = primitivePreviewCardSurfaceClass;

/* ─── Image gallery data ────────────────────────────────────── */

const GALLERY_IMAGES = [
  { src: "https://cdn.21st.dev/assets/mirror/14/14f3ac59941b8c9cdd928c4e2f32598596258bcb4f10d27f5512696984ce5154.webp", alt: "Docs Site Hero", label: "Hero" },
  { src: "https://cdn.21st.dev/assets/mirror/fa/fae133b32eabe0a4bd686ccf946a3dfd0e3b602e743260e3a213e43dfa9d0d23.webp", alt: "Architecture", label: "Architecture" },
  { src: "https://cdn.21st.dev/assets/mirror/fe/fe7ab7067e72a71335933a4d0d6b028d29aae555b1c0175055415be9433e0d85.webp", alt: "Content", label: "Content" },
  { src: "https://cdn.21st.dev/assets/mirror/02/027a6ad457f2f809047d14e1546bfa872ceb0cbe19d392c994b5a91f7373a458.webp", alt: "Fintech Hero", label: "Fintech" },
  { src: "https://cdn.21st.dev/assets/mirror/80/800fb4f3518a67db0fcba37b457332398daac5d97f0db4ea48e0516e49ea3145.webp", alt: "Payments", label: "Payments" },
  { src: "https://cdn.21st.dev/assets/mirror/74/740b212e0ef32542d4ae262d0cc4d9471e671742ea1407311352d8336ee1016c.webp", alt: "Pricing", label: "Pricing" },
];

/* ─── Demo content ──────────────────────────────────────────── */

/* ─── Reusable content blocks ───────────────────────────────── */

/* ─── Main Preview: Image Gallery ───────────────────────────── */

export function ScrollAreaPreview() {
  return (
    <div className={cn(cardSurface, "w-[600px] p-5")}>
      <ScrollArea orientation="horizontal" hideScrollbar="auto">
        <div className="flex gap-4 pb-1 w-max">
          {GALLERY_IMAGES.map((img, i) => (
            <figure key={i} className="shrink-0 w-[220px]">
              <img
                src={img.src}
                alt={img.alt}
                className="w-full aspect-[16/10] rounded-xl object-cover"
              />
              <figcaption className="mt-2 text-center text-[12px] font-medium text-zinc-500 dark:text-zinc-400">
                {img.label}
              </figcaption>
            </figure>
          ))}
        </div>
      </ScrollArea>
    </div>
  );
}

/* ─── Card Preview ──────────────────────────────────────────── */

/* ─── Individual Examples ───────────────────────────────────── */

/* ─── Image Gallery ─────────────────────────────────────────── */

export default function Demo() {
  return <ScrollAreaPreview />;
}