EEnterUI
DocsComponentsThemesDonation
Get Started
      • ScrollArea
      • AspectRatio
      • Media
      • VirtualList
EnterUIDocsLayout UtilitiesLayout PrimitivesMedia and ScrollScrollArea
Layout UtilitiesUpdated 6 May 2026

ScrollArea

A native scroll container with subtle EnterUI scrollbar styling.

ScrollArea defines how EnterUI handles a native scroll container with subtle enterui scrollbar styling, including default structure, accessible states, and token-driven styling.

#Default usage

Scroll area

Use native overflow for reliable browser behavior.

Release note

Button states refined.

Input hover polished.

Docs navigation tightened.

Dark mode contrast reviewed.

Component previews optimized.

Code
<ScrollArea style={{ maxHeight: 160 }}>
  <div className="docs-preview-stack">
    <Badge>Release note</Badge>
    <p className="docs-preview-muted">Button states refined.</p>
    <p className="docs-preview-muted">Input hover polished.</p>
    <p className="docs-preview-muted">Docs navigation tightened.</p>
    <p className="docs-preview-muted">Dark mode contrast reviewed.</p>
    <p className="docs-preview-muted">Component previews optimized.</p>
  </div>
</ScrollArea>

#Import

Code
import { ScrollArea } from "@froggdesign/enter-ui-react";

#Accessibility

ScrollArea is a native div with overflow. Add tabIndex={0} only when keyboard users need to focus the region directly.

#API

  • orientation: vertical, horizontal, or both.
  • Accepts native div props, style, and className.

#Styling

Uses .eui-scroll-area classes and native scrollbar styling.

PreviousLazyHGrid
NextAspectRatio

On this page

  1. Default usage
  2. Import
  3. Accessibility
  4. API
  5. Styling