Preview images coming soon
Every screen and state in a modern checkout, designed and coded: cart, address, shipping, payment, review, confirmation, plus the failure paths most kits pretend do not exist.
Checkout is the most consequential and least designed part of most ecommerce projects. Teams build the happy path in a sprint, then spend six months patching declined cards, address validation failures, expired sessions and tax surprises. Checkout Kit gives you all of it up front, in Figma and in code.
Cart with quantity edits, stock warnings and saved-for-later. Address entry with autocomplete, manual fallback and validation failure. Shipping selection with estimated dates and cost changes. Payment with card, wallet, bank transfer and pay-later placements. Review with a tax and duty breakdown. Confirmation with delivery expectations and account creation offer. Then the paths nobody designs: declined payment with retry guidance, expired cart, out-of-stock at confirmation, partial availability, currency mismatch, and 3-D Secure interruption.
Layouts are designed at 390 pixels and scaled up. Number pads are triggered by correct input types, autocomplete tokens are set on every field, the summary collapses into a persistent bar with an expandable detail, and the primary action never sits under a floating keyboard. These details routinely move mobile conversion by several percent.
Price display components handle currency switching, tax-inclusive and tax-exclusive presentation, duty estimation messaging and market-specific payment method ordering — all common requirements for cross-border stores and rarely covered by UI kits.
Ships as a Figma library with variables and a matching HTML and Tailwind implementation with Alpine interactivity, so what is designed is what gets built. Accessibility is covered with focus management between steps, live-region error announcements and complete keyboard operation.
Figma account for the design library. Any modern browser for the coded version; Node 18+ optional for Tailwind rebuilds.
Be the first to share how this product worked for you after you buy it.
More assets from the same shelf.
A production admin UI kit in HTML and Tailwind: 46 screens, 120 components, real data tables, charts and forms — all keyboard accessible with a designed dark mode.
$129.00
A complete Figma design system with variables, modes, auto-layout components and documented usage rules — the foundation a product team can build on for years rather than a pretty component sheet.
$74.00
$99.00
We use cookies to enhance your experience, analyze traffic and personalize content. You can accept all cookies, reject the optional ones, or customize your choices.
Essential
Required for core functionality such as security, sessions and saved preferences. Always active.
Analytics
Help us understand how visitors use the site so we can improve it.
Marketing
Used to deliver relevant campaigns and measure their effectiveness.
Preferences
Remember your settings such as region, language and display options.
