Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
import { HeroVideoDialog } from "@/registry/magicui/hero-video-dialog";
export function HeroVideoDialogDemo() {
return (
<div className="relative">
<HeroVideoDialog
className="block dark:hidden"
animationStyle="from-center"
videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
thumbnailSrc="https://startup-template-sage.vercel.app/hero-light.png"
thumbnailAlt="Hero Video"
/>
<HeroVideoDialog
className="hidden dark:block"
animationStyle="from-center"
videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
thumbnailSrc="https://startup-template-sage.vercel.app/hero-dark.png"
thumbnailAlt="Hero Video"
/>
</div>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/hero-video-dialog
Examples
Top-in-bottom-out
import { HeroVideoDialog } from "@/registry/magicui/hero-video-dialog";
export function HeroVideoDialogDemoTopInBottomOut() {
return (
<div className="relative">
<HeroVideoDialog
className="block dark:hidden"
animationStyle="top-in-bottom-out"
videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
thumbnailSrc="https://startup-template-sage.vercel.app/hero-light.png"
thumbnailAlt="Hero Video"
/>
<HeroVideoDialog
className="hidden dark:block"
animationStyle="top-in-bottom-out"
videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
thumbnailSrc="https://startup-template-sage.vercel.app/hero-dark.png"
thumbnailAlt="Hero Video"
/>
</div>
);
}
Usage
import { HeroVideoDialog } from "@/components/magicui/hero-video-dialog";<HeroVideoDialog
className="block dark:hidden"
animationStyle="from-center"
videoSrc="https://www.example.com/dummy-video"
thumbnailSrc="https://www.example.com/dummy-thumbnail.png"
thumbnailAlt="Dummy Video Thumbnail"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
animationStyle | string | "from-center" | Animation style for the dialog |
videoSrc | string | - | URL of the video to be played |
thumbnailSrc | string | - | URL of the thumbnail image |
thumbnailAlt | string | "Video thumbnail" | Alt text for the thumbnail image |
Animation Styles
The animationStyle prop accepts the following values:
"from-bottom": Dialog enters from the bottom and exits to the bottom"from-center": Dialog scales up from the center and scales down to the center"from-top": Dialog enters from the top and exits to the top"from-left": Dialog enters from the left and exits to the left"from-right": Dialog enters from the right and exits to the right"fade": Dialog fades in and out"top-in-bottom-out": Dialog enters from the top and exits to the bottom"left-in-right-out": Dialog enters from the left and exits to the right
Note
- If using a YouTube video, make sure to use the
embedversion of the video URL.
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development