React Presentation Maker

React Presentation Maker is a Next.js template that uses React components as presentation slides, so you can build a slide deck entirely in code. The repository includes nine pre-built slide components — <Cover />, <QuoteBlock />, <CodeBlock />, <Points />, <Profiles />, <SingleImage />, <MultiImage />, <About />, and <End /> — plus a <Wrapper /> component to standardize spacing. Styling is handled by Tailwind CSS, animations by Motion (formerly Framer Motion), icons by Akar Icons, and sound effects via the use-sound package. It is built for the Bun runtime and includes scripts for development, linting, formatting, type-checking, and production builds.

What is React Presentation Maker?

React Presentation Maker is a Next.js template for transforming React components into presentation slides. Instead of importing a deck from a slide editor, you write each slide as a component and the template renders it as part of a slideshow. It takes a set of React component files as input and produces a runnable Next.js presentation site. It uses TypeScript, Tailwind CSS, Motion, Akar Icons, and use-sound, with Bun as the package manager and script runner.

Key Features

• Nine slide components included — Cover, QuoteBlock, CodeBlock, Points, Profiles, SingleImage, MultiImage, About, and End cover typical deck sections like title, quote, code, bullet points, profiles, single/multiple images, about, and socials.
• Reusable React components — Every slide is a regular React component, so you can restyle or extend each one with JSX.
• Tailwind CSS styling — Utility classes from Tailwind CSS style the slides, and PostCSS is part of the build tooling.
• Motion animations — Motion (formerly Framer Motion) is included for adding transitions and animations to slides.
• Akar Icons — The Akar Icons icon set provides iconography for the slides.
• use-sound — The use-sound package is included so you can attach sound effects to slide interactions.
• Bun scripts — The template uses Bun with commands such as bun install, bun run dev, bun run build, bun run lint, bun run format, and bun run type-check.
• Pre-commit setup — bun run prepare is available to set up pre-commit hooks.

Who is it for?

• Developers who build slides in code — Create and maintain presentations with version control, code review, and the same tooling used for web apps.
• React developers giving technical talks — Use the CodeBlock slide to show code samples and the Points slide for bullet-driven explanations.
• Bun users — The template's commands are designed around Bun, making it a natural fit for Bun-based projects.
• Open-source project maintainers — The Profiles and About components can introduce team members or contributors in a project overview deck.

What can you do with it?

• Technical presentations: Write a <CodeBlock /> slide to display formatted source code inside the deck.
• Team or speaker intros: Use <Profiles /> and <About /> to present people and personal background.
• Visual storytelling: Drop a <SingleImage /> or <MultiImage /> slide into the deck to feature images.