Auth
Choose a login or signup page that fits your account and authentication flow.
Premium login and signup pages across centered, split, passwordless, and map-led editions with thoughtful motion and complete form states.
4 catalog entries · 17 examples
React Onboarding UI, Multi-Step Forms and Auth Pages
Onboarding connects account access to a useful first action. These React pages and blocks cover login, signup, setup questions, progress, and the empty states people encounter before they have added their own data.
Start with the account entry you need, then ask only for information required by the next step. Choose a compact step form for focused input or a wider onboarding layout when the setup benefits from a preview. Finish with an empty state that points to a real action.
Choose a layout
Match the account entry
Choose a centered, split, or passwordless auth layout to fit your login method. Wire validation, submission, and errors to your authentication service.
Make each step earn its place
Keep setup steps focused, preserve entered values, and make progress understandable. Use a preview when it helps someone see what their choices will change.
Design the first empty screen
After setup, show an action that creates the first useful record or workspace. Explain what will appear there and avoid leaving people on an empty dashboard without a next step.
Explore the examples
Open a catalog entry to try its live previews and inspect installation options.
Onboarding
Guide setup with stepper, preview-led, or progress-based onboarding compositions.
Premium onboarding flows: a numbered stepper with grouped emoji chip selectors, a split-screen flow with a live-bound form beside an animated preview mock, and a progress-ring row that morphs into a check-off task modal.
Step Form
Collect focused information through multi-step forms with validation and directional transitions.
A focused multi-step form with directional transitions, morphing height, stable validation, keyboard flow, and a concise success state.
Empty States
Give a newly created account a clear next action before it has its own content.
Four animated empty-state blocks with concise actions, distinct illustration styles, and theme-aware motion.
Before you build
Do the auth pages include authentication?
They provide the frontend forms and page composition. Connect them to your auth provider, server actions, or API, including real submission, validation, and error handling.
Can I change the onboarding steps?
Yes. You own the React source, so you can edit questions, step order, validation rules, and progress behavior to match your product.
Can I combine these with a dashboard?
Yes. Use onboarding for account setup and an empty state for the first visit, then connect the completed flow to your dashboard route and real records.
Compare current plans and source access before choosing blocks or a standalone template.
Related collections
Dashboards and reporting
Build a React dashboard with finance, support, capacity, and goals layouts, animated KPI cards, reports, and data tables. Compare live examples.
AI chat interfaces
Compose an AI chat interface with React inputs, voice UI, artifacts, research sources, and usage controls. Explore editable blocks and live previews.
SaaS landing pages
Build a SaaS landing page with animated React hero, feature, pricing, FAQ, CTA, and footer blocks. Compare layouts and open live previews.