ArcaneDrawer

Use drawers for temporary side panels, navigation overlays, and narrow-screen detail surfaces.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: drawer

Preview + Code

Code

ArcaneBox(
  children: [
    Button.secondary(label: 'Open drawer', onPressed: openDrawer),
    ArcaneDrawer.left(
      isOpen: drawerOpen,
      onClose: closeDrawer,
      header: const Text('Navigation'),
      child: const Text('Drawer content'),
    ),
  ],
)

ArcaneDrawer#

Use drawers for temporary side panels, navigation overlays, and narrow-screen detail surfaces.

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/drawer.dart

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

ArcaneDrawer

Use drawers for temporary side panels, navigation overlays, and narrow-screen detail surfaces.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: drawer

Preview + Code

Code

ArcaneBox(
  children: [
    Button.secondary(label: 'Open drawer', onPressed: openDrawer),
    ArcaneDrawer.left(
      isOpen: drawerOpen,
      onClose: closeDrawer,
      header: const Text('Navigation'),
      child: const Text('Drawer content'),
    ),
  ],
)

ArcaneDrawer#

Use drawers for temporary side panels, navigation overlays, and narrow-screen detail surfaces.

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/drawer.dart

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

ArcaneDrawer

Use drawers for temporary side panels, navigation overlays, and narrow-screen detail surfaces.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: drawer

Preview + Code

Code

ArcaneBox(
  children: [
    Button.secondary(label: 'Open drawer', onPressed: openDrawer),
    ArcaneDrawer.left(
      isOpen: drawerOpen,
      onClose: closeDrawer,
      header: const Text('Navigation'),
      child: const Text('Drawer content'),
    ),
  ],
)

ArcaneDrawer#

Use drawers for temporary side panels, navigation overlays, and narrow-screen detail surfaces.

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/drawer.dart

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