react-slides

Why react-slides?

A React-first toolkit where slides are just components. Think of it as the Radix UI of presentations—primitives, not prescriptions. The core is lightweight, dependency-free, and built to scale with your ideas.

Fully Composable

Use Slide, Fragment, CodeStepper, and DiagramStepper as building blocks. Infinite flexibility, zero boilerplate.

State-Driven Logic

A robust state machine handles navigation. Use usePresentation() and useSlide() hooks to build completely custom interfaces.

Extensible Plugin System

First-class support for Shiki, Mermaid, and Framer Motion. Register custom controls or renderers via a tiny, powerful interface.

Zero-Runtime Themes

Powered by CSS variables. Choose from built-in themes like hacker or corporate, or design your own with zero performance cost.

Quick Start

The fastest way to launch is with our CLI. It scaffolds a complete project with everything you need:

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

Your first slide

Write your presentation using standard React components and our layout primitives:

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

Run pnpm dev and start building.