For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
0
Sponsor

Installation

PreviousNext

Install reveal.js components, blocks and themes from the slidecn registry.

Prerequisites

A project with reveal.js set up.

Installation

Run the following command to add any component or block:

$ pnpm dlx shadcn@latest add @slidecn/section-slide

Usage

Import and use the component:

import { Deck } from "@revealjs/react";
 
import SectionSlide from "@/components/slidecn/section-slide";
 
import "reveal.js/reveal.css";
 
export function MyPresentation() {
  return (
    <Deck>
      <SectionSlide label="Chapter 2" title="Our solution" variant="accent" />
    </Deck>
  );
}

Compose multiple slides and opt into a theme CSS file from the registry:

import { Deck } from "@revealjs/react";
 
import SectionSlide from "@/components/slides/section-slide";
import TitleSlide from "@/components/slides/title-slide";
 
import "reveal.js/reveal.css";
import "@/components/slides/themes/theme-default.css";
 
export function PitchOutline() {
  return (
    <Deck>
      <TitleSlide
        eyebrow="Q4 Review"
        title="Acme Corp"
        subtitle="Ship faster with slidecn"
        author="Jane Smith"
        date="2026"
      />
      <SectionSlide label="Agenda" title="Today we will cover" />
    </Deck>
  );
}