Scroll Area

A scrollable region with consistent scrollbars, for code, side panels and long lists.

Release 0.20: security fixes and new components.
Release 0.19: security fixes and new components.
Release 0.18: security fixes and new components.
Release 0.17: security fixes and new components.
Release 0.16: security fixes and new components.
Release 0.15: security fixes and new components.
Release 0.14: security fixes and new components.
Release 0.13: security fixes and new components.
Release 0.12: security fixes and new components.
Release 0.11: security fixes and new components.
Release 0.10: security fixes and new components.
Release 0.9: security fixes and new components.
Release 0.8: security fixes and new components.
Release 0.7: security fixes and new components.
Release 0.6: security fixes and new components.
Release 0.5: security fixes and new components.
Release 0.4: security fixes and new components.
Release 0.3: security fixes and new components.
Release 0.2: security fixes and new components.
Release 0.1: security fixes and new components.

Installation

Once per app, set up Aedis UI. The CLI verifies the signed release before writing anything and pins every dependency:

npx @aedis/cli@0.1.0 init

Import the theme once in your global CSS, after Tailwind:

app/globals.css

@import "tailwindcss";@import "./styles/aedis-theme.css";

Then add the component:

npx @aedis/cli@0.1.0 add scroll-area# pnpm dlx @aedis/cli@0.1.0 add scroll-area · yarn dlx @aedis/cli@0.1.0 add scroll-area · bunx @aedis/cli@0.1.0 add scroll-area

Props

Prop	Type	Default	Description
aria-label	string	—	Names the region; the viewport is focusable when it overflows so the keyboard can scroll it.
...props	@base-ui/react ScrollArea props	—	Every prop of the underlying Base UI part, including render for composition.

Security

Scrolling stays native: wheel, touch, keyboard and in-page search work as usual.