ScrollArea

Vertical scroll

Audit workstream tags

Control objectives

Risk appetite

Audit universe

Control testing

Remediation tracking

Policy management

Compliance calendar

Evidence collection

Issue management

Board reporting

Regulatory mapping

Third-party risk

import { ScrollArea } from '@eekodigital/raster';

<ScrollArea.Root style={{ height: '12rem', width: '22rem' }}>
  <ScrollArea.Viewport>
    {items.map(item => <div key={item}>{item}</div>)}
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="vertical" />
  <ScrollArea.Corner />
</ScrollArea.Root>

Horizontal scroll

Workstream tags

Control objectives

Risk appetite

Audit universe

Control testing

Remediation tracking

Policy management

Compliance calendar

Evidence collection

Issue management

Board reporting

Regulatory mapping

Third-party risk

<ScrollArea.Root style={{ width: '22rem' }}>
  <ScrollArea.Viewport>
    <div style={{ display: 'flex', gap: '0.75rem', width: 'max-content' }}>
      {items.map(item => <div key={item}>{item}</div>)}
    </div>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="horizontal" />
</ScrollArea.Root>

Props

Root

Prop	Type	Default	Description
type	”auto” | “always” | “scroll” | “hover"	"hover”	When scrollbars are shown.
scrollHideDelay	number	—	Milliseconds before scrollbars hide (for auto/scroll types).
style	CSSProperties	—	Inline styles — use to set width/height constraints.
className	string	—	Additional CSS classes.

Scrollbar

Prop	Type	Default	Description
orientation	”vertical” | “horizontal"	"vertical”	Scrollbar axis.