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
Installation
Related Components
React Split Image Hero Block
Split-layout hero with full-height image column using React and Tailwind CSS
React Split Testimonial Hero Block
Split-layout hero with customer testimonial card using shadcn/ui Avatar and Card
React Split Signup Hero Block
Split-layout hero with inline registration form using shadcn/ui Input and Label
React Video Modal Hero Block
Hero with click-to-play video modal built with React and shadcn/ui Dialog
React Video Player Hero Block
Hero with inline video player controls using React state and shadcn/ui Button
React Travel Video Hero Block
Full-width hero with immersive video background using Tailwind CSS and React
FAQ
Was this page helpful?
Sign in to leave feedback.
React Split Testimonial Hero Block
A React and Next.js split-layout hero with customer testimonial card, social proof badges, and dual CTAs built with shadcn/ui Card, Avatar, Badge, Button, and Tailwind CSS.
React Stacked Cards Hero Block
A React and Next.js hero with interactive stacked cards depth effect, hover fan-out animation, and dual CTAs built with shadcn/ui Badge, Button, Framer Motion, and Tailwind CSS.