Understanding how slides are structured and rendered in Narro.
Core Components
Presentation
The root container for your presentation. Handles navigation, routing, and keyboard events.
tsx
<Presentation
aspectRatio="16:9"
keyboard={true}
mouse={true}
touch={true}
routing={true}
>
{/* Slides go here */}
</Presentation>Slide
Individual slide wrapper. Each slide can have a unique ID for URL routing.
tsx
<Slide id="intro" className="bg-gradient-to-br from-blue-900 to-slate-900">
<SlideContent layout="centered">
<Heading level={1}>Welcome</Heading>
</SlideContent>
</Slide>SlideContent
Layout component for slide content. Supports different layout modes.
typescript
// Available layouts:
layout="default" // Top-left aligned
layout="centered" // Center aligned
layout="split" // Two-column layoutAspect Ratios
Narro supports multiple aspect ratios:
16:9- Standard widescreen (default)4:3- Traditional presentation21:9- Ultra-wide format