✨ If you like Ebon UI, please give us a star on GitHub.
1
3
Block

Scroll Area

PreviousNext

Component for a scroll bar.

"use client"

import * as React from "react"

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

export function ScrollAreaDemo() {
  return (
    <div className="container mx-auto space-y-8 py-10">
      <ScrollArea className="h-64 rounded-md border">
        <div className="p-4">
          <div className="prose prose-sm max-w-none">
            {Array.from({ length: 100 }).map((_, i) => (
              <div key={i} className="mb-4">
                <p className="text-muted-foreground mb-2 text-sm">
                  This section contains detailed information about various
                  aspects of the project. It includes technical specifications,
                  implementation details, and usage guidelines. The content is
                  structured to provide comprehensive coverage of all relevant
                  topics.
                </p>
              </div>
            ))}
          </div>
        </div>
        <ScrollBar orientation="vertical" />
      </ScrollArea>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://ebonui.com/r/scroll-area.json

Examples

Horizontal Scrolling

"use client"

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

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

export function ScrollAreaDemoTwo() {
  return (
    <div className="container mx-auto space-y-8 py-10">
      <ScrollArea className="h-64 w-full rounded-md border">
        <div className="flex space-x-4 p-4">
          {Array.from({ length: 8 }).map((_, i) => (
            <div key={i} className="flex w-48 shrink-0 flex-col space-y-2">
              <div className="bg-muted aspect-square overflow-hidden rounded-md">
                <Image
                  src={`https://picsum.photos/192/192?random=${i}`}
                  alt={`Image ${i + 1}`}
                  className="h-full w-full object-cover"
                  width={192}
                  height={192}
                />
              </div>
            </div>
          ))}
        </div>
        <ScrollBar orientation="horizontal" />
      </ScrollArea>
    </div>
  )
}