ScrollArea

Custom scrollable container with styled scrollbars. Wraps bits-ui ScrollArea.

Example

Scrollable item 1

Scrollable item 2

Scrollable item 3

Scrollable item 4

Scrollable item 5

Scrollable item 6

Scrollable item 7

Scrollable item 8

Scrollable item 9

Scrollable item 10

Scrollable item 11

Scrollable item 12

Scrollable item 13

Scrollable item 14

Scrollable item 15

Scrollable item 16

Scrollable item 17

Scrollable item 18

Scrollable item 19

Scrollable item 20

Sub-components

ScrollArea.Root

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes

ScrollArea.Viewport

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes

ScrollArea.Scrollbar

Prop	Type	Default	Description
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Scrollbar direction
`class`	`string`	—	Additional CSS classes

Usage

<script>
  import { ScrollArea } from '@chrissnell/chonky-ui';
</script>

<ScrollArea.Root style="height: 200px;">
  <ScrollArea.Viewport>
    <!-- scrollable content -->
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="vertical" />
</ScrollArea.Root>