ScrollArea

Installation#

npmpnpmyarnbun

npx sugarcoat add scroll-area

Examples#

Default#

Default

Horizontal Scrolling#

Horizontal

Both Directions#

Both Directions

List Example#

List

Code Block Example#

Code Block

Anatomy#

<ScrollArea>
  <ScrollArea.Viewport>
    {/* Scrollable content */}
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="vertical">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Scrollbar orientation="horizontal">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner />
</ScrollArea>

Usage#

Import

import { ScrollArea } from "@sugarcoat/ui-nxt";

Usage

<ScrollArea style={{ height: '300px' }}>
<ScrollArea.Viewport>
  {/* Your scrollable content */}
</ScrollArea.Viewport>
<ScrollArea.Scrollbar>
  <ScrollArea.Thumb />
</ScrollArea.Scrollbar>
</ScrollArea>

Props#

ScrollArea (Root)#

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Size of the scrollbar
variant	"default" \| "overlay"	"default"	Scrollbar visibility style
css	SystemStyleObject	-	Additional CSS styles using Panda CSS syntax

ScrollArea.Scrollbar#

Prop	Type	Default	Description
orientation	"vertical" \| "horizontal"	"vertical"	Direction of the scrollbar

Accessibility#

Built on Base UI ScrollArea for robust accessibility
Keyboard scrolling works as expected
Touch scrolling supported on mobile devices
Scrollbars automatically hide when content fits
Screen readers can navigate content normally

Installation#

Examples#

Default#

Horizontal Scrolling#

Both Directions#

List Example#

Code Block Example#

Anatomy#

Usage#

Props#

ScrollArea (Root)#

ScrollArea.Scrollbar#

Accessibility#

Customize Theme