# Hero video dialog

A hero section with a video dialog to introduce or demo your product.

By Magic UI. Categories: framework, interface, language, library.

[Demo](https://magic-ui-hero-video-dialog.preview.croct.live) · [Deploy](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcroct-tech%2Fvercel-template&project-name=magic-ui-hero-video-dialog&repository-name=magic-ui-hero-video-dialog&demo-title=Hero+video+dialog&demo-description=A+hero+section+with+a+video+dialog+to+introduce+or+demo+your+product.&demo-image=https%3A%2F%2Fcdn.croct.io%2Fassets%2Ftemplates%2Fcovers%2Flibrary-magic-ui-hero-video-dialog.png&external-id=magic-ui%3A%2F%2Fcomponent%2Fhero-video-dialog&integration-ids=oac_cTQZ22CIXn5XgZXYk2nBwFdU&demo-url=https%3A%2F%2Fmagic-ui-hero-video-dialog.preview.croct.live) · [Source](https://github.com/croct-tech/templates/blob/master/templates/magic-ui/component/hero-video-dialog/)

## Installation

```sh
npx croct@latest use magic-ui://component/hero-video-dialog
```

# Introduction

This template adds the [Magic UI Hero Video Dialog](https://magicui.design/docs/components/hero-video-dialog?utm_source=croct) component to your 
project or creates a new project using [Next.js](https://nextjs.org/?utm_source=croct) if none is found in the current directory.

It comes fully integrated with Croct, giving you CMS, AB testing, and personalization out of the box.

## Usage

To create a new project using this template, run:

```croct-cmd
croct use magic-ui://component/hero-video-dialog
```

You can customize the template by specifying options:

```croct-cmd
croct use magic-ui://component/hero-video-dialog --router=page
```

## Options

The following options are available for this template:

| Option        | Description                          | Required | Default  |
|---------------|--------------------------------------|----------|----------|
| `projectName` | The name of the project.             | No       | `my-app` |
| `version`     | The Next.js version to use.          | No       | `latest` |
| `router`      | The router to use (`app` or `page`). | No       | `app`    |