https://framer.com/m/ScrollArea-DzzK.js

Io / UI Basics / ScrollArea

ScrollArea

ScrollArea gives long content its own scroll container and draws the scrollbars itself, so they can follow the theme instead of the operating system. The content below is this system’s own component notes, deliberately taller than the box.

Interactivecustom scrollbars4 visibility modes3 sizes

Examples

Live specimens for every control the component exposes.

Default

Content taller than the box, with the scrollbar appearing on hover.

Io documents sixty-six components.

Twenty-five UI Basics, forty Enhancements.

ThemeLeaderPro sits at the root of every page.

Button, Badge and TextPro carry most of the surface.

TableX, ChartX and ChartX2 are data-driven.

DropdownMenuX, SelectX, TagPicker and SmartFormFields take a schema.

AccordionX collapses sections to their titles.

Scrollbar visibility

type decides when the bars are drawn: always keeps them, hover reveals them on pointer, auto shows them only when the content overflows.

Io documents sixty-six components.

Twenty-five UI Basics, forty Enhancements.

ThemeLeaderPro sits at the root of every page.

Button, Badge and TextPro carry most of the surface.

TableX, ChartX and ChartX2 are data-driven.

DropdownMenuX, SelectX, TagPicker and SmartFormFields take a schema.

AccordionX collapses sections to their titles.

type always

Io documents sixty-six components.

Twenty-five UI Basics, forty Enhancements.

ThemeLeaderPro sits at the root of every page.

Button, Badge and TextPro carry most of the surface.

TableX, ChartX and ChartX2 are data-driven.

DropdownMenuX, SelectX, TagPicker and SmartFormFields take a schema.

AccordionX collapses sections to their titles.

type hover

Axis

scrollbars limits which directions can move. Vertical is the common case; both allows a wide block to move sideways too.

Io documents sixty-six components.

Twenty-five UI Basics, forty Enhancements.

ThemeLeaderPro sits at the root of every page.

Button, Badge and TextPro carry most of the surface.

TableX, ChartX and ChartX2 are data-driven.

DropdownMenuX, SelectX, TagPicker and SmartFormFields take a schema.

AccordionX collapses sections to their titles.

scrollbars vertical

Io documents sixty-six components.

Twenty-five UI Basics, forty Enhancements.

ThemeLeaderPro sits at the root of every page.

Button, Badge and TextPro carry most of the surface.

TableX, ChartX and ChartX2 are data-driven.

DropdownMenuX, SelectX, TagPicker and SmartFormFields take a schema.

AccordionX collapses sections to their titles.

scrollbars both

Size

size steps the scrollbar thickness. Thin reads quieter; thick is easier to grab.

Io documents sixty-six components.

Twenty-five UI Basics, forty Enhancements.

ThemeLeaderPro sits at the root of every page.

Button, Badge and TextPro carry most of the surface.

TableX, ChartX and ChartX2 are data-driven.

DropdownMenuX, SelectX, TagPicker and SmartFormFields take a schema.

size 1

Io documents sixty-six components.

Twenty-five UI Basics, forty Enhancements.

ThemeLeaderPro sits at the root of every page.

Button, Badge and TextPro carry most of the surface.

TableX, ChartX and ChartX2 are data-driven.

DropdownMenuX, SelectX, TagPicker and SmartFormFields take a schema.

size 3

Radius

radius rounds the container, thumbRadius the bar itself. Square bars read more mechanical.

Io documents sixty-six components.

Twenty-five UI Basics, forty Enhancements.

ThemeLeaderPro sits at the root of every page.

Button, Badge and TextPro carry most of the surface.

TableX, ChartX and ChartX2 are data-driven.

DropdownMenuX, SelectX, TagPicker and SmartFormFields take a schema.

radius 0 · thumbRadius 0

Io documents sixty-six components.

Twenty-five UI Basics, forty Enhancements.

ThemeLeaderPro sits at the root of every page.

Button, Badge and TextPro carry most of the surface.

TableX, ChartX and ChartX2 are data-driven.

DropdownMenuX, SelectX, TagPicker and SmartFormFields take a schema.

radius 12 · thumbRadius 8

Props

The controls exposed on the instance panel.

PropTypeBehaviour
contentslotThe content that scrolls.
typeenumauto · always · scroll · hover — when the scrollbars are visible.
scrollbarsenumboth · vertical · horizontal — which axes can scroll.
sizeenum1 · 2 · 3 — thickness of the scrollbar.
radiusnumberCorner radius of the scroll container.
thumbRadiusnumberCorner radius of the scrollbar thumb.
trackBGcolorScrollbar track fill.
trackHovercolorTrack fill while hovered.
thumbBGcolorThumb fill.
thumbHovercolorThumb fill while hovered.
cornerBGcolorFill of the corner where two scrollbars meet.
enableContentInteractionbooleanTurns on the content interaction hook.
contentInteractionobjectHow the content reacts when it appears.
PropTypeBehaviour
contentslotThe content that scrolls.
typeenumauto · always · scroll · hover — when the scrollbars are visible.
scrollbarsenumboth · vertical · horizontal — which axes can scroll.
sizeenum1 · 2 · 3 — thickness of the scrollbar.
radiusnumberCorner radius of the scroll container.
thumbRadiusnumberCorner radius of the scrollbar thumb.
trackBGcolorScrollbar track fill.
trackHovercolorTrack fill while hovered.
thumbBGcolorThumb fill.
thumbHovercolorThumb fill while hovered.
cornerBGcolorFill of the corner where two scrollbars meet.
enableContentInteractionbooleanTurns on the content interaction hook.
contentInteractionobjectHow the content reacts when it appears.

Usage

Guidance carried over from the component definition.

Reach for ScrollArea

Long content should scroll inside the layout, not move the page.

The scrollbars need to match the theme rather than the OS.

Only one axis should be scrollable.

The bars should stay hidden until the pointer arrives.

Reach for something else

The native scrollbar is fine and needs no styling.

The content should have no scrollbars at all.

The whole page is what scrolls.

Io — UI Basics

Every box above is a live ScrollArea instance over the same block of notes. Colour, type and radius resolve from the project theme tokens.

io

An experiment in what a design system becomes when AI can consume it.

© 2026 io

Contact me

Create a free website with Framer, the website builder loved by startups, designers and agencies.