arca-ui

Scroll Area

Minimal scroll areas with subtle scrollbar styling for inner controls.

Vertical Scroll

Tags

Tag 50
Tag 49
Tag 48
Tag 47
Tag 46
Tag 45
Tag 44
Tag 43
Tag 42
Tag 41
Tag 40
Tag 39
Tag 38
Tag 37
Tag 36
Tag 35
Tag 34
Tag 33
Tag 32
Tag 31
Tag 30
Tag 29
Tag 28
Tag 27
Tag 26
Tag 25
Tag 24
Tag 23
Tag 22
Tag 21
Tag 20
Tag 19
Tag 18
Tag 17
Tag 16
Tag 15
Tag 14
Tag 13
Tag 12
Tag 11
Tag 10
Tag 9
Tag 8
Tag 7
Tag 6
Tag 5
Tag 4
Tag 3
Tag 2
Tag 1

Scrollbar Styles

Default
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
With Track
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Colored
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Minimal
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

Scrollbar Widths

Thin
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Default
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Wide
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

Horizontal Scroll

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12
Card 13
Card 14
Card 15

Article List

Getting Started with Paper Cut Design

Design Team•Dec 10, 2024

Learn the fundamentals of the Paper Cut design system and how to apply it to your projects.

Understanding Light and Shadow

Visual Design•Dec 9, 2024

Explore how light projection creates depth and dimension in modern UI design.

Typography Best Practices

Content Team•Dec 8, 2024

A comprehensive guide to choosing and pairing fonts for optimal readability.

Color Theory for Interfaces

UI/UX Team•Dec 7, 2024

Discover how subtle color variations can enhance user experience.

Component Architecture

Engineering•Dec 6, 2024

Building scalable and maintainable component systems for enterprise applications.

Animation Principles

Motion Design•Dec 5, 2024

Creating smooth, purposeful animations that delight users without distraction.

Accessibility Guidelines

Accessibility Team•Dec 4, 2024

Ensuring your designs are inclusive and usable by everyone.

Responsive Design Patterns

Frontend Team•Dec 3, 2024

Adapting layouts seamlessly across different screen sizes and devices.

Code Block

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

function Example() {
  return (
    <ScrollArea className="h-72 w-full rounded-md border">
      <div className="p-4">
        {/* Your scrollable content here */}
        {items.map((item) => (
          <div key={item.id} className="py-2">
            {item.name}
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

// The theme applies:
// - Subtle rounded scrollbar thumb
// - Minimal hover effect
// - Clean, minimal aesthetic

export default Example

Chat Messages

Hey! Have you seen the new design system?

10:00 AM

Yes! The new theme looks amazing.

10:02 AM

I love the subtle styling. Very clean approach.

10:03 AM

The hover animations are smooth too. Really nice attention to detail.

10:05 AM

Should we use it for the new project?

10:06 AM

Definitely. It fits our brand perfectly.

10:08 AM

Great! I will set up the components tomorrow.

10:10 AM

Sounds good. Let me know if you need any help!

10:12 AM

Best Practices

Inset Surface (Nested)

Tags

Tag 50
Tag 49
Tag 48
Tag 47
Tag 46
Tag 45
Tag 44
Tag 43
Tag 42
Tag 41
Tag 40
Tag 39

In scrollable regions inside elevated surfaces, use inset backgrounds to reduce noise.

Minimal Scrollbars
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14

Keep scrollbar styling subtle by default — treat it as an inner control detail.

Anti-patterns

Double elevation
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14

Avoid giving the scroll container a strong shadow when it already sits in an elevated surface.

Correct
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14

Keep scrollable regions inset, and reserve strong elevation for top-level containers.

API Reference

ScrollArea is a Level 1 inset control built on Radix Scroll Area.

Exports

ComponentNotes
ScrollAreaRoot + Viewport with a default ScrollBar.
ScrollBarPass orientation to render vertical or horizontal thumbs.