Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Video dialog

A video behind its poster. A press opens a player that grows out of the poster's own place and shrinks back into it on close. It is a real dialog with the browser's controls; it plays on open and stops on close.

Pro
pnpm dlx shadcn@latest add @caliper/video-dialog

Harbour office

A look at the new space before the move.

Elias Kim · Workplace

Installs components/ui/video-dialog.tsxDepends on @radix-ui/react-dialog, lucide-reactMotion shared motion tokens

When to use

Use it for

  • A product walkthrough or recorded demo on a page that should not autoplay video.
  • A help article with a short screen recording.

Skip it when

  • Background or decorative video; that should not need a press.
  • Long talks; link to a player page.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

From the poster, back to it
The open and close animations start and end on the poster's measured box, so it is clear where the video lives.

Usage

Captions
Pass a WebVTT file as captions and the track is on by default.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/video-dialog

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { VideoDialog } from "@/components/ui/video-dialog"

The worked example comes with Pro

The 30-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

VideoDialog

component
PropTypeDefaultDescription
src *string—The video file.
poster *string—The still shown before playing.
title *string—Names the video on the poster's button and in the dialog.
durationstring—Shown on the poster, e.g. "2:14".
captionsstring—A WebVTT captions file.
classNamestring—

Accessibility

It is built on native elements and keeps aria-label and aria-describedby in step with state.

Keyboard and focus handling comes from Radix dialog: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.

Motion

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.

All Compare & browse examples