Advanced

UI Providers.

Aktion can render through external design systems without changing your DSL logic. A UI Provider maps Aktion components to another library (Material UI, Bootstrap, ShadCN, in-house kits) while Aktion still owns state, effects, and data flow.

Using a provider (CDN only)

Load providers directly from a CDN and apply them to an <aktion-app>. No npm install is required for this wiring path. 

<script type="module" src="https://cdn.jsdelivr.net/npm/aktion-runtime/dist/aktion.js"></script>
<script type="module">
  const { muiProvider } = await import("https://cdn.jsdelivr.net/npm/@aktion/mui-provider/dist/index.js")
  document.querySelector("aktion-app").setUIProvider(muiProvider)
</script>

Provider output previews

One Aktion code, three outputs. Each preview uses the target stack's real CDN runtime/CSS, with generated HTML/JSX shown underneath. 

$app(Card([
  CardHeader("Revenue dashboard"),
  Text("Mapped through a UI provider."),
  Row([
    Button("Primary", { variant: "primary" }),
    Button("Secondary", { variant: "ghost" })
  ], { gap: "sm" })
], { tone: "default" }))
Material UI @aktion/mui-provider 
{/* Generated JSX (MUI) */}
<Card>
  <CardHeader title="Revenue dashboard" />
  <CardContent>
    <Typography>Mapped through a UI provider.</Typography>
  </CardContent>
  <CardActions>
    <Button variant="contained">Primary</Button>
    <Button variant="text">Secondary</Button>
  </CardActions>
</Card>
Bootstrap @aktion/bootstrap-provider 
{/* Generated HTML (Bootstrap) */}
<div class="card">
  <div class="card-header">Revenue dashboard</div>
  <div class="card-body">
    <p class="card-text">Mapped through a UI provider.</p>
    <button class="btn btn-primary btn-sm">Primary</button>
    <button class="btn btn-outline-secondary btn-sm">Secondary</button>
  </div>
</div>
ShadCN @aktion/shadcn-provider 
{/* Generated JSX (ShadCN primitives) */}
<Card>
  <CardHeader>
    <CardTitle>Revenue dashboard</CardTitle>
    <CardDescription>Mapped through a UI provider.</CardDescription>
  </CardHeader>
  <CardFooter>
    <Button>Primary</Button>
    <Button variant="outline">Secondary</Button>
  </CardFooter>
</Card>
Getting started

Migration to Aktion

Keep your current architecture and move app logic to Aktion incrementally.

Open migration guide → Advanced

Third-party widgets

Use Mount(), WebComponent(), $script(), and $dom for imperative embeds.

Open interop guide → Reference

Custom components

Learn ComponentSpec details and render-helper APIs used in provider adapters.

Read API details →