Shadcn.io is not affiliated with official shadcn/ui
React Video Introduction Onboarding Block
A React and Next.js video introduction onboarding block featuring 16:9 video placeholder, chapter progress indicators, and skip/continue actions built with TypeScript, shadcn/ui, and Tailwind CSS for product walkthroughs.
Introduce your product features with this video introduction onboarding block built for React, Next.js, and TypeScript. The component features a 16:9 aspect ratio video placeholder with play icon, chapter progress dots with active state highlighting, skip and continue action buttons, and smooth Framer Motion entrance animations. Designed with shadcn/ui Button components and Tailwind CSS styling. Ideal for SaaS product onboarding flows, feature introduction screens, guided setup walkthroughs, and new user activation sequences.
React Video Introduction Onboarding Block preview
Installation
Related Components
React Welcome Onboarding Block
Welcome greeting with feature highlights
React Carousel Onboarding Block
Feature showcase carousel with slide transitions
React Guided Walkthrough Onboarding Block
Interactive step-by-step product tour
React Stepper Onboarding Block
Linear numbered step-by-step wizard
React Tour Onboarding Block
Interactive product tour with step navigation
React Checklist Onboarding Block
Expandable setup checklist with progress tracking
FAQ
Was this page helpful?
Sign in to leave feedback.
React Use Case Onboarding Block
A use case selection component for React and Next.js with single-select rows, icon indicators, dot selection state, and continue button built with shadcn/ui and Tailwind CSS
React Webhook Configuration Onboarding Block
A React and Next.js webhook configuration onboarding block with URL input, event type selector, test delivery button with status indicators, and test log display built with TypeScript, shadcn/ui, and Tailwind CSS for API integration setup.