ScrollArea

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

Demo

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

Line 9

Line 10

Dependencies

clsxtailwind-merge

Props

This is a base primitive. It accepts standard HTML attributes plus className for styling via cn().

Source

"use client";

import { cn } from "@/lib/utils";

export interface ScrollAreaProps {
  children?: React.ReactNode;
  className?: string;
  orientation?: "vertical" | "horizontal" | "both";
}

export function ScrollArea({
  children,
  className,
  orientation = "vertical",
}: ScrollAreaProps) {
  const overflow =
    orientation === "horizontal"
      ? "overflow-x-auto"
      : orientation === "both"
        ? "overflow-auto"
        : "overflow-y-auto";

  return <div className={cn("relative", overflow, className)}>{children}</div>;
}

CLI

npx genui add scroll-area