npm package: @reactslides/core
Description: A developer-first presentation tool with React and Tailwind support
Latest version: 0.0.11

# 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](https://sli.dev) and [reveal.js](https://revealjs.com) 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

```bash
npm install reactslides
```

## Quick Start

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

```tsx
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](./SUB_SLIDES_GUIDE.md) for complete documentation.

### Transform-based Navigation

Create presentations with spatial zoom/pan navigation:

```tsx
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](./TRANSFORM_SLIDE_GUIDE.md) for complete documentation.

## Font Support

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

### Using Font Presets

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

```tsx
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](./FONTS.md) for complete font documentation.