Onboarding Setup

Renders a card with onboarding steps, focus options, revenue selection, and role input. It animates transitions and handles user selections. Use for guiding users through setup processes.

byWatermelon Corp from Watermelon

Installation

terminal

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

npx layro-cli add @watermeloncorp/onboarding-setup

npx layro-cli add @watermeloncorp/onboarding-setup

bunx layro-cli add @watermeloncorp/onboarding-setup

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

Code

Demo

import React, { useState, useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { CheckCircle2, ChevronDown, Check } from 'lucide-react';

type FocusOption = {
  id: string;
  label: string;
};

interface OnboardingSetupProps {
  title: string;
  subtitle: string;
  focusOptions: FocusOption[];
  selectedFocus: string;

Free, with GitHub, Google or email. The install command above works without an account.

Versions

1.0.0 · current
Nov 11, 2026
First release.

Similar components