Components

Components can be used to add more power to your presentation.

As same as HTML

Components can be used as HTML tags but in your Markdown file. So you can use them like this:

<LikeHTML>
  <h1>Heading</h1>
  <p>Paragraph</p>
</LikeHTML>

You can also use Markdown inside your component:

<LikeHTML>
# Heading
Paragraph
</LikeHTML>

Class and style

You can add a class to your component:

<LikeHTML class="my-class">
  <h1>Heading</h1>
  <p>Paragraph</p>
</LikeHTML>

But this theme come with Windi CSS so you can use the power of this utility-first CSS framework:

<LikeHTML class="mt-6 bg-blue-500 text-white">
  <h1>Heading</h1>
  <p>Paragraph</p>
</LikeHTML>

Built-in Slidev

Slidev come with many built-in components.

You can find the full list of components in the repository.

Custom Components

This theme provides some custom components.

Alert

This component can be used to highlight important information.

<Alert color="blue" title="Title">
  This is an alert.
</Alert>

Available Color values are orange, red, green, blue, yellow.

SectionContent

This component is nearly the same as the Alert component but with a different style to allow you to create sections inside your slides.

<SectionContent color="blue" title="Title">
  This is a section.
</SectionContent>

CenterContent

This component can be used to center the content of a slide horizontally.

<CenterContent>
You can center content with the `Center` component (horizontally).
- Item 1
- Item 2
- Item 3 is so long (but always centered)
</CenterContent>

Zoom

This component can be used to zoom inside an image.

<Zoom src="https://source.unsplash.com/random/800x600" scale="1.3" origin="left center" />

Separator

This component can be used to separate title from content.

<Separator />