Lucent UI
← NotificationFeedOnboardingFlowDashboardHeader →
✦ LLM-ready

OnboardingFlow

pattern

Multi-step form with Stepper progress indicator, form fields, and back/next navigation. Composes Stepper, Card, Stack, Row, Input, Select, Button, and Text for a production-ready onboarding wizard.

"Build an OnboardingFlow pattern from lucent-ui with Stepper, Card, form fields (Input, Select), and back/next Button navigation."

Usage

React / JSX
import { Stepper, Card, Stack, Row, Input, Select, Button, Text } from 'lucent-ui'

<OnboardingFlow />

Installation

pnpm add lucent-ui

API Reference

OnboardingFlow props — * required

PropTypeDefaultDescription
Steppercomponent—Progress indicator showing current step.
Cardcomponent—Surface container for the form.
Inputcomponent—Text inputs for form fields.
Selectcomponent—Dropdown for selection fields.
Buttoncomponent—Back and Next navigation buttons.
Stackcomponent—Vertical layout for form content.
Rowcomponent—Horizontal layout for button row.