Components

@react-slides/components is a set of presentational primitives that sit on top of @react-slides/core. They don’t manage state — they compose content inside a <Slide>.

pnpm add @react-slides/components

All components honour theme variables (--rs-bg, --rs-fg, --rs-accent, --rs-spacing-slide) and accept className + style overrides.

Layouts

Pick the layout that matches the slide’s intent. Each one fills the slide area (100% width and height) and applies its own padding.

Layout	Use when
`CenteredLayout`	One block of content centred vertically and horizontally.
`StackLayout`	Vertical list with controlled gap + alignment.
`TwoColumnLayout`	Two grid columns that share a background.
`SplitLayout`	Two panels that need independent backgrounds.
`TitleLayout`	Cover or title slide with subtitle and optional footer.
`SectionLayout`	Chapter divider with an optional number/label.

Centered

Centres children on both axes. Default padding 4rem, gap 1rem.

Stack

Vertical flex stack with explicit gap, padding, and cross-axis alignment (left / center / right). Reach for this when you need deterministic spacing between a few items.

import { Slide } from '@react-slides/core'
import { StackLayout } from '@react-slides/components'

const slides = () => {
  return (
    <>
      <Slide layout={StackLayout}>
        <h2>Agenda</h2>
        <ul>
          <li>State machine</li>
          <li>Primitives</li>
          <li>Themes</li>
        </ul>
      </Slide>
    </>
  )
}

export default slides

Two-Column

CSS-grid layout with a configurable ratio. ratio="1fr 2fr" biases the right column. align controls vertical alignment of each cell (start / center / end / stretch).

Split

Like TwoColumnLayout but each half owns its background — useful for cover-style contrasts (e.g. photo on one side, text on the other).

import { Slide } from '@react-slides/core'
import { SplitLayout } from '@react-slides/components'

const slides = () => {
  return (
    <>
      <Slide>
        <SplitLayout
          left={<h1>Left</h1>}
          right={<p>Right</p>}
          leftBg="#0a0a0a"
          rightBg="var(--rs-accent)"
          ratio="2fr 3fr"
        />
      </Slide>
    </>
  )
}

export default slides

Title

Cover slide: large children at the top, optional subtitle below, optional footer anchored to the bottom.

Section

Chapter divider. number renders above the title (e.g. "01", "Chapter 2").

import { Slide } from '@react-slides/core'
import { SectionLayout } from '@react-slides/components'

const slides = () => {
  return (
    <>
      <Slide>
        <SectionLayout number="02">
          <h1>Primitives</h1>
        </SectionLayout>
      </Slide>
    </>
  )
}

export default slides

Composing layouts

Layouts nest. Put a StackLayout inside a TwoColumnLayout’s left prop to get a column with controlled item spacing:

import { Slide } from '@react-slides/core'
import { TwoColumnLayout, StackLayout } from '@react-slides/components'

const slides = () => {
  return (
    <>
      <Slide>
        <TwoColumnLayout
          left={
            <StackLayout gap="0.75rem" align="left">
              <h2>Features</h2>
              <ul>…</ul>
            </StackLayout>
          }
          right={<img src="/screenshot.png" alt="" />}
          ratio="1fr 1fr"
        />
      </Slide>
    </>
  )
}

export default slides

The editor treats StackLayout and the layout components as containers: any layer can be nested inside them via the layer tree sidebar.

Slide chrome

Chrome components render on top of slide content. To get them on every slide, put them inside a shared <Slide> wrapper — or render them outside of <Slide> once; they read the active index from usePresentation().

SlideHeader

Top bar with optional logo, title, extra right-side content, and a slide counter.

import { Slide } from '@react-slides/core'
import { SlideHeader } from '@react-slides/components'

const slides = () => {
  return (
    <>
      <Slide>
        <SlideHeader
          logo={<img src="/logo.svg" alt="" height={20} />}
          title="Talk title"
          showSlideNumber
        />
        <h1>Slide body</h1>
      </Slide>
    </>
  )
}

export default slides

SlideFooter

Bottom bar with three slots (left, center, right) or a free-form children. showDate stamps today’s date on the left; showSlideNumber appends the counter on the right.

import { Slide } from '@react-slides/core'
import { SlideFooter } from '@react-slides/components'

const slides = () => {
  return (
    <>
      <Slide>
        <h1>Content</h1>
        <SlideFooter
          left="© 2026 Example"
          center="react-slides"
          right="@handle"
          showSlideNumber
        />
      </Slide>
    </>
  )
}

export default slides

ProgressBar

A thin bar tracking slide progress. Pin to top or bottom.

import { Slide } from '@react-slides/core'
import { ProgressBar } from '@react-slides/components'

const slides = () => {
  return (
    <>
      <Slide>
        <ProgressBar position="top" height={3} color="var(--rs-accent)" />
        <h1>Content</h1>
      </Slide>
    </>
  )
}

export default slides