Components
Loading preview...
A hero video dialog component.
npx shadcn@latest add https://21st.dev/r/dillionverma/hero-video-dialogimport { HeroVideoDialog } from "@/components/ui/hero-video-dialog"
function HeroVideoDialogDemo() {
return (
<div className="relative">
<HeroVideoDialog
className="dark:hidden block"
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>
)
}
function HeroVideoDialogDemoTopInBottomOut() {
return (
<div className="relative">
<HeroVideoDialog
className="dark:hidden block"
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>
)
}
export {
HeroVideoDialogDemo,
HeroVideoDialogDemoTopInBottomOut,
}