reactslides

A developer-first presentation tool with React and Tailwind support.

Status

🚧 Coming Soon - This package is currently a placeholder.

Vision

ReactSlides is designed to be the ultimate developer-first presentation tool. It takes inspiration from Slidev and reveal.js but adds powerful features for modern developers.

Features

• React Components: Build slides using React components
• Tailwind CSS: Full Tailwind support for styling
• Sub-Slides: Multi-step content within a single slide
• Transform-based Navigation: Spatial zoom/pan navigation for creative presentations
• Font Support: 10+ popular font presets and custom font loading
• Hot Reload: Live preview while editing
• Keyboard Navigation: Full keyboard control
• Mouse Navigation: Hover-based navigation
• AI-Ready: Programmatic slide generation for AI integration
• Export: Multiple export formats (PDF, HTML, images)

Installation

npm install reactslides

Quick Start

import { Presentation, Slide } from '@reactslides/core';

export default function MyPresentation() {
  return (
    <Presentation>
      <Slide>
        <h1>Hello, World!</h1>
      </Slide>
      <Slide>
        <h2>Second Slide</h2>
        <p>Content goes here</p>
      </Slide>
    </Presentation>
  );
}

Advanced Features

Sub-Slides

Create multi-step content within a single slide:

import { Presentation, Slide, type SubSlide } from '@reactslides/core';

const steps: SubSlide[] = [
  {
    content: <div>Step 1: Introduction</div>,
    transition: "fade",
  },
  {
    content: <div>Step 2: Details</div>,
    transition: "slide-left",
  },
  {
    content: <div>Step 3: Conclusion</div>,
    transition: "slide-up",
  },
];

export default function Tutorial() {
  return (
    <Presentation>
      <Slide subSlides={steps} />
    </Presentation>
  );
}

See SUB_SLIDES_GUIDE.md for complete documentation.

Transform-based Navigation

Create presentations with spatial zoom/pan navigation:

import { Presentation, Slide, TransformSlide, type TransformSubSlide } from '@reactslides/core';

const spatialSteps: TransformSubSlide[] = [
  {
    position: { x: 0, y: 0, scale: 1 },
    content: <div>Center</div>,
  },
  {
    position: { x: 2000, y: -500, scale: 0.8, rotate: -5 },
    content: <div>Zoomed out view</div>,
  },
];

export default function SpatialPresentation() {
  return (
    <Presentation>
      <Slide>
        <TransformSlide subSlides={spatialSteps} />
      </Slide>
    </Presentation>
  );
}

See TRANSFORM_SLIDE_GUIDE.md for complete documentation.

Font Support

ReactSlides includes built-in support for popular fonts and custom font loading.

Using Font Presets

import { Presentation, applyFontPreset } from '@reactslides/core';
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    applyFontPreset('inter'); // Apply Inter font preset
  }, []);

  return <Presentation>{/* slides */}</Presentation>;
}

Using Custom Fonts

import { Presentation } from '@reactslides/core';

function App() {
  return (
    <Presentation
      theme={{
        fontHeading: '"Inter", sans-serif',
        fontBody: '"Inter", sans-serif',
        fontMono: '"JetBrains Mono", monospace',
      }}
    >
      {/* slides */}
    </Presentation>
  );
}

Available Font Presets

• system - Native system fonts (no import needed)
• inter - Modern, clean sans-serif (recommended)
• roboto - Google's flagship font
• openSans - Friendly, legible font
• lato - Warm, humanist design
• montserrat - Urban, geometric style
• poppins - Geometric sans-serif
• raleway - Elegant, thin design
• sourceSerif - Traditional serif
• playfairDisplay - Elegant display serif
• merriweather - Highly readable serif
• jetBrainsMono - Developer-focused monospace

See FONTS.md for complete font documentation.