slidev-components

What problem does it solve?

This skill enables users to embed Vue components directly into Slidev slides, allowing interactive UI elements, reusable components, and richer presentations without leaving Markdown.

Core Features & Use Cases

• Built-in components: use and customize a set of ready-made interactive elements (e.g., Arrow, VDragArrow, AutoFitText, LightOrDark, Link, SlideCurrentNo, SlidesTotal, Toc, Transform, Tweet, Youtube, SlidevVideo) to enhance slides.
• Custom components & patterns: create and reuse Vue components (e.g., Basic Component, Component with Slots, Component with Slidev Context, Code Demo) and embed them in slides for dynamic content.
• Slidev context & interactivity: leverage Slidev composables and components (e.g., useNav, useSlideContext) to build context-aware UI and responsive presentations.
• Use cases: build interactive demos, dashboards, or guided tutorials directly inside Slidev.

Quick Start

Use a simple interactive element on a slide:

• Add a counter: <Counter :start="5" />
• Use built-in components: <Arrow x1="10" y1="20" x2="100" y2="200" />
• Insert a table of contents: <Toc />
• Create and render a custom Card: <Card title="Important" color="blue">Content</Card>