A ArcaneJaspr
î…‘

Styling
Preview renderer-owned styling and copy the ArcaneStyleData shape used by the active stylesheet.
 1 min read
 Updated Apr 27, 2026
Live Demo
Component: styling
Preview + Code
Live stylesheet

Renderer-owned styling

Swap stylesheet, palette, or theme without changing this widget.

Code
ArcaneBox(
  style: const ArcaneStyleData(
    padding: PaddingPreset.lg,
    display: Display.flex,
    flexDirection: FlexDirection.column,
    gap: Gap.md,
    background: Background.surface,
    border: BorderPreset.standard,
    borderRadius: Radius.lg,
    shadow: Shadow.md,
  ),
  children: const [
    ArcaneStatusBadge.info('Live stylesheet'),
    Text.heading3('Renderer-owned styling'),
    Text.body('Swap stylesheet, palette, or theme without changing this widget.'),
  ],
)

Styling#

Use this page as the quick visual check for the active stylesheet and palette. The selector in the top bar swaps the renderer package and palette, while the preview below keeps the same neutral Arcane Jaspr code.

What Changes#

ControlEffect
Stylesheet Swaps the concrete renderer package, such as Shadcn, Neon, or Neubrutalism
PaletteSwaps the renderer palette while preserving the same widget API
ThemeSwitches between light and dark theme variables

Copy Pattern#

ArcaneThemeProvider(
  stylesheet: const NeubrutalismStylesheet(
    theme: NeubrutalismTheme.red,
  ),
  child: const ArcaneBox(
    style: ArcaneStyleData(
      padding: PaddingPreset.lg,
      display: Display.flex,
      flexDirection: FlexDirection.column,
      gap: Gap.md,
      background: Background.surface,
      border: BorderPreset.standard,
      borderRadius: Radius.lg,
      shadow: Shadow.md,
    ),
    children: [
      Text.heading3('Renderer-owned styling'),
      Text.body('The active stylesheet owns border, color, spacing, and interaction treatment.'),
    ],
  ),
)