Scroll Area

Stable

Augments native scroll functionality for custom, cross-browser styling.

Examples

Vertical Scrolling

Terminal Log

SYSTEM INITIALIZATION [OK]

LOADING KERNEL MODULES... [OK]

MOUNTING VIRTUAL FILESYSTEM... [OK]

STARTING NETWORK INTERFACES... [OK]

ESTABLISHING SECURE CONNECTION TO NODE ALPHA...

HANDSHAKE SUCCESSFUL.

AUTHENTICATING USER CREDENTIALS...

ACCESS GRANTED.

WELCOME TO SIBER-UI TERMINAL V2.4

TYPE 'help' FOR A LIST OF COMMANDS.

tsx

<ScrollArea className="h-[200px] w-[350px] rounded-md border border-white/10 p-4">
  <div className="text-sm text-slate-300">
    {/* Long content here */}
  </div>
</ScrollArea>

Horizontal Scrolling

Node 1

Node 2

Node 3

Node 4

Node 5

Node 6

tsx

<ScrollArea className="w-96 whitespace-nowrap rounded-md border border-white/10">
  <div className="flex w-max space-x-4 p-4">
    {/* Horizontal items here */}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

API Reference