ArcaneSonner

Use sonner surfaces for toast stacks and transient notifications.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: sonner

Preview + Code

Code

ArcaneBox(
  style: const ArcaneStyleData(
    display: Display.flex,
    flexDirection: FlexDirection.column,
    gap: Gap.sm,
  ),
  children: [
    const ArcaneSonner(position: ToastPosition.topRight),
    Button.secondary(
      label: 'Show toast',
      onPressed: () {
        ArcaneSonner.success(
          'Sonner-compatible toast stack',
          title: 'Notification',
        );
      },
    ),
  ],
)

ArcaneSonner#

Use sonner surfaces for toast stacks and transient notifications.

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

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

ArcaneSonner

Use sonner surfaces for toast stacks and transient notifications.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: sonner

Preview + Code

Code

ArcaneBox(
  style: const ArcaneStyleData(
    display: Display.flex,
    flexDirection: FlexDirection.column,
    gap: Gap.sm,
  ),
  children: [
    const ArcaneSonner(position: ToastPosition.topRight),
    Button.secondary(
      label: 'Show toast',
      onPressed: () {
        ArcaneSonner.success(
          'Sonner-compatible toast stack',
          title: 'Notification',
        );
      },
    ),
  ],
)

ArcaneSonner#

Use sonner surfaces for toast stacks and transient notifications.

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

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

ArcaneSonner

Use sonner surfaces for toast stacks and transient notifications.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: sonner

Preview + Code

Code

ArcaneBox(
  style: const ArcaneStyleData(
    display: Display.flex,
    flexDirection: FlexDirection.column,
    gap: Gap.sm,
  ),
  children: [
    const ArcaneSonner(position: ToastPosition.topRight),
    Button.secondary(
      label: 'Show toast',
      onPressed: () {
        ArcaneSonner.success(
          'Sonner-compatible toast stack',
          title: 'Notification',
        );
      },
    ),
  ],
)

ArcaneSonner#

Use sonner surfaces for toast stacks and transient notifications.

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

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