Files
agent-skills/skills/slidev/references/core-components.md
Jason Woltje f5792c40be feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories:
- anthropics/skills: 16 (docs, design, MCP, testing)
- obra/superpowers: 14 (TDD, debugging, agents, planning)
- coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth)
- better-auth/skills: 5 (auth patterns)
- vercel-labs/agent-skills: 5 (React, design, Vercel)
- antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo)
- Plus 13 individual skills from various repos

Mosaic Stack is not limited to coding — the Orchestrator and
subagents serve coding, business, design, marketing, writing,
logistics, analysis, and more.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-16 16:27:42 -06:00

2.7 KiB

name, description
name description
components Ready-to-use components in Slidev

Built-in Components

Ready-to-use components in Slidev.

Navigation

Navigate to slide:

<Link to="5">Go to slide 5</Link>
<Link to="intro">Go to intro</Link>  <!-- with routeAlias -->

SlideCurrentNo / SlidesTotal

Slide <SlideCurrentNo /> of <SlidesTotal />

Toc (Table of Contents)

<Toc />
<Toc maxDepth="2" />
<Toc columns="2" />

Props:

  • columns - Number of columns
  • maxDepth / minDepth - Heading depth filter
  • mode - 'all' | 'onlyCurrentTree' | 'onlySiblings'

TitleRenderer

Render slide title:

<TitleRenderer no="3" />

Animations

VClick / VClicks

<VClick>Shows on click</VClick>

<VClicks>

- Item 1
- Item 2

</VClicks>

VAfter

<VClick>First</VClick>
<VAfter>Shows with first</VAfter>

VSwitch

<VSwitch>
  <template #1>State 1</template>
  <template #2>State 2</template>
</VSwitch>

Drawing

Arrow

<Arrow x1="10" y1="10" x2="100" y2="100" />
<Arrow x1="10" y1="10" x2="100" y2="100" two-way />

Props: x1, y1, x2, y2, width, color, two-way

VDragArrow

Draggable arrow:

<VDragArrow />

Layout

Transform

Scale elements:

<Transform :scale="0.5">
  <LargeContent />
</Transform>

Props: scale, origin

AutoFitText

Auto-sizing text:

<AutoFitText :max="200" :min="50" modelValue="Hello" />

Media

SlidevVideo

<SlidevVideo v-click autoplay controls>
  <source src="/video.mp4" type="video/mp4" />
</SlidevVideo>

Props: controls, autoplay, autoreset, poster, timestamp

Youtube

<Youtube id="dQw4w9WgXcQ" />
<Youtube id="dQw4w9WgXcQ" width="600" height="400" />

Tweet

<Tweet id="1423789844234231808" />
<Tweet id="1423789844234231808" :scale="0.8" />

Conditional

LightOrDark

<LightOrDark>
  <template #dark>Dark mode content</template>
  <template #light>Light mode content</template>
</LightOrDark>

RenderWhen

<RenderWhen context="presenter">
  Only in presenter mode
</RenderWhen>

Context values:

  • main - Main presentation view
  • visible - Visible slides
  • print - Print/export mode
  • slide - Normal slide view
  • overview - Overview mode
  • presenter - Presenter mode
  • previewNext - Next slide preview

Branding

PoweredBySlidev

<PoweredBySlidev />

Draggable

VDrag

<VDrag pos="myElement">
  Draggable content
</VDrag>

See draggable for details.

Component Auto-Import

Components from these sources are auto-imported:

  1. Built-in components
  2. Theme components
  3. Addon components
  4. ./components/ directory

No import statements needed.