Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

React Split Video Hero Block

A React and Next.js split-layout hero with autoplay looping video panel, feature list, and dual CTAs built with shadcn/ui Badge, Button, and Tailwind CSS.

Showcase your product in motion with this React split video hero block for Next.js. Built with TypeScript, it pairs compelling marketing copy on the left with a looping autoplay video panel on the right featuring a live demo indicator and poster image fallback. The left side uses shadcn/ui Badge and Button components with a dotted feature list, while the video panel is styled with Tailwind CSS rounded corners, border, and a subtle gradient overlay. Ideal for product demo pages, brand storytelling, and SaaS landing pages where showing motion conveys value better than static imagery.

React Split Video Hero Block preview

Loading...
Scroll to load preview

Installation

Install
Pro block

FAQ

Last updated on March 28, 2026

Was this page helpful?

Sign in to leave feedback.