H
UI by hampton.io
Get Started
Back to Components
Components

Scroll Area

Custom scrollbar styling with overflow detection and gradient fade indicators.

Item 1

Scroll to see overflow indicators and custom scrollbar styling.

Item 2

Scroll to see overflow indicators and custom scrollbar styling.

Item 3

Scroll to see overflow indicators and custom scrollbar styling.

Item 4

Scroll to see overflow indicators and custom scrollbar styling.

Item 5

Scroll to see overflow indicators and custom scrollbar styling.

Item 6

Scroll to see overflow indicators and custom scrollbar styling.

Item 7

Scroll to see overflow indicators and custom scrollbar styling.

Item 8

Scroll to see overflow indicators and custom scrollbar styling.

Item 9

Scroll to see overflow indicators and custom scrollbar styling.

Item 10

Scroll to see overflow indicators and custom scrollbar styling.

Item 11

Scroll to see overflow indicators and custom scrollbar styling.

Item 12

Scroll to see overflow indicators and custom scrollbar styling.

Dependencies

  • clsx
  • tailwind-merge

Files

  • components/ui/scroll-area.tsx

Installation

Using shadcn CLI

npx shadcn add scroll-area --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge