Getting Started

Welcome to react-slides! This tutorial will guide you through creating your first interactive, high-performance presentation using React.

Quick Start with the CLI

The fastest way to get started is by using our CLI to scaffold a new project. We will create a fresh presentation with everything pre-configured.

1. Initialize your project

Run the following command in your terminal. We will use the full template to include themes and syntax highlighting out of the box:

pnpm dlx @react-slides/cli init my-slides --template full
cd my-slides
pnpm install

2. Start the development server

Launch the dev server to see your slides in action:

pnpm dev

Your browser should automatically open to http://localhost:3000. You’ll see a starter presentation ready for editing.

Create your first slide

Open slides.tsx (or src/slides.tsx if you used the full template) in your project root. This is the entry point for your presentation.

Let’s try a more realistic example. Switch to the Code tab in the preview below, copy the snippet, and replace the content of your slides.tsx:

Preview Code

import { Slide, Fragment } from '@react-slides/core'
import { TitleLayout } from '@react-slides/components'

const slides = () => {
  return (
    <>
      <Slide>
      <TitleLayout
        subtitle={<p>The developer-first presentation framework</p>}
        footer={<p>v0.1.0</p>}
      >
        <h1>Welcome to React Slides</h1>
        <Fragment>
          <p>Built with React, Vite, and ❤️</p>
        </Fragment>
      </TitleLayout>
      </Slide>
    </>
  )
}

export default slides

Notice how the <Fragment> component automatically creates a new “step” in your slide. When you press the spacebar or right arrow in your browser, the paragraph will appear!

Common Tasks

Manual Installation

If you prefer to add react-slides to an existing project, install the core packages:

pnpm add @react-slides/core @react-slides/viewer @react-slides/themes
pnpm add -D @react-slides/cli

Building for Production

When you are ready to share your presentation, build it as a static website:

pnpm build

The output will be in the dist/ folder, ready to be hosted on any static site provider like Netlify or GitHub Pages.

Exporting to PDF

Need a static version of your slides? You can export them to PDF (this requires Playwright):

pnpm exec react-slides export --format pdf

Next Steps

Now that you have your first presentation running, explore what else you can do:

• Core Concepts — Understand the state machine and plugin model.
• Writing Slides — Master layouts, code reveals, and animations.
• Themes — Customise the look and feel of your presentation.