A scroll area with slim auto hiding custom scrollbars for lists, sidebars, chat panels and code blocks. Keeps constrained containers tidy on every browser.
"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 />;
}