8
Components

Scroll Area

A customizable and accessible scrollable container with optional scrollbars.

Introduction

The ScrollArea component provides a scrollable container with customizable scrollbars. It’s built on top of Radix’s ScrollArea for accessibility and smooth interactions.

Default Use Case: Scrollable Container

This is a scrollable container.

Use the scrollbar to view the overflowing content.

Content line 1

Content line 2

Content line 3

Content line 4

Content line 5

Content line 6

Content line 7

Content line 8

Content line 9

Content line 10

Installation

Install the scroll-area component:

npx axionjs-ui add scroll-area

Horizontal Scrolling

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

Styled Scroll Area

Styled scrollable container.

Content line 1

Content line 2

Content line 3

Content line 4

Content line 5

Content line 6

Content line 7

Content line 8

Content line 9

Content line 10

Content line 11

Content line 12

Content line 13

Content line 14

Content line 15

Custom Scrollbar Styles

Custom scrollbar styles are applied here.

Content line 1

Content line 2

Content line 3

Content line 4

Content line 5

Content line 6

Content line 7

Content line 8

Content line 9

Content line 10

Large Content Scroll Area

Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester. And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.

File Structure

scroll-area.tsx

Prop Types

PropTypeDefault
className
string
-
orientation
"vertical" | "horizontal"
"vertical"

Features

  • Customizable Styles:
    • Tailor the scrollbars and container to match your design.
  • Horizontal and Vertical Scrolling:
    • Flexibly handle overflow in both directions.
  • Keyboard Navigation:
    • Fully accessible with keyboard controls.

Accessibility

  • Keyboard Support:
    • Use Tab and arrow keys to navigate the scrollbars.
  • ARIA Attributes:
    • Implements proper aria-label and roles for screen readers.
  • Screen Reader Support:
    • Compatible with assistive technologies.

Conclusion

The ScrollArea component is a powerful solution for managing scrollable content with customizable styles and built-in accessibility.

Previous

Resizable Panels

Next

Select Scrollable

On this page