Component

Slide Viewer

A slide presentation viewer with navigation controls and progress indicator. Uses the headless @refraction-ui/slide-viewer core.

Examples

Navigate through slides with arrow controls.

text1 / 3
Welcome to the presentation

Installation

$pnpm add @refraction-ui/react-slide-viewer

Usage

tsx
import { SlideViewer } from '@refraction-ui/react-slide-viewer'
export function MyComponent() {
  return (
    <SlideViewer slides={[
      { id: '1', title: 'Slide 1', content: 'Content', type: 'text' },
    ]} />
  )
}

Props

PropTypeDefaultDescription
slidesSlideData[]--Array of { id, title, content, type }.
classNamestring--Additional CSS classes.