UserOnboarding

'use client'
import { useState } from 'react'

const STEPS = [
  { emoji:'👋', title:'Welcome to Empire UI', desc:'The largest AI-generated React component library with 17,500+ components.' },
  { emoji:'🎨', title:'Browse Components', desc:'Search and filter through categories like buttons, charts, forms, and much more.' },
  { emoji:'⚡', title:'Use with MCP', desc:'Install our MCP server to generate components directly in Claude Code or Cursor.' },
  { emoji:'🚀', title:"You're all set!", desc:"Start building your next project with Empire UI components today." },
]

export default function UserOnboarding() {
  const [step, setStep] = useState(0)
  const current = STEPS[step]
  return (
    <div style={{ background:'#fff', borderRadius:'20px', padding:'32px 28px', maxWidth:'360px', boxShadow:'0 8px 40px rgba(0,0,0,0.1)' }}>
      <div style={{ display:'flex', gap:'6px', justifyContent:'center', marginBottom:'28px' }}>
        {STEPS.map((_, i) => (
          <div key={i} style={{
            height:'4px', flex:1, borderRadius:'2px',
            background:i <= step ? '#6d28d9' : '#e2e8f0', transition:'background 0.3s',
          }} />
        ))}
      </div>
      <div style={{ textAlign:'center', marginBottom:'28px' }}>
        <div style={{ fontSize:'60px', marginBottom:'16px' }}>{current.emoji}</div>
        <h2 style={{ margin:'0 0 10px', fontSize:'20px', fontWeight:700, color:'#1e293b' }}>{current.title}</h2>
        <p style={{ margin:0, fontSize:'14px', color:'#64748b', lineHeight:1.6 }}>{current.desc}</p>
      </div>
      <div style={{ display:'flex', gap:'10px' }}>
        {step > 0 && (
          <button onClick={() => setStep(s => s-1)} style={{
            flex:1, padding:'11px', border:'1px solid #e2e8f0', borderRadius:'10px',
            background:'#fff', cursor:'pointer', fontWeight:600, color:'#374151',
          }}>Back</button>
        )}
        <button onClick={() => step < STEPS.length-1 ? setStep(s => s+1) : null} style={{
          flex:2, padding:'11px', border:'none', borderRadius:'10px',
          background:'linear-gradient(135deg,#6d28d9,#2563eb)',
          color:'#fff', cursor:'pointer', fontWeight:700, fontSize:'14px',
        }}>{step < STEPS.length-1 ? 'Continue →' : 'Get Started 🚀'}</button>
      </div>
      <div style={{ textAlign:'center', marginTop:'12px', fontSize:'12px', color:'#94a3b8' }}>Step {step+1} of {STEPS.length}</div>
    </div>
  )
}

Component info

About

Multi-step user onboarding flow with progress and illustrations