react-slide-deck

Design-free React presentation shell. Owns navigation only:

• ← / → / Space / Home / End
• Touch swipe
• Bottom-right prev/next arrows

No progress bars, counters, themes, fonts, or slide styling.

Install

# from GitHub (recommended — always latest tagged/main)
pnpm add github:akemmanuel/react-slide-deck

# or a specific tag / commit
pnpm add github:akemmanuel/react-slide-deck#v0.1.0

Peer deps: react and react-dom ≥ 18.

Usage

import { Deck, type SlideProps } from "react-slide-deck";
import "react-slide-deck/styles.css";

function Title({ active }: SlideProps) {
  return (
    <section style={{ opacity: active ? 1 : 0 }}>
      <h1>Hello</h1>
    </section>
  );
}

export function Presentation() {
  return <Deck slides={[Title]} label="My talk" />;
}

Or with children:

<Deck>
  <Title />
  <Body />
</Deck>

Headless hook if you want custom chrome:

import { useDeck } from "react-slide-deck";

const { current, next, prev, goTo, isFirst, isLast } = useDeck({ total: 5 });

API

<Deck />

Prop	Type	Default	Description
slides	SlideComponent[]	—	Components receiving { active, index }
children	ReactNode	—	Alternative to slides
initial	number	0	Starting slide index
onChange	(index) => void	—	Fires on slide change
hideControls	boolean	false	Hide bottom arrows (keys/swipe still work)
disabled	boolean	false	Disable all navigation
label	string	"Presentation"	aria-label for the region

useDeck({ total })

Returns { current, total, next, prev, goTo, isFirst, isLast }.

What each slide owns

The deck stacks slides and passes active / index. Transitions, colors, typography, progress UI — all stay in your presentation.

Develop

pnpm install
pnpm build