Onboarding Screen

Onboarding screen with visual steps for user setup. Renders a form with business details and progress tracking. Handles navigation between steps and submits data on completion. Use when guiding users through initial configuration.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/onboarding-screen

npx layro-cli add @watermeloncorp/onboarding-screen

npx layro-cli add @watermeloncorp/onboarding-screen

bunx layro-cli add @watermeloncorp/onboarding-screen

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import React, { useState } from 'react';
import { motion } from 'motion/react';
import { ChevronLeft, Info, ImagePlus } from 'lucide-react';
import { HiBadgeCheck } from 'react-icons/hi';

interface OnboardingProps {
  title?: string;
  subtitle?: string;
  businessNameLabel?: string;
  businessNamePlaceholder?: string;
  legalNameLabel?: string;
  legalNamePlaceholder?: string;