Scroll Area

A scrollable container with a custom scrollbar that is consistent across browsers.

When To Use

Use the Scroll Area component when you need to:

Create a scrollable container with a custom scrollbar
Ensure consistent scrollbar styling across different browsers
Control the appearance and behavior of scrollbars
Maintain a uniform UI design regardless of the user's operating system
Create scrollable areas with limited height or width

Scroll Areas are especially useful for creating contained scrollable sections within a page, such as side panels, code blocks, long lists, and modal content.

Examples

Basic#

Introduction to Scroll Area

The ScrollArea component provides a scrollable container with a custom scrollbar that is consistent across different browsers and operating systems.

It is built on top of Radix UI's ScrollArea primitive, providing a reliable and accessible scrolling experience that maintains the same visual design regardless of the user's platform.

Key Features

Consistent styling across browsers and operating systems
Customizable scrollbar appearance
Support for both vertical and horizontal scrolling
Maintains native scrolling behavior for the best user experience
Automatically adjusts to the content size

Use Cases

Scroll Areas are particularly useful for creating contained scrollable sections within a page, such as side panels, code blocks, long lists, and modal content.

By providing a consistent scrollbar appearance, they help maintain the visual coherence of your interface while still allowing users to scroll through content naturally.

Accessibility

The ScrollArea component preserves the native scrolling functionality, ensuring that keyboard navigation, touch scrolling, and screen reader compatibility are maintained.

This makes it an excellent choice for creating scrollable content that remains accessible to all users, regardless of how they interact with your application.

Horizontal#

Scroll horizontally to view all images

With Max Height#

This ScrollArea has a max-height of 200px and will only show a scrollbar when the content exceeds this height.

Items List

Item 1 of 50

Item 2 of 50

Item 3 of 50

Item 4 of 50

Item 5 of 50

Item 6 of 50

Item 7 of 50

Item 8 of 50

Item 9 of 50

Item 10 of 50

Item 11 of 50

Item 12 of 50

Item 13 of 50

Item 14 of 50

Item 15 of 50

Item 16 of 50

Item 17 of 50

Item 18 of 50

Item 19 of 50

Item 20 of 50

Item 21 of 50

Item 22 of 50

Item 23 of 50

Item 24 of 50

Item 25 of 50

Item 26 of 50

Item 27 of 50

Item 28 of 50

Item 29 of 50

Item 30 of 50

Item 31 of 50

Item 32 of 50

Item 33 of 50

Item 34 of 50

Item 35 of 50

Item 36 of 50

Item 37 of 50

Item 38 of 50

Item 39 of 50

Item 40 of 50

Item 41 of 50

Item 42 of 50

Item 43 of 50

Item 44 of 50

Item 45 of 50

Item 46 of 50

Item 47 of 50

Item 48 of 50

Item 49 of 50

Item 50 of 50

Custom#

Code Block Style

// Example TypeScript code
import { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

function UserProfile({ userId }: { userId: number }) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchUser() {
      try {
        setLoading(true);
        const response = await fetch(`/api/users/${userId}`);
        
        if (!response.ok) {
          throw new Error('Failed to fetch user data');
        }
        
        const userData = await response.json();
        setUser(userData);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'An unknown error occurred');
      } finally {
        setLoading(false);
      }
    }

    fetchUser();
  }, [userId]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!user) return <div>No user found</div>;

  return (
    <div className="user-profile">
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Colorful Style

Props

ScrollArea

Prop	Type	Default
`scrollHideDelay?`	`number`	-
`type?`	`"auto" \| "always" \| "scroll" \| "hover"`	-
`asChild?`	`boolean`	-
`key?`	`Key \| null`	-

ScrollBar

Prop	Type	Default
`orientation?`	`"horizontal" \| "vertical"`	-
`forceMount?`	`true`	-
`asChild?`	`boolean`	-
`key?`	`Key \| null`	-