∞ forever components

Product Flows

Crate Shop Onboarding

Three-step record shop setup flow with genre selection chips, curved vinyl-label SVG type, and animated confirmation.

cssmedium complexitymoderate motionpointer+keyboardmobile-readyaccessible

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
1

When to use it

Account onboarding wizards, store setup steps, and preference builders.

When not to

Long multi-page legal or KYC forms.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Edit --b/--i/--c/--l tokens in :root and [data-theme="light"].

Safe to edit

  • theme CSS tokens (--b/--i/--c/--l), data arrays & timings

Keep intact

  • IIFE + crNN- prefix, reduced-motion, visibilitychange, theme/demo-v1

Known limitations

  • Demo state resets on remount

onboardingwizardsteppervinyl-labelproduct-flowcrate

More Product Flows components

  • File Upload DropzoneSimulated file upload with progress rings and completed rows.
  • Profile MenuSimulated account menu with staggered rows and presence changes.
  • Crate Stock TableSortable vinyl inventory table with FLIP row reordering, status filter tabs, and multi-row select pills.
  • Crate Card CheckoutPayment form with live 3D card flip on CVC focus, number formatting, shake validation, and progress-to-paid pill.