ArcaneScrollArea

Use scroll areas when a bounded region should manage overflow without changing the surrounding layout.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: scroll-area

Preview + Code

Row 1 Row 2 Row 3 Row 4 Row 5 Row 6 Row 7

Code

ArcaneScrollArea.vertical(
  height: '150px',
  child: ArcaneBox(
    style: const ArcaneStyleData(
      display: Display.flex,
      flexDirection: FlexDirection.column,
      gap: Gap.sm,
    ),
    children: const [
      Text('Row 1'),
      Text('Row 2'),
      Text('Row 3'),
      Text('Row 4'),
      Text('Row 5'),
      Text('Row 6'),
      Text('Row 7'),
    ],
  ),
)

ArcaneScrollArea#

Use scroll areas when a bounded region should manage overflow without changing the surrounding layout.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/layout/scroll_area.dart

See the Component Catalog for the full exported surface and source mapping.

ArcaneScrollArea

Use scroll areas when a bounded region should manage overflow without changing the surrounding layout.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: scroll-area

Preview + Code

Row 1 Row 2 Row 3 Row 4 Row 5 Row 6 Row 7

Code

ArcaneScrollArea.vertical(
  height: '150px',
  child: ArcaneBox(
    style: const ArcaneStyleData(
      display: Display.flex,
      flexDirection: FlexDirection.column,
      gap: Gap.sm,
    ),
    children: const [
      Text('Row 1'),
      Text('Row 2'),
      Text('Row 3'),
      Text('Row 4'),
      Text('Row 5'),
      Text('Row 6'),
      Text('Row 7'),
    ],
  ),
)

ArcaneScrollArea#

Use scroll areas when a bounded region should manage overflow without changing the surrounding layout.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/layout/scroll_area.dart

See the Component Catalog for the full exported surface and source mapping.

ArcaneScrollArea

Use scroll areas when a bounded region should manage overflow without changing the surrounding layout.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: scroll-area

Preview + Code

Row 1 Row 2 Row 3 Row 4 Row 5 Row 6 Row 7

Code

ArcaneScrollArea.vertical(
  height: '150px',
  child: ArcaneBox(
    style: const ArcaneStyleData(
      display: Display.flex,
      flexDirection: FlexDirection.column,
      gap: Gap.sm,
    ),
    children: const [
      Text('Row 1'),
      Text('Row 2'),
      Text('Row 3'),
      Text('Row 4'),
      Text('Row 5'),
      Text('Row 6'),
      Text('Row 7'),
    ],
  ),
)

ArcaneScrollArea#

Use scroll areas when a bounded region should manage overflow without changing the surrounding layout.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/layout/scroll_area.dart

See the Component Catalog for the full exported surface and source mapping.