# Installation (/docs/installation)

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

> For the complete documentation index, see [llms.txt](/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](/.well-known/agent-skills/site-skill.md).



## Prerequisites [#prerequisites]

A project with [reveal.js](https://revealjs.com/) set up.

## Installation [#installation]

Run the following command to add any component or block:

```bash
npx shadcn@latest add @slidecn/section-slide
```

## Usage [#usage]

Import and use the component:

```tsx
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:

```tsx
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>
  );
}
```