Scroll Area

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

Installation

import { ScrollArea, ScrollBar } from "@ramp-ds/ui"

Usage

Examples

Project List

Projects

Marketing Site

Live

v2.4

Mobile App

Live

v1.8

Admin Dashboard

Deploying

v3.1

API Gateway

Live

v0.9

Docs Portal

Live

v1.2

Design System

Live

v0.2

Analytics Worker

Paused

—

Feature Flags

Live

v4.0

Horizontal Scroll

Design

Engineering

Product

Research

Ops

Marketing

Content

Infra

Bug

Feature

Docs

Polish

Fixed Height Container

The Ramp Design System is a collection of production-ready React components, design tokens, and patterns for building consistent, accessible interfaces.

Every theme — built-in or user-built — flows through a generator that turns three hues into a full OKLCH-based palette with matching typography, spacing, and motion presets.

Components are built on Radix UI primitives for accessibility and Tailwind CSS for styling. Drop them straight into any Next.js or React project via the npm package.

Switch themes at runtime, persist user themes to localStorage, and ship custom design languages without touching component code. Every skin lives in one ThemeInput object.

Props

Prop	Type	Default	Description
type	"auto" \| "always" \| "scroll" \| "hover"	"hover"	Describes the nature of scrollbar visibility.
scrollHideDelay	number	600	Delay in ms before hiding scrollbars (for type 'scroll' or 'hover').
className	string	-	Additional CSS classes.

Accessibility

Built on Radix UI ScrollArea for consistent behavior
Keyboard scrolling works natively
Custom scrollbars maintain accessibility
Works with screen readers

Sheet

AI Chat

Scroll Area

Installation

Usage

Tags

Examples

Project List

Projects

Horizontal Scroll

Fixed Height Container

Props

Accessibility