Frontend Component Examples

Open an example to learn which customer interaction it represents, how the state should be interpreted, and then view its complete component fixture.

• Chat Product Carousel Message: normalized chat messages, product cards, details, and variant selection.
• Product Listing Page: product search response mapped to cards, including empty state.
• Add to Cart State: add-to-cart event and local cart state.
• Cart Modal States: empty, populated, confirming, and confirmed states.
• Order Confirmation Modal: final review and processing states.
• Address Selection Modal: address response and selected-address event.
• Profile Selection Modal: profile response and selected-profile event.
• Card List and Payment Modal: masked card listing and selection state.
• Payment Confirmation Flow: payment request, OTP requirement, completion, and success message.
• OTP Payment Verification Modal: empty, typing, verifying, request, and response states.
• Passkey Settings and Confirmation: credential settings and confirmation UI contracts.
• Onboarding Modal: missing prerequisites and ready state.
• Order Summary Message: final customer-facing order summary.