ArcaneDialog

Use dialogs for contained tasks that need title, body content, and action buttons.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: dialog

Preview + Code

Code

ArcaneBox(
  children: [
    Button.primary(label: 'Open dialog', onPressed: openDialog),
    if (dialogOpen)
      ArcaneDialog(
        title: 'Confirm Settings',
        onClose: closeDialog,
        child: const Text('Apply changes to your current workspace?'),
        actions: [
          Button.secondary(label: 'Cancel', onPressed: closeDialog),
          Button.primary(label: 'Apply', onPressed: closeDialog),
        ],
      ),
  ],
)

ArcaneDialog#

Use dialogs for contained tasks that need title, body content, and action buttons.

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

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

ArcaneDialog

Use dialogs for contained tasks that need title, body content, and action buttons.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: dialog

Preview + Code

Code

ArcaneBox(
  children: [
    Button.primary(label: 'Open dialog', onPressed: openDialog),
    if (dialogOpen)
      ArcaneDialog(
        title: 'Confirm Settings',
        onClose: closeDialog,
        child: const Text('Apply changes to your current workspace?'),
        actions: [
          Button.secondary(label: 'Cancel', onPressed: closeDialog),
          Button.primary(label: 'Apply', onPressed: closeDialog),
        ],
      ),
  ],
)

ArcaneDialog#

Use dialogs for contained tasks that need title, body content, and action buttons.

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

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

ArcaneDialog

Use dialogs for contained tasks that need title, body content, and action buttons.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: dialog

Preview + Code

Code

ArcaneBox(
  children: [
    Button.primary(label: 'Open dialog', onPressed: openDialog),
    if (dialogOpen)
      ArcaneDialog(
        title: 'Confirm Settings',
        onClose: closeDialog,
        child: const Text('Apply changes to your current workspace?'),
        actions: [
          Button.secondary(label: 'Cancel', onPressed: closeDialog),
          Button.primary(label: 'Apply', onPressed: closeDialog),
        ],
      ),
  ],
)

ArcaneDialog#

Use dialogs for contained tasks that need title, body content, and action buttons.

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

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