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

Scroll Area

Component for a scroll bar.

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.

"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 @ebonui/scroll-area

Examples

Horizontal Scrolling

Open in

"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>
  )
}

Ripple Scroll Based Velocity

On This Page

Installation Examples Horizontal Scrolling

Contribute

Scroll Area

Component for a scroll bar.

Open in

"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 @ebonui/scroll-area

Examples

Horizontal Scrolling

Open in

"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>
  )
}

Ripple Scroll Based Velocity

On This Page

Installation Examples Horizontal Scrolling

Contribute