Production-ready React blocks built with Tailwind CSS and shadcn/ui. Copy, paste, and customize for your next project.
onboarding12
Visual progress tracker featuring a circular percentage indicator with completion stats and task list. Perfect for profile setup flows that encourage users to reach 100% completion.
onboarding13
Onboarding screen where users select their role or persona to personalize their experience. Each role card shows an icon, title, and description with a selectable highlight state.
onboarding14
Combined onboarding card for creating a workspace with name and URL slug, plus a team invite section with email inputs. Perfect for SaaS apps that require team collaboration setup.
onboarding15
Onboarding screen with a grid of available integrations showing connection status and connect/skip actions. Perfect for apps that rely on third-party services like Slack, GitHub, and Google.
onboarding16
Onboarding screen with a grid of selectable interest tags and chips for personalizing content recommendations. Perfect for content platforms, newsletters, and social apps.
onboarding17
Onboarding screen where users pick their primary goal to receive a tailored onboarding path. Each goal card shows a recommended feature set. Perfect for multi-purpose platforms.
onboarding18
Onboarding screen with toggle switches for configuring notification channels and frequency. Perfect for apps that need granular notification consent during setup.
onboarding19
Onboarding screen with a form card for setting up user profile including avatar, display name, bio, and timezone. Perfect for the personal details step in any SaaS onboarding flow.
onboarding20
Onboarding screen with a grid of starter templates to choose from, each with a preview thumbnail, title, and description. Perfect for project creation flows in design tools and project management apps.
onboarding21
Completion screen shown after finishing onboarding with a summary of what was configured and quick-start action links. Perfect for ending the setup flow with clear next steps.
onboarding22
Onboarding screen showing current plan details with visual usage bars for storage, seats, and API calls. Perfect for SaaS post-signup flows that introduce plan limits and upgrade paths.
onboarding23
Onboarding screen for configuring account security including two-factor authentication, recovery email, and backup codes. Perfect for apps that prioritize security during onboarding.
onboarding24
Onboarding screen displaying essential keyboard shortcuts in a grouped grid layout with key badges. Perfect for productivity tools that want to accelerate user adoption.
onboarding25
Onboarding screen for choosing theme mode (light, dark, system) and accent color. Perfect for apps that offer visual customization as part of the onboarding experience.
onboarding26
Onboarding screen with import options from other platforms, CSV upload, and manual entry. Perfect for SaaS migration flows that help users bring existing data into the platform.
onboarding27
Onboarding screen with a quick survey asking how the user discovered the product, with selectable options and an optional text input. Perfect for marketing attribution during signup.
onboarding28
Onboarding screen for choosing a billing cycle (monthly/yearly) with savings badge, payment method selection, and optional coupon code input. Perfect for SaaS apps that collect payment during onboarding.
onboarding29
Onboarding screen for collecting company information including name, team size selector chips, and industry dropdown. Perfect for B2B SaaS apps that need organizational context during setup.
onboarding30
Onboarding screen with navigable feature highlight cards, dot indicators, and back/next buttons. Perfect for introducing key platform features during the first-time user experience.
podcast1
Two-column podcast hero featuring cover art with video modal, host info, episode count, and latest episode card. Perfect for podcast landing pages that highlight show branding and recent content.
podcast2
Audio player card featuring cover art, animated waveform visualization, play/pause controls, and progress tracking. Perfect for embedded podcast players on show pages.
podcast4
Detailed episode page with cover art, duration, publish date, numbered show notes, and host/guest profiles. Perfect for individual episode pages that provide comprehensive content information.
podcast14
Responsive grid of episode cards featuring thumbnails, duration badges, categories, and click-to-play video modals. Perfect for episode listings and related content sections.
podcast38
Host profile card featuring avatar, bio, stats (shows, episodes, listeners), social links, and a grid of their podcast shows. Perfect for podcaster profile pages and network creator pages.