Scroll Area

Component 12

About

Augments native scroll functionality for custom, cross-browser styling.

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

import * as React from "react"
import Image from "next/image"

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

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

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

export interface Artwork {
  artist: string
  art: string
}

export const works: Artwork[] = [
  {
    artist: "Ornella Binni",
    art: "https://cdn.21st.dev/assets/mirror/c2/c2abbd88a17c2748e526a75db371c61b7c464e3ad96b7b8572db62be39ca6b74.jpg",
  },
  {
    artist: "Tom Byrom",
    art: "https://cdn.21st.dev/assets/mirror/c8/c8df3f768d669275e42653483fd1ae3b4a945c7ea69e408969de5044c1938eef.jpg",
  },
  {
    artist: "Vladimir Malyavko",
    art: "https://cdn.21st.dev/assets/mirror/33/338e359133ed59ac7e1b360e7df710c82d4d3ba5f55c42ba8f83dae6dcedf535.jpg",
  },
]

function ScrollAreaHorizontalDemo() {
  return (
    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
      <div className="flex w-max space-x-4 p-4">
        {works.map((artwork) => (
          <figure key={artwork.artist} className="shrink-0">
            <div className="overflow-hidden rounded-md">
              <Image
                src={artwork.art}
                alt={`Photo by ${artwork.artist}`}
                className="aspect-[3/4] h-fit w-fit object-cover"
                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>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  )
}

export default {
  ScrollAreaDemo,
  ScrollAreaHorizontalDemo,
}