End-to-end auth and commerce flows. Every form state and every status is rendered so nothing is hidden, with Sundanese sample people on receipts and orders.
Credentials + optional social providers. Default, social, error, and loading states.
<SignInForm onSubmit={async () => {}} rememberOption socialProviders={[…]} />Email + password with strength meter. Name, terms, social, and error states.
<SignUpForm onSubmit={async () => {}} requireName requireTermsAcceptance />Request a reset email. Default, success, and error states.
<ForgotPasswordForm onSubmit={async () => {}} successMessage="Check your inbox." />Segmented one-time-code. Both input types, a longer length, and the error state.
<OTPForm length={6} type="numeric" resendCountdown={30} onSubmit={async () => {}} />Card number, expiry, CVC. Base, save-card + billing, amount, and error states.
<PaymentForm onSubmit={async () => {}} showSaveCard amount={{ value: 178.14, currency: "USD" }} />International address. Both layouts plus the company field and required-all mode.
<AddressForm layout="stacked" showCompany defaultValues={{ city: "Bandung" }} />Stepper with checkout defaults. Interactive plus every size.
Shipping
Payment
Confirm
Cart
Shipping
Payment
Cart
Shipping
Payment
Cart
Shipping
Payment
Subtotal, shipping, tax, discount, total. Both variants plus a no-items state.
<CartSummary items={…} subtotal={165} total={178.14} discountCode={{ code: "LAUNCH10", amount: 15 }} />Full order block with line items + addresses. Every order status.
Shipping address
Payment
Visa ending in 4242
Shipping address
Payment
Visa ending in 4242
Shipping address
Payment
Visa ending in 4242
Shipping address
Payment
Visa ending in 4242
Shipping address
Payment
Visa ending in 4242
Shipping address
Payment
Visa ending in 4242
<OrderSummary orderId="ORD-1042" status="shipped" lineItems={…} total={178.14} />Printable receipt with merchant + customer + totals.
ahmad.muhyidin@contoh.id
BILL TO
Zoya Qiara
zoya.qiara@contoh.id
PAID WITH
Visa •••• 4242
<ReceiptBlock merchant={{ name: "Idin Studio" }} customer={{ name: "Zoya Qiara" }} lineItems={…} total={178.14} />Active plan overview with renewal + usage. Every subscription status.
Renews Jan 1, 2027
Payment method
Visa ending in 4242
Trial ends May 1, 2026
Payment method
Visa ending in 4242
Payment method
Visa ending in 4242
Ends Jun 1, 2026
Payment method
Visa ending in 4242
Payment method
Visa ending in 4242
<SubscriptionCard plan={{ name: "Team · Annual", price: 490 }} status="active" usageStats={[…]} />Single billing transaction row. Every status.
<BillingRow date={new Date()} description="Team plan" amount={490} status="paid" invoiceHref="#" />