Slide

Features

• Theme-aware dark/light modes — automatically adjusts text and background colors
• Hero image with overlay — set hero and heroImage for a full-bleed image with gradient
• Background image support — subtle background via bgImage
• Centered layout — optional center prop for vertically centered content
• Flush mode — removes default padding for edge-to-edge layouts
• CSS Modules with Visor tokens — consistent spacing, color, and typography

Installation

npx visor add slide

Usage

import { Slide } from '@/components/deck/slide/slide';

export default function Example() {
  return (
    <Slide id="intro" theme="dark" center>
      <h1>Welcome</h1>
      <p>Your presentation starts here.</p>
    </Slide>
  );
}

API Reference