# Components

## MDX element map

`mdxComponents` (from `@liebstoeckel/components`, wired by the engine's `MDXProvider`) maps Markdown to themed elements: `h1` (display serif), `h2` (`text-primary`), `p` (`font-body text-muted`), `ul`/`li` (accent bullets), `strong` (`text-accent`), inline `code` (themed pill), and fenced code (Shiki, brand-bound). Just write Markdown. No imports needed for these.

## Slide components

From `@liebstoeckel/engine` (see [Engine API](https://docs.liebstoeckel.app/reference/engine-api/)):

- `<Step>`: a reveal.
- `<CodeMagic steps title? lang?>`: animated code.
- `<Magic id className?>`: Magic Move, morph *different stateless* elements (same `id`) between slides.
- `<Slot id className?>`: place the *same stateful* element (defined via `persistent`) on a slide; it travels/snaps/fades across slides.
- `<Plugin id props? components?>`: place a live plugin.

## Plugin UI primitives

From `@liebstoeckel/plugin-ui`, used inside plugin client surfaces. They style against `var(--brand-*)` so they're automatically on-brand.

| Component | Props | Use |
| --- | --- | --- |
| `Card` | `style?`, `className?` | translucent surface container |
| `Button` | `onClick?`, `active?`, `disabled?`, `style?` | full-width option/action button |
| `Bar` | `pct`, `color?`, `label`, `value?`, `highlight?` | animatable result bar (0 to 100) |
| `Stack` | `gap?`, `style?` | vertical flex stack |
| `ScrollArea` | `maxHeight?`, `style?`, `className?` | bounded, internally-scrolling region. Cap unbounded plugin content so it doesn't overflow the fixed slide canvas |
| `Eyebrow` | (none) | uppercase mono label |

Also exported: `useTheme()` / `readTheme()` → `ThemeTokens` (resolved brand colors/fonts/`viz` for canvas or SVG use).

```tsx
import { Card, Eyebrow, Bar, Button, Stack } from "@liebstoeckel/plugin-ui";

<Card style={{ width: "100%", maxWidth: 460 }}>
  <Eyebrow>Live poll · 12 votes</Eyebrow>
  <Stack>
    <Bar pct={75} label="Yes" value="9 · 75%" highlight />
    <Bar pct={25} label="No" value="3 · 25%" />
  </Stack>
  <Button active>Vote</Button>
</Card>
```