Use canvas components for absolute positioning of elements anywhere on your slides.
Canvas Component
tsx
import { Canvas, CanvasElement, CanvasShape } from "@reactslides/core";
<Canvas background="#1a1a1a" width="100%" height="100%">
{/* Your positioned elements */}
</Canvas>Positioning Elements
tsx
<CanvasElement x={10} y={20} width={200} height={100}>
<div className="bg-blue-500 p-4 rounded">
Positioned at 10%, 20%
</div>
</CanvasElement>
{/* Use pixel values */}
<CanvasElement x="100px" y="50px" rotate={45} opacity={0.8}>
<Text>Rotated text</Text>
</CanvasElement>Built-in Shapes
Narro includes 10 pre-built shapes:
• circle
• rectangle
• triangle
• star
• hexagon
• pentagon
• arrow
• diamond
• ellipse
• cloud
tsx
<CanvasShape shape="circle" x={50} y={50} size={100} color="#3b82f6" />
<CanvasShape shape="star" x={200} y={100} size={80} color="#fbbf24" rotate={15} />
<CanvasShape shape="hexagon" x={400} y={150} size={90} color="#8b5cf6"
stroke="#ffffff" strokeWidth={2} opacity={0.8} />