Integration
The reusable implementation is split across @components/checkout-form-1.tsx, @components/checkout-form-1-contact-step.tsx, @components/checkout-form-1-country-field.tsx, @components/checkout-form-1-order-summary.tsx, @components/checkout-form-1-payment-step.tsx, @components/checkout-form-1-progress.tsx, @components/checkout-form-1-shipping-step.tsx.
The registry also includes app/checkout-form-1/page.tsx as a complete preview route; an existing application can keep the reusable component files without adopting that route.
Example content is isolated in @components/data/checkout-form-1-data.ts (initialCheckoutForm1Data, OrderSummaryItem, OrderSummary, orderSummary); replace those fixtures with application data rather than editing layout markup in several places.
@components/checkout-form-1.tsx, @components/checkout-form-1-contact-step.tsx, @components/checkout-form-1-country-field.tsx, @components/checkout-form-1-order-summary.tsx, @components/checkout-form-1-payment-step.tsx, @components/checkout-form-1-progress.tsx, @components/checkout-form-1-shipping-step.tsx declare a client boundary for state, measurement, or browser interaction.
Contact, shipping, payment, progress, country selection, and order summary are separate client components coordinated by CheckoutForm1.
This item composes motion-checkbox-check from the same catalog; the upstream registry dependency installs it with the block.
