components

Scroll Area

A scroll area component that allows a user to scroll through a list of items

Source CodeRadix UI

Contacts

Sarah Johnson

online
sarah.johnson@company.com
+1 (555) 123-4567
123 Main St, New York, NY 10001
Last active: 2 minutes ago

Michael Chen

away
michael.chen@company.com
+1 (555) 234-5678
456 Oak Ave, San Francisco, CA 94102
Last active: 1 hour ago

Emily Rodriguez

online
emily.rodriguez@company.com
+1 (555) 345-6789
789 Pine St, Los Angeles, CA 90210
Last active: 5 minutes ago

David Kim

offline
david.kim@company.com
+1 (555) 456-7890
321 Elm St, Chicago, IL 60601
Last active: 3 hours ago

Lisa Thompson

online
lisa.thompson@company.com
+1 (555) 567-8901
654 Maple Dr, Seattle, WA 98101
Last active: 1 minute ago

Alex Martinez

away
alex.martinez@company.com
+1 (555) 678-9012
987 Cedar Ln, Austin, TX 78701
Last active: 30 minutes ago

Rachel Green

online
rachel.green@company.com
+1 (555) 789-0123
147 Birch St, Boston, MA 02101
Last active: 10 minutes ago

Tom Wilson

offline
tom.wilson@company.com
+1 (555) 890-1234
258 Spruce Ave, Denver, CO 80201
Last active: 2 hours ago

Anna Davis

online
anna.davis@company.com
+1 (555) 901-2345
369 Willow Way, Miami, FL 33101
Last active: Just now

James Brown

away
james.brown@company.com
+1 (555) 012-3456
741 Poplar Blvd, Phoenix, AZ 85001
Last active: 45 minutes ago

Installation

pnpm add @radix-ui/react-scroll-area

Usage

Imports

/components/ui/scroll-area
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"

Code

/components/ui/scroll-area
<ScrollArea className="h-80 w-80 rounded-lg border p-2">
	Radian is an open-source React component library and UI design system built to
	accelerate product development with beautiful defaults. Currently, available
	for Next.js, it's powered by Tailwind CSS and Radix Primitives, providing a
	solid foundation for modern web apps. Radian helps you design and iterate
	quickly, offering components that can serve as ready-to-use building blocks
	for your final product or as customizable starters for unique projects. We've
	prioritized flexibility, ensuring common properties and behaviors are baked
	in—so you won't waste time rebuilding essentials.
</ScrollArea>

Props

<ScrollArea>
NameDefaultValues
External Reference--
<ScrollBar>
NameDefaultValues
External Reference--