Slidev Antd Dashboard

Slidev + Ant Design Dashboards

Build polished dashboard / admin-console mockups inside Slidev slides using ant-design-vue.

Read this first (critical context)

1. Slidev is Vue 3. Use ant-design-vue, NOT React antd. The canonical antd package is React-only and cannot be dropped into Slidev. ant-design-vue is the official Ant Design implementation for Vue 3 — same design language, same component set, near-identical API. Every example here uses it.
2. Globally-registered components use the a- prefix. After app.use(Antd), you write , , , , , etc. — not .
3. ant-design-vue v4 uses CSS-in-JS. Component styles auto-inject; you do not need (and should avoid) globally importing ant-design-vue/dist/reset.css, because its global preflight overrides Slidev's slide typography. Theme via `` instead.
4. Ant Design ships no charts. Use ECharts (vue-echarts) — see setup.md. @ant-design/charts is React-only; do not suggest it for Slidev.
5. A slide is a fixed canvas (default 980×552 px). Real dashboards are designed for ~1440 px. Render at desktop density and let Slidev scale the slide down — set canvasWidth higher and/or use componentSize. See dashboard-rules.md.

Quickstart

# in a Slidev project (npm init slidev@latest)
npm i ant-design-vue@^4.2.6 @ant-design/icons-vue
npm i echarts vue-echarts          # charts (recommended)

1. Copy assets/main.ts → setup/main.ts (registers antd, all icons, and `` globally).
2. Copy assets/AntdThemeProvider.vue.md → components/AntdThemeProvider.vue.md (ConfigProvider + dark-mode sync + sane tokens).
3. In slides.md headmatter, bump the canvas so dashboards aren't cramped:

   ---
   canvasWidth: 1280
   ---
   

4. Wrap any dashboard slide content in `` and use a full layout. Paste an example from examples/ to start.

Full, annotated instructions: references/setup.md.

The 5 golden rules (details in dashboard-rules.md)

1. One Layout shell per dashboard: a-layout → a-layout-sider (nav) + a-layout-header (top bar) + a-layout-content (work area). Don't hand-roll flexbox for the frame.
2. Everything sits on the 24-column grid (a-row/a-col with :gutter). KPI cards = 4–6 across; never free-position.
3. 8 px spacing rhythm — gutters and margins in multiples of 8 (8/16/24). Use a-space instead of margin hacks.
4. Color is semantic, not decorative — primary for the one main action per view; green/red/gold via a-tag/a-badge/Statistic only to encode meaning. ≤1 primary button per region.
5. Show structure, not lorem — realistic labels and numbers; use a-skeleton/a-empty for loading/empty states in mockups.

What's in this skill

Workflow when asked to "make a dashboard slide"

1. Confirm the project is a Slidev project and the setup in setup.md is in place (or add it).
2. Pick the closest example in examples/ as a skeleton.
3. Choose the navigation pattern from navigation.md (sider menu is the default for admin dashboards).
4. Lay out content on the grid per dashboard-rules.md; pick components from components.md.
5. Wrap in ``, set the slide layout: full, verify it fits the canvas (npm run dev).