ScrollArea

Native scrolling with themed custom scrollbars for dense panels and lists.

Preview#

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque.

Anatomy#

import {
  ScrollArea,
  ScrollAreaContent,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  ScrollAreaViewport,
} from "raft-ui";

<ScrollArea>
  <ScrollAreaViewport>
    <ScrollAreaContent />
  </ScrollAreaViewport>
  <ScrollAreaScrollbar>
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollArea>

Usage#

Both axes#

1:1

1:2

1:3

1:4

1:5

1:6

1:7

1:8

1:9

1:10

1:11

1:12

2:1

2:2

2:3

2:4

2:5

2:6

2:7

2:8

2:9

2:10

2:11

2:12

3:1

3:2

3:3

3:4

3:5

3:6

3:7

3:8

3:9

3:10

3:11

3:12

4:1

4:2

4:3

4:4

4:5

4:6

4:7

4:8

4:9

4:10

4:11

4:12

5:1

5:2

5:3

5:4

5:5

5:6

5:7

5:8

5:9

5:10

5:11

5:12

6:1

6:2

6:3

6:4

6:5

6:6

6:7

6:8

6:9

6:10

6:11

6:12

7:1

7:2

7:3

7:4

7:5

7:6

7:7

7:8

7:9

7:10

7:11

7:12

8:1

8:2

8:3

8:4

8:5

8:6

8:7

8:8

8:9

8:10

8:11

8:12

9:1

9:2

9:3

9:4

9:5

9:6

9:7

9:8

9:9

9:10

9:11

9:12

10:1

10:2

10:3

10:4

10:5

10:6

10:7

10:8

10:9

10:10

10:11

10:12

11:1

11:2

11:3

11:4

11:5

11:6

11:7

11:8

11:9

11:10

11:11

11:12

12:1

12:2

12:3

12:4

12:5

12:6

12:7

12:8

12:9

12:10

12:11

12:12

API#WIP

ScrollArea#

...props

Base UI ScrollArea.Root.Props

Root grouping for viewport, content, scrollbar, and corner parts.

Prop	Type	Default	Description
`...props`	Base UI ScrollArea.Root.Props	—	Root grouping for viewport, content, scrollbar, and corner parts.

ScrollAreaViewport#

...props

Base UI ScrollArea.Viewport.Props

The scrollable viewport. Overflow edge CSS variables live on this part.

Prop	Type	Default	Description
`...props`	Base UI ScrollArea.Viewport.Props	—	The scrollable viewport. Overflow edge CSS variables live on this part.

ScrollAreaContent#

...props

Base UI ScrollArea.Content.Props

Sized content wrapper inside the viewport.

Prop	Type	Default	Description
`...props`	Base UI ScrollArea.Content.Props	—	Sized content wrapper inside the viewport.

ScrollAreaScrollbar#

orientationdefault: "vertical"

"vertical" | "horizontal"

Scrollbar axis.

...props

Base UI ScrollArea.Scrollbar.Props

Custom scrollbar track. Visible while scrolling via data-scrolling.

Prop	Type	Default	Description
`orientation`	"vertical" \| "horizontal"	"vertical"	Scrollbar axis.
`...props`	Base UI ScrollArea.Scrollbar.Props	—	Custom scrollbar track. Visible while scrolling via data-scrolling.

ScrollAreaThumb#

...props

Base UI ScrollArea.Thumb.Props

Draggable thumb inside a scrollbar.

Prop	Type	Default	Description
`...props`	Base UI ScrollArea.Thumb.Props	—	Draggable thumb inside a scrollbar.

ScrollAreaCorner#

...props

Base UI ScrollArea.Corner.Props

Fills the intersection when both scrollbars are visible.