ArcaneAccordion

Use accordions for compact question-and-answer blocks or progressive disclosure sections where one page should stay scannable.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: accordion

Preview + Code

What is Arcane Jaspr?

▼

A Flutter-like DX for Jaspr with semantic HTML output.

Can I swap themes quickly?

▼

Yes. Switch between Shadcn and Neon with one stylesheet.

Code

ArcaneAccordion(
  items: const [
    ArcaneAccordionItem(
      title: 'What is Arcane Jaspr?',
      content: 'A Flutter-like DX for Jaspr with semantic HTML output.',
      defaultOpen: true,
    ),
    ArcaneAccordionItem(
      title: 'Can I swap themes quickly?',
      content: 'Yes. Switch between Shadcn and Neon with one stylesheet.',
    ),
  ],
)

ArcaneAccordion#

Use accordions for compact question-and-answer blocks or progressive disclosure sections where one page should stay scannable.

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/interactive/accordion.dart

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

ArcaneAccordion

Use accordions for compact question-and-answer blocks or progressive disclosure sections where one page should stay scannable.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: accordion

Preview + Code

What is Arcane Jaspr?



A Flutter-like DX for Jaspr with semantic HTML output.

Can I swap themes quickly?



Yes. Switch between Shadcn and Neon with one stylesheet.

Code

ArcaneAccordion(
  items: const [
    ArcaneAccordionItem(
      title: 'What is Arcane Jaspr?',
      content: 'A Flutter-like DX for Jaspr with semantic HTML output.',
      defaultOpen: true,
    ),
    ArcaneAccordionItem(
      title: 'Can I swap themes quickly?',
      content: 'Yes. Switch between Shadcn and Neon with one stylesheet.',
    ),
  ],
)

ArcaneAccordion#

Use accordions for compact question-and-answer blocks or progressive disclosure sections where one page should stay scannable.

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/interactive/accordion.dart

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

ArcaneAccordion

Use accordions for compact question-and-answer blocks or progressive disclosure sections where one page should stay scannable.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: accordion

Preview + Code

What is Arcane Jaspr?



A Flutter-like DX for Jaspr with semantic HTML output.

Can I swap themes quickly?



Yes. Switch between Shadcn and Neon with one stylesheet.

Code

ArcaneAccordion(
  items: const [
    ArcaneAccordionItem(
      title: 'What is Arcane Jaspr?',
      content: 'A Flutter-like DX for Jaspr with semantic HTML output.',
      defaultOpen: true,
    ),
    ArcaneAccordionItem(
      title: 'Can I swap themes quickly?',
      content: 'Yes. Switch between Shadcn and Neon with one stylesheet.',
    ),
  ],
)

ArcaneAccordion#

Use accordions for compact question-and-answer blocks or progressive disclosure sections where one page should stay scannable.

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/interactive/accordion.dart

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