Shadcn.io is not affiliated with official shadcn/ui
Hero Split Video Player
A split-layout hero with a 16:9 video player mockup for React and Next.js featuring an announcement pill, headline, emerald feature checklist, and dual ShadcnioButton CTAs built with shadcn/ui and Tailwind CSS
Build a split-layout hero with a minimal video player mockup using this React and Next.js block. Features an announcement pill, bold two-line headline, three-item emerald feature checklist with CheckIcon, and dual ShadcnioButton CTAs paired with a 16:9 video canvas showing a centered play circle, concentric rings, duration badge, and progress bar. Built with TypeScript, ShadcnioButton, motion/react entrance animations, Lucide React icons, and Tailwind CSS. Perfect for travel agencies, video streaming platforms, media production tools, and any experience-driven product that wants to communicate visual storytelling above the fold.
Related Components
React Split Video Hero Block
Split hero with side-by-side video and content for product demos
React Video Player Hero Block
Hero with an embedded video player and play controls
React Video Modal Hero Block
Hero with a video that opens in a modal overlay on click
React Split Image Hero Block
Split layout hero with image placeholder using Tailwind CSS grid
React App Screenshots Hero Block
Split hero with overlapping browser frame placeholders
React Browser Frame Hero Block
Hero with single browser mockup and product screenshot placeholder
FAQ
Was this page helpful?
Sign in to leave feedback.
Split Video
A split-layout hero with a 16:9 video player mockup for React and Next.js featuring an announcement pill, emerald feature checklist, and dual ShadcnioButton CTAs built with shadcn/ui and Tailwind CSS
Stacked Cards
A centered hero with three overlapping fanned-out cards for React and Next.js featuring an announcement pill, dual ShadcnioButton CTAs, and crosshair placeholders built with shadcn/ui and Tailwind CSS