Skip to content
Iryx UI

Layout & structure

IScrollArea ​

A scroll container with a thin, themed scrollbar in place of the platform's.

Only the bar is replaced. The viewport still scrolls natively, so wheel, trackpad, keyboard and touch behave as the platform intends.

Line item 1
Line item 2
Line item 3
Line item 4
Line item 5
Line item 6
Line item 7
Line item 8
Line item 9
Line item 10
Line item 11
Line item 12
Line item 13
Line item 14
Line item 15
Line item 16
Line item 17
Line item 18
Line item 19
Line item 20
Line item 21
Line item 22
Line item 23
Line item 24

Give the root a height. A scroll area with nothing constraining it has nothing to scroll.

Compared with IScrollFade ​

IScrollFade keeps the native scrollbar and fades the content edges instead. Use it when a scrollbar would be noise, and IScrollArea when the bar should be part of the design.

When the bars show ​

type decides. hover is the quietest and the default; always is the most discoverable; auto behaves like a native bar, appearing only when there is something to scroll; scroll shows them only while scrolling.

Line item 1
Line item 2
Line item 3
Line item 4
Line item 5
Line item 6
Line item 7
Line item 8
Line item 9
Line item 10
Line item 11
Line item 12
Line item 1
Line item 2
Line item 3
Line item 4
Line item 5
Line item 6
Line item 7
Line item 8
Line item 9
Line item 10
Line item 11
Line item 12

Both axes ​

Line item 1 — with enough text on this line to run past the right-hand edge
Line item 2 — with enough text on this line to run past the right-hand edge
Line item 3 — with enough text on this line to run past the right-hand edge
Line item 4 — with enough text on this line to run past the right-hand edge
Line item 5 — with enough text on this line to run past the right-hand edge
Line item 6 — with enough text on this line to run past the right-hand edge
Line item 7 — with enough text on this line to run past the right-hand edge
Line item 8 — with enough text on this line to run past the right-hand edge
Line item 9 — with enough text on this line to run past the right-hand edge
Line item 10 — with enough text on this line to run past the right-hand edge
Line item 11 — with enough text on this line to run past the right-hand edge
Line item 12 — with enough text on this line to run past the right-hand edge

Props ​

PropTypeDefaultDescription
type'auto' | 'always' | 'scroll' | 'hover''hover'When the bars show
orientation'vertical' | 'horizontal' | 'both''vertical'Which axes get a bar
size'sm' | 'md' | 'lg''md'Bar thickness
scrollHideDelaynumber—How long bars linger, for scroll and hover
unstyledboolean—Skip built-in classes
ui{ root?, viewport?, scrollbar?, thumb?, corner? }—Per-slot class overrides

Accessibility ​

The scrolling is native, so the keyboard scrolls the viewport, the content stays selectable, and a screen reader treats it as an ordinary scrollable region.