Hero Video Dialog

PreviewCode

@/demos/HeroVideoDialogDemo.tsx

import { HeroVideoDialog } from '@/registry/magicui/hero-video-dialog'

export function HeroVideoDialogDemo() {
  return (
    <div class="relative">
      <HeroVideoDialog
        class="
          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
        class="
          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>
  )
}

Examples

Top-in-bottom-out

PreviewCode

@/demos/HeroVideoDialogDemoTopInBottomOut.tsx

import { HeroVideoDialog } from '@/registry/magicui/hero-video-dialog'

export function HeroVideoDialogDemoTopInBottomOut() {
  return (
    <div class="relative">
      <HeroVideoDialog
        class="
          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
        class="
          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>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/hero-video-dialog

bun

bunx shadcn@latest add @magicui-solid/hero-video-dialog

yarn

yarn dlx shadcn@latest add @magicui-solid/hero-video-dialog

npm

npx shadcn@latest add @magicui-solid/hero-video-dialog

Import

import { HeroVideoDialog } from '@/components/magicui/hero-video-dialog'

Usage

<HeroVideoDialog
  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"
/>

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
class	string	-	Custom CSS class for styling.

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 embed version of the video URL.

Original:

magicui.design/docs/components/hero-video-dialog