Files
Panama/user/agents/skills/slidev/references/core-components.md
T
Gabriel Brown 89761a7da3 Keep the personal half of the desktop in one place, and ask before installing it
Agent instructions, skills, SSH host aliases and expansion triggers are worth
having identical on every machine one person owns, and belong in none of the
shared configuration. They live in user/ now, with a manifest saying where each
piece goes and a link-user stage that puts it there.

That stage does nothing unless the machine said yes. Somebody who clones Panama
to try the desktop keeps their own ~/.claude/CLAUDE.md exactly where it was;
the question names the destinations and defaults to no. Anything displaced goes
to config/old rather than being deleted.

~/.claude/CLAUDE.md and ~/.codex/AGENTS.md were byte-identical copies of one
file, which is the drift this exists to prevent.

Also adds the vitals toggles for the battery and Claude usage readouts, which
had preferences and no way to reach them.
2026-08-22 08:54:43 -04: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.