Slide Deck Shell

Turn a presentation into a page of your site. Slides are laid out at a fixed design size (1280×720 by default), then scaled to the container with transform: scale(), so type and spacing never distort with screen size. Navigate with ← → Space Home End or a horizontal swipe; F toggles fullscreen, N opens speaker notes and ? shows every shortcut. Four transitions are available (slide / fade / zoom / none), and the bottom progress bar and rolling page counter update as you go. Turn on syncHash to write the slide number into the URL (#3 is slide 3); printing or Save as PDF gives exactly one slide per page. Nine layouts such as TitleSlide, StatsSlide and CodeSlide are included, so dropping them in gives you a complete deck.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<SlideDeckShell/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/slide-deck-shell.en.json

Usage

import {
  SlideDeckShell,
  TitleSlide,
  ListSlide,
  StatsSlide,
  ClosingSlide,
} from "@/components/ui/slide-deck-shell";

<SlideDeckShell label="Q3 Product Review" transition="slide" syncHash>
  <TitleSlide
    eyebrow="2026 Q3"
    title="Q3 Product Review"
    subtitle="Three months, two major releases"
    notes="Introduce yourself first"
  />
  <ListSlide
    title="Three headline results"
    ordered
    items={["Editor rewrite", "Team asset library", "Mobile review mode"]}
  />
  <StatsSlide
    title="Key numbers"
    items={[
      { value: 12480, label: "Monthly active users" },
      { value: 64, suffix: "%", label: "30-day retention" },
    ]}
  />
  <ClosingSlide title="Thank you" contact="hello@example.com" />
</SlideDeckShell>

// Or drive it with data (slides wins over children)
<SlideDeckShell
  slides={[
    { id: "cover", content: <TitleSlide title="Cover" />, notes: "Notes" },
    { id: "end", content: <ClosingSlide title="The end" /> },
  ]}
/>

Props

SlideDeckShell

DeckSlideData

SlideDeckShellLabels

Slide layouts

Every layout accepts notes (speaker notes), background (any CSS background value) and className.

DeckStat

How it works

• Scaling: a ResizeObserver measures the container and the scale is the smaller of container width ÷ baseWidth and container height ÷ design height, so fullscreen letterboxes automatically. Inside a slide you can lay things out with px and regular Tailwind type sizes.
• Transitions: AnimatePresence mode="wait" plays exit then enter; the whole page change takes --wb-deck-duration (default 400ms) on the --wb-deck-ease curve (default cubic-bezier(0.22,1,0.36,1)). Both variables are read from CSS before each page change and can be overridden on any ancestor. The accent colour is --wb-deck-accent, which follows the text colour by default.
• Keyboard: with the default keyboard="focus", arrow keys and Space are only handled after the deck is clicked or focused with Tab, so page scrolling is never hijacked; in fullscreen the whole window is listened to. Keys typed into text fields are always ignored.
• Touch: a horizontal swipe over 50px, or faster than 0.3px/ms, changes slides; vertical swipes scroll the page (touch-action: pan-y).
• Fullscreen: F or the button calls the Fullscreen API; the button is hidden when the browser does not support it. Esc closes the shortcuts overlay first; in fullscreen the browser handles Esc to exit.
• Speaker notes: shown below the deck, or as a right-hand sidebar in fullscreen. In children mode they are collected from each child's notes prop.
• Printing: under @media print the controls are hidden, scaling and transitions are off and every slide is printed in order on paper sized to the slide, so Save as PDF gives exactly one slide per page. The @page rule applies to the whole document while the component is mounted, so a dedicated route for the deck is recommended.
• No PPTX export: this is a front-end-only component. If you need PPTX, print to PDF from the browser or convert separately.
• CodeSlide only does monospace text, line numbers and a copy button, without syntax highlighting; swap in WebberUI's code-block if you need highlighting.

Accessibility

• The root is role="region" with aria-roledescription="presentation" and is named by label; each slide is role="group" with aria-roledescription="slide" and an aria-label such as "Slide 3 of 8"
• Only the current slide is rendered; a slide that is exiting is inert and hidden from assistive technology
• On every page change an aria-live="polite" region announces "Slide N of M"; the bottom progress bar is role="progressbar"
• Every control is type="button" with an aria-label and a focus-visible ring; the notes button exposes aria-pressed
• The shortcuts overlay is role="dialog" with aria-modal; focus moves to the close button, stays inside the dialog and returns where it was when closed
• When the OS asks to reduce motion, every transition becomes a 150ms fade, figures show their final value immediately, list items appear without a stagger and the page counter does not roll