Narro - AI-Powered Presentations

Create your first presentation in under 5 minutes. This guide will walk you through building a simple 3-slide presentation.

Step 1: Create a Project

npx @reactslides/cli create my-first-deck

Step 2: Edit App.tsx

Open src/App.tsx and replace the content:

tsx

import { Presentation, Slide, SlideContent, Heading, Text } from "@reactslides/core";

export function App() {
  return (
    <Presentation>
      {/* Title Slide */}
      <Slide id="title" className="bg-gradient-to-br from-blue-900 to-slate-900">
        <SlideContent layout="centered">
          <Heading level={1}>Welcome to Narro</Heading>
          <Text className="text-xl text-slate-300 mt-4">
            Build beautiful presentations with React
          </Text>
        </SlideContent>
      </Slide>

      {/* Features Slide */}
      <Slide id="features" className="bg-slate-900">
        <SlideContent>
          <Heading level={2}>Why Narro?</Heading>
          <ul className="mt-8 space-y-4 text-xl text-slate-300">
            <li>✨ React components as slides</li>
            <li>🎨 Tailwind CSS styling</li>
            <li>🤖 AI-powered generation</li>
            <li>📤 Export to PowerPoint</li>
          </ul>
        </SlideContent>
      </Slide>

      {/* Closing Slide */}
      <Slide id="end" className="bg-gradient-to-br from-purple-900 to-slate-900">
        <SlideContent layout="centered">
          <Heading level={2}>Get Started Today!</Heading>
          <Text className="text-xl text-slate-300 mt-4">
            Visit narro.dev for more
          </Text>
        </SlideContent>
      </Slide>
    </Presentation>
  );
}

Step 3: Run Your Presentation

Terminal

npm run dev

Your presentation is now running! Use arrow keys to navigate between slides.

First Deck

Step 1: Create a Project

Step 2: Edit App.tsx

Step 3: Run Your Presentation

Next Steps