| 1 | # Components |
| 2 | |
| 3 | This page lists all the built-in components provided by Slidev. These components can be **directly** used in your slides. |
| 4 | |
| 5 | Note that <LinkInline link="guide/theme-addon" /> can provide additional components. To add your own components, see <LinkInline link="guide/component#write" />. |
| 6 | |
| 7 | ## `Arrow` |
| 8 | |
| 9 | Draw an arrow. |
| 10 | |
| 11 | ### Usage |
| 12 | |
| 13 | ```md |
| 14 | <Arrow x1="10" y1="20" x2="100" y2="200" /> |
| 15 | ``` |
| 16 | |
| 17 | Or: |
| 18 | |
| 19 | ```md |
| 20 | <Arrow v-bind="{ x1:10, y1:10, x2:200, y2:200 }" /> |
| 21 | ``` |
| 22 | |
| 23 | Props: |
| 24 | |
| 25 | - `x1` (`string | number`, required): start point x position |
| 26 | - `y1` (`string | number`, required): start point y position |
| 27 | - `x2` (`string | number`, required): end point x position |
| 28 | - `y2` (`string | number`, required): end point y position |
| 29 | - `width` (`string | number`, default: `2`): line width |
| 30 | - `color` (`string`, default: `'currentColor'`): line color |
| 31 | - `two-way` (`boolean`, default: `false`): draw a two-way arrow |
| 32 | |
| 33 | ## `VDragArrow` |
| 34 | |
| 35 | An `Arrow` component that can be dragged. |
| 36 | |
| 37 | ### Usage |
| 38 | |
| 39 | <LinkCard link="features/draggable#draggable-arrow" /> |
| 40 | |
| 41 | Props not related to position are the same as [the `Arrow` component](#arrow). |
| 42 | |
| 43 | ## `AutoFitText` |
| 44 | |
| 45 | Box inside which the font size will automatically adapt to fit the content, powered by [fitty](https://github.com/rikschennink/fitty). Similar to PowerPoint or Keynote TextBox. |
| 46 | |
| 47 | ### Usage |
| 48 | |
| 49 | ```md |
| 50 | <AutoFitText :max="200" :min="100" modelValue="Some text"/> |
| 51 | ``` |
| 52 | |
| 53 | Props: |
| 54 | |
| 55 | - `max` (`number`, default `100`): Maximum font size in pixels |
| 56 | - `min` (`number`, default `30`): Minimum font size in pixels |
| 57 | - `modelValue` (`string`, default `''`): Text content (alternatively, use the default slot) |
| 58 | - `multiLine` (`boolean`, default `true`): Allow the text to wrap when the minimum font size is reached |
| 59 | |
| 60 | ## `LightOrDark` |
| 61 | |
| 62 | Use it to display one thing or another depending on the active light or dark theme. |
| 63 | |
| 64 | ### Usage |
| 65 | |
| 66 | Use it with the two named Slots `#dark` and `#light`: |
| 67 | |
| 68 | ```md |
| 69 | <LightOrDark> |
| 70 | <template #dark>Dark mode is on</template> |
| 71 | <template #light>Light mode is on</template> |
| 72 | </LightOrDark> |
| 73 | ``` |
| 74 | |
| 75 | Provided props on `LightOrDark` component will be available using scoped slot props: |
| 76 | |
| 77 | ```md |
| 78 | <LightOrDark width="100" alt="some image"> |
| 79 | <template #dark="props"> |
| 80 | <img src="/dark.png" v-bind="props"/> |
| 81 | </template> |
| 82 | <template #light="props"> |
| 83 | <img src="/light.png" v-bind="props"/> |
| 84 | </template> |
| 85 | </LightOrDark> |
| 86 | ``` |
| 87 | |
| 88 | You can provide markdown in the slots, but you will need to surround the content with blank lines: |
| 89 | |
| 90 | ```md |
| 91 | <LightOrDark> |
| 92 | <template #dark> |
| 93 | |
| 94 |  |
| 95 | |
| 96 | </template> |
| 97 | <template #light> |
| 98 | |
| 99 |  |
| 100 | |
| 101 | </template> |
| 102 | </LightOrDark> |
| 103 | ``` |
| 104 | |
| 105 | ## `Link` |
| 106 | |
| 107 | Insert a link you can use to navigate to a given slide. |
| 108 | |
| 109 | ### Usage |
| 110 | |
| 111 | ```md |
| 112 | <Link to="42">Go to slide 42</Link> |
| 113 | <Link to="42" title="Go to slide 42"/> |
| 114 | <Link to="solutions" title="Go to solutions"/> |
| 115 | ``` |
| 116 | |
| 117 | Props: |
| 118 | |
| 119 | - `to` (`string | number`): The path of the slide to navigate to (slides path starts from `1`) |
| 120 | - `title` (`string`): The title to display |
| 121 | |
| 122 | One can use a string as `to`, provided the corresponding route exists, e.g. |
| 123 | |
| 124 | ```md |
| 125 | --- |
| 126 | routeAlias: solutions |
| 127 | --- |
| 128 | |
| 129 | # Now some solutions! |
| 130 | ``` |
| 131 | |
| 132 | ## `PoweredBySlidev` |
| 133 | |
| 134 | Renders "Powered by Slidev" with a link to the Slidev website. |
| 135 | |
| 136 | ## `RenderWhen` |
| 137 | |
| 138 | Render slots depend on whether the context matches (for example whether we are in presenter view). |
| 139 | |
| 140 | ### Usage |
| 141 | |
| 142 | ```md |
| 143 | <RenderWhen context="presenter">This will only be rendered in presenter view.</RenderWhen> |
| 144 | ``` |
| 145 | |
| 146 | Context type: `'main' | 'visible' | 'print' | 'slide' | 'overview' | 'presenter' | 'previewNext'` |
| 147 | |
| 148 | Props: |
| 149 | |
| 150 | - `context` (`Context | Context[]`): a context or array of contexts you want to check for |
| 151 | - `'main'`: Render in slides and presenter view (equivalent to ['slide', 'presenter']), |
| 152 | - `'visible'`: Render the content if it is visible |
| 153 | - `'print'`: Render in print mode |
| 154 | - `'slide'`: Render in slides |
| 155 | - `'overview'`: Render in overview |
| 156 | - `'presenter'`: Render in presenter view |
| 157 | - `'previewNext'`: Render in presenter's next slide view |
| 158 | |
| 159 | Slots: |
| 160 | |
| 161 | - `#default`: Rendered when the context matches |
| 162 | - `#fallback`: Rendered when the context does not match |
| 163 | |
| 164 | ## `SlideCurrentNo` |
| 165 | |
| 166 | Current slide number. |
| 167 | |
| 168 | ### Usage |
| 169 | |
| 170 | ```md |
| 171 | <SlideCurrentNo /> |
| 172 | ``` |
| 173 | |
| 174 | ## `SlidesTotal` |
| 175 | |
| 176 | Total number of slides. |
| 177 | |
| 178 | ### Usage |
| 179 | |
| 180 | ```md |
| 181 | <SlidesTotal /> |
| 182 | ``` |
| 183 | |
| 184 | ## `TitleRenderer` |
| 185 | |
| 186 | Insert the main title from a slide parsed as HTML. |
| 187 | |
| 188 | Titles and title levels get automatically retrieved from the first title element of each slide. |
| 189 | |
| 190 | You can override this automatic behavior for a slide by using the front matter syntax: |
| 191 | |
| 192 | ```yml |
| 193 | --- |
| 194 | title: Amazing slide title |
| 195 | level: 2 |
| 196 | --- |
| 197 | ``` |
| 198 | |
| 199 | ### Usage |
| 200 | |
| 201 | The `<TitleRenderer>` component is a virtual component you can import with: |
| 202 | |
| 203 | ```js |
| 204 | import TitleRenderer from '#slidev/title-renderer' |
| 205 | ``` |
| 206 | |
| 207 | Then you can use it with: |
| 208 | |
| 209 | ```md |
| 210 | <TitleRenderer no="42" /> |
| 211 | ``` |
| 212 | |
| 213 | Props: |
| 214 | |
| 215 | - `no` (`string | number`): The number of the slide to display the title from (slides starts from `1`) |
| 216 | |
| 217 | ## `Toc` |
| 218 | |
| 219 | Insert a Table Of Content. |
| 220 | |
| 221 | If you want a slide to not appear in the `<Toc>` component, you can use the `hideInToc` option in the frontmatter of the slide: |
| 222 | |
| 223 | ```yml |
| 224 | --- |
| 225 | hideInToc: true |
| 226 | --- |
| 227 | ``` |
| 228 | |
| 229 | Titles are displayed using the [`<Titles>` component](#titles) |
| 230 | |
| 231 | ### Usage |
| 232 | |
| 233 | ```md |
| 234 | <Toc /> |
| 235 | ``` |
| 236 | |
| 237 | Props: |
| 238 | |
| 239 | - `columns` (`string | number`, default: `1`): The number of columns of the display |
| 240 | - `listClass` (`string | string[]`, default: `''`): Classes to apply to the table of contents list |
| 241 | - `maxDepth` (`string | number`, default: `Infinity`): The maximum depth level of title to display |
| 242 | - `minDepth` (`string | number`, default: `1`): The minimum depth level of title to display |
| 243 | - `mode` (`'all' | 'onlyCurrentTree'| 'onlySiblings'`, default: `'all'`): |
| 244 | - `'all'`: Display all items |
| 245 | - `'onlyCurrentTree'`: Display only items that are in current tree (active item, parents and children of active item) |
| 246 | - `'onlySiblings'`: Display only items that are in current tree and their direct siblings |
| 247 | |
| 248 | ## `Transform` |
| 249 | |
| 250 | Apply scaling or transforming to elements. |
| 251 | |
| 252 | ### Usage |
| 253 | |
| 254 | ```md |
| 255 | <Transform :scale="0.5" origin="top center"> |
| 256 | <YourElements /> |
| 257 | </Transform> |
| 258 | ``` |
| 259 | |
| 260 | Props: |
| 261 | |
| 262 | - `scale` (`number | string`, default `1`): transform scale value |
| 263 | - `origin` (`string`, default `'top left'`): transform origin value |
| 264 | |
| 265 | ## `Tweet` |
| 266 | |
| 267 | Embed a tweet. |
| 268 | |
| 269 | ### Usage |
| 270 | |
| 271 | ```md |
| 272 | <Tweet id="20" /> |
| 273 | <Tweet url="https://x.com/antfu7/status/1389604687502995457" /> |
| 274 | ``` |
| 275 | |
| 276 | Props: |
| 277 | |
| 278 | - `id` (`number | string`): id of the tweet |
| 279 | - `url` (`string`): full `x.com` or `twitter.com` post URL |
| 280 | - `scale` (`number | string`, default `1`): transform scale value |
| 281 | - `conversation` (`string`, default `'none'`): [tweet embed parameter](https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference) |
| 282 | - `cards` (`'hidden' | 'visible'`, default `'visible'`): [tweet embed parameter](https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference) |
| 283 | |
| 284 | Provide either `id` or `url`. When both are present, `id` takes precedence. |
| 285 | |
| 286 | ## `BlueSky` |
| 287 | |
| 288 | Embed a Bluesky post. |
| 289 | |
| 290 | ### Usage |
| 291 | |
| 292 | ```md |
| 293 | <BlueSky uri="https://bsky.app/profile/sli.dev/post/3la7gcgfwpe2n" /> |
| 294 | <BlueSky uri="at://did:plc:432mbsu2xucyvxl6sluohidu/app.bsky.feed.post/3la7gcgfwpe2n" /> |
| 295 | ``` |
| 296 | |
| 297 | Props: |
| 298 | |
| 299 | - `uri` (`string`, required): AT-URI of the Bluesky post, or a `https://bsky.app/profile/.../post/...` URL |
| 300 | - `scale` (`number | string`, default `1`): transform scale value |
| 301 | |
| 302 | ## `VAfter`, `VClick` and `VClicks` |
| 303 | |
| 304 | <LinkCard link="guide/animations#click-animation" /> |
| 305 | |
| 306 | ## `VSwitch` |
| 307 | |
| 308 | Switch between multiple slots based on clicks. |
| 309 | |
| 310 | <LinkCard link="guide/animations#enter-leave" /> |
| 311 | |
| 312 | - If the `unmount` prop is set to `true`, the previous slot will be unmounted when switching to the next slot. Default is `false`. |
| 313 | - Use the `tag` and `childTag` props to change the default tag of the component and its children. Default is `div`. |
| 314 | - Use the `transition` prop to change the transition effect. Default is `false` (disabled). |
| 315 | |
| 316 | ## `VDrag` |
| 317 | |
| 318 | <LinkCard link="features/draggable" /> |
| 319 | |
| 320 | ## `SlidevVideo` |
| 321 | |
| 322 | Embed a video. |
| 323 | |
| 324 | ### Usage |
| 325 | |
| 326 | ```md |
| 327 | <SlidevVideo v-click autoplay controls> |
| 328 | <!-- Anything that can go in an HTML video element. --> |
| 329 | <source src="/myMovie.mp4" type="video/mp4" /> |
| 330 | <source src="/myMovie.webm" type="video/webm" /> |
| 331 | <p> |
| 332 | Your browser does not support videos. You may download it |
| 333 | <a href="/myMovie.mp4">here</a>. |
| 334 | </p> |
| 335 | </SlidevVideo> |
| 336 | ``` |
| 337 | |
| 338 | Check [HTML video element's doc](https://developer.mozilla.org/docs/Web/HTML/Element/Video) to see what can be included in this component's slot. |
| 339 | |
| 340 | Props: |
| 341 | |
| 342 | - `controls` (`boolean`, default: `false`): show the video controls |
| 343 | - `autoplay` (`boolean | 'once'`, default: `false`): |
| 344 | - `true` or `'once'`: start the video only once and does not restart it once ended or paused |
| 345 | - `false`: never automatically start the video (rely on `controls` instead) |
| 346 | - `autoreset` (`'slide' | 'click'`, default: `undefined`): |
| 347 | - `'slide'`: go back to the start of the video when going back to the slide |
| 348 | - `'click'`: go back to the start of the video when going back to the component's click turn |
| 349 | - `poster` (`string | undefined`, default: `undefined`): |
| 350 | - The source of the image to print when the video is not playing. |
| 351 | - `printPoster` (`string | undefined`, default: `undefined`): |
| 352 | - The override for `poster` when printing. |
| 353 | - `timestamp` (`string | number`, default: `0`): |
| 354 | - The starting time of the video in seconds. |
| 355 | - `printTimestamp` (`string | number | 'last' | undefined`, default: `undefined`): |
| 356 | - The override for `timestamp` when printing. |
| 357 | |
| 358 | ::: warning |
| 359 | When exporting, the video may fail to load because Chromium does not support some video formats. In this case, you can specify the executable path of the browser. See [Chromium executable path](/guide/exporting.html#executable-path) for more information. |
| 360 | ::: |
| 361 | |
| 362 | ## `Youtube` |
| 363 | |
| 364 | Embed a YouTube video. |
| 365 | |
| 366 | ### Usage |
| 367 | |
| 368 | ```md |
| 369 | <Youtube id="luoMHjh-XcQ" /> |
| 370 | ``` |
| 371 | |
| 372 | Props: |
| 373 | |
| 374 | - `id` (`string`, required): id of the YouTube video |
| 375 | - `width` (`number`): width of the video |
| 376 | - `height` (`number`): height of the video |
| 377 | |
| 378 | You can also make the video start at a specific time if you add `?start=1234` to the id value (where `1234` is seconds), |
| 379 |