Shadcn.io is not affiliated with official shadcn/ui
Storefront Installments
React installment plan selector with Klarna, Afterpay, and Affirm using Next.js, shadcn/ui Button, and Tailwind CSS for clean payment scheduling
Reduce cart abandonment with this buy now pay later block. Displays the product total alongside selectable installment plans from providers like Klarna, Afterpay, and Affirm. Each plan shows payment count, per-payment amount, and APR details. The selected plan expands into a full payment schedule with dates and amounts. Uses shadcn/ui Button components with flat border-divided sections. Perfect for e-commerce checkouts, high-ticket product pages, and flexible payment offerings.
Related Components
Cart
Shopping cart with line items
Checkout
Full checkout flow
Order Summary
Order total breakdown
Coupon Wallet
Saved coupons and offers
Product Details
Full product detail page
Bundles
Product bundle builder
FAQ
Was this page helpful?
Sign in to leave feedback.