ワンクリックで
slidev-layouts
// Use built-in and custom Slidev layouts effectively. Use this skill to structure slides with cover, two-cols, image layouts and more.
// Use built-in and custom Slidev layouts effectively. Use this skill to structure slides with cover, two-cols, image layouts and more.
Master v-click and sequential animations in Slidev. Use this skill to reveal content progressively and create engaging presentations.
Add smooth slide transitions in Slidev. Use this skill for fade, slide, and custom transitions between slides.
Create beautiful code blocks with Shiki syntax highlighting. Use this skill for code snippets, line highlighting, and code groups.
Animate code transformations with Shiki Magic Move. Use this skill to create smooth morphing transitions between code states.
Add live coding with Monaco Editor in Slidev. Use this skill for interactive code demos, executable code, and real-time editing.
Leverage Vue components in Slidev slides. Use this skill to add interactivity with built-in components or create custom ones.
| name | slidev-layouts |
| description | Use built-in and custom Slidev layouts effectively. Use this skill to structure slides with cover, two-cols, image layouts and more. |
This skill covers all built-in Slidev layouts and teaches you how to use them effectively for different types of content. You'll also learn how to create custom layouts.
Specify a layout in the slide's frontmatter:
---
layout: center
---
# Centered Content
The basic layout for general content.
---
layout: default
---
# Default Layout
Any content works here:
- Lists
- Code blocks
- Images
- Tables
Centers content both horizontally and vertically.
---
layout: center
---
# Big Statement
Perfect for impactful single messages
Best for: Quotes, key takeaways, section titles
The opening slide with prominent title display.
---
layout: cover
background: /images/cover.jpg
---
# Presentation Title
Subtitle or author name
Options:
background: Image URL or colorBest for: First slide, section openers
Introduction slide with author/presenter info.
---
layout: intro
---
# My Presentation
## A Journey Through Code
<div class="absolute bottom-10">
<span class="font-700">
John Doe
</span>
<br>
<span class="text-sm opacity-50">
Senior Developer @ TechCorp
</span>
</div>
Marks the beginning of a new section.
---
layout: section
---
# Part 1
Getting Started
Best for: Dividing presentation into logical sections
Emphasizes a single statement or quote.
---
layout: statement
---
# Code is poetry
Best for: Powerful quotes, key messages
Displays a quotation with attribution.
---
layout: quote
---
# "Any fool can write code that a computer can understand. Good programmers write code that humans can understand."
Martin Fowler
Highlights important facts or statistics.
---
layout: fact
---
# 100%
of developers love Slidev*
<small>*citation needed</small>
Best for: Statistics, numbers, key facts
Two-column layout with left/right content.
---
layout: two-cols
---
# Left Column
- Point 1
- Point 2
- Point 3
::right::
# Right Column
```js
const code = 'here'
**Slot**: `::right::` separates columns
### two-cols-header
Two columns with a spanning header.
```markdown
---
layout: two-cols-header
---
# Comparison
::left::
## Option A
- Feature 1
- Feature 2
::right::
## Option B
- Feature X
- Feature Y
Slots: ::left:: and ::right::
Full-slide background image.
---
layout: image
image: /images/photo.jpg
backgroundSize: cover
---
Options:
image: Image pathbackgroundSize: CSS background-size (cover, contain, etc.)Image on left, content on right.
---
layout: image-left
image: /images/diagram.png
backgroundSize: contain
---
# Explanation
The diagram shows:
- Component A
- Component B
- Their relationship
Image on right, content on left.
---
layout: image-right
image: /images/screenshot.png
---
# Feature Overview
Our new feature includes:
- Fast performance
- Easy to use
- Beautiful design
Embeds a webpage.
---
layout: iframe
url: https://sli.dev
---
Options:
url: URL to embedIframe with content on the opposite side.
---
layout: iframe-right
url: https://example.com
---
# Live Demo
Check out the live example on the right
Uses the entire screen without padding.
---
layout: full
---
<div class="w-full h-full bg-gradient-to-r from-blue-500 to-purple-600">
<h1 class="text-white text-center pt-40">Full Screen</h1>
</div>
No styling applied - complete blank slate.
---
layout: none
---
<div class="custom-everything">
Completely custom content
</div>
Final slide of the presentation.
---
layout: end
---
# Thank You!
Questions?
| Layout | Use Case |
|---|---|
default | General content |
center | Single focused message |
cover | Opening slide |
intro | Author introduction |
section | Section divider |
statement | Bold statement |
quote | Quotations |
fact | Statistics/numbers |
two-cols | Side-by-side content |
two-cols-header | Comparison with header |
image | Full background image |
image-left | Image + text |
image-right | Text + image |
iframe | Embedded webpage |
full | Edge-to-edge content |
end | Closing slide |
Create layouts/my-layout.vue:
<template>
<div class="slidev-layout my-layout">
<slot />
</div>
</template>
<style scoped>
.my-layout {
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
</style>
<!-- layouts/split-header.vue -->
<template>
<div class="slidev-layout split-header">
<header class="header">
<slot name="header" />
</header>
<main class="content">
<div class="left">
<slot name="left" />
</div>
<div class="right">
<slot name="right" />
</div>
</main>
</div>
</template>
<style scoped>
.split-header {
display: grid;
grid-template-rows: auto 1fr;
height: 100%;
}
.header {
padding: 1rem 2rem;
border-bottom: 1px solid #e5e7eb;
}
.content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
padding: 2rem;
}
</style>
Usage:
---
layout: split-header
---
::header::
# Comparison Overview
::left::
## Before
Old approach details
::right::
## After
New approach details
<!-- layouts/branded.vue -->
<script setup>
defineProps({
logo: {
type: String,
default: '/logo.png'
},
color: {
type: String,
default: '#3b82f6'
}
})
</script>
<template>
<div class="slidev-layout branded">
<img :src="logo" class="logo" />
<div class="content" :style="{ borderColor: color }">
<slot />
</div>
</div>
</template>
Usage:
---
layout: branded
logo: /company-logo.png
color: '#ef4444'
---
# Branded Content
Themes often provide additional layouts. For example, the seriph theme includes variations like:
default with refined typographycover with elegant stylingCheck theme documentation for available layouts.
center for emphasis, two-cols for comparisonssection layout consistentlycover and image layouts---
layout: cover
---
# Title
---
layout: intro
---
# About Me
---
layout: section
---
# Part 1
---
layout: default
---
# Content...
---
layout: section
---
# Part 2
---
layout: end
---
# Thank You
---
layout: two-cols-header
---
# React vs Vue
::left::
## React
- JSX syntax
- Large ecosystem
- Facebook backing
::right::
## Vue
- Template syntax
- Gentle learning curve
- Community driven
When recommending layouts, provide:
SLIDE STRUCTURE:
1. [layout: cover] - Opening with title
2. [layout: intro] - Speaker introduction
3. [layout: section] - Topic 1 header
4. [layout: default/two-cols] - Content slides
5. [layout: section] - Topic 2 header
6. [layout: image-right] - Demo/screenshot
7. [layout: fact] - Key statistic
8. [layout: end] - Closing
LAYOUT RECOMMENDATION:
- For this content type, use [layout]
- Reason: [explanation]
EXAMPLE:
---
layout: [recommended]
[additional options if needed]
---
[Content structure]