Scroll Area Gutter

Component 1

About

A styled scrollable container with a decorative custom scrollbar rail/gutter, available in five visual variants (rail, groove, wide, inset, bordered) and four sizes.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Area Gutter to your project and fits it to your theme.

Code

How Scroll Area Gutter is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  RailScrollArea,
  GrooveScrollArea,
  WideScrollArea,
  InsetScrollArea,
  BorderedScrollArea,
} from "@/components/ui/scroll-area-gutter";

export default function ScrollAreaGutterDemo() {
  return (
    <div className="grid w-full grid-cols-1 gap-6 p-6 sm:grid-cols-2 lg:grid-cols-3">
      <div className="flex flex-col gap-2">
        <span className="text-sm font-medium text-foreground">Rail</span>
        <RailScrollArea size="sm" />
      </div>
      <div className="flex flex-col gap-2">
        <span className="text-sm font-medium text-foreground">Groove</span>
        <GrooveScrollArea size="sm" />
      </div>
      <div className="flex flex-col gap-2">
        <span className="text-sm font-medium text-foreground">Wide</span>
        <WideScrollArea size="sm" />
      </div>
      <div className="flex flex-col gap-2">
        <span className="text-sm font-medium text-foreground">Inset</span>
        <InsetScrollArea size="sm" />
      </div>
      <div className="flex flex-col gap-2">
        <span className="text-sm font-medium text-foreground">Bordered</span>
        <BorderedScrollArea size="sm" />
      </div>
    </div>
  );
}