Checkout
The payment sequence that must minimise typing, survive failure, and end in an unambiguous confirmation.
Commerce & Checkout · 8 checks · 29 resources
Before you ship
8- 01Native payment methods — Apple Pay and Google Pay as primary options, completing purchase with a single biometric tap
- 02Persistent order summary — item list, quantities and total available throughout the flow, visible or one tap away
- 03Minimal form fields — only the fields genuinely required to complete the purchase
- 04Autofill capabilities — shipping address fields that support iOS and Android autofill
- 05Keyboard types per field — numeric for card numbers and CVV, date or numeric pad for expiry
- 06Checkout progress — a clear step indicator for a multi-step experience
- 07Error recovery — after a payment failure, return to the payment step with entered data intact and a clear explanation
- 08Order/payment confirmation — a confirmation screen with summary, payment method and amount
Resources that help you build this
29- daisyUI · 68 pure-CSS Tailwind components as semantic class names, MIT, with 35 built-in themes
- HTMLrev Free Shadcn Templates · 120 free shadcn/ui templates and starters, indexed on one page
- Mobbin · Searchable library of real mobile and web app screens, organized into user flows
- Mobbin MCP · MCP server that gives coding agents 621,500+ real shipped app screens
- MUI · React component suite: Material UI, MUI X data grid, charts and date pickers
- Refero · Searchable library of real product screens, user flows and design systems, with an MCP server
- remocn · 282 Remotion components for product-demo video, installed by the shadcn CLI
- ReUI · 1,052 free shadcn components, 502 pro blocks, 10 templates, hosted MCP
- UX Patterns for Devs · 92 UX patterns with accessibility rules, an MCP server and llms.txt
- abtest.design · 47 documented A/B tests from Blinkist, Duolingo, Headspace, Uber and others, each with the winning variant and the measured lift
- BestWebsiteTemplate · 881 Webflow, Framer and Shopify templates, each scored out of 10 by 11 named reviewers
- Craftwork · 40k+ design assets and templates, reachable from an MCP server and a Claude skill
- Flowbite · 56+ MIT Tailwind components with vanilla-JS behaviour, plus a paid 450+ block library
- GoodUI · 75 UI ideas and 141 patterns backed by 639 replicated A/B tests
- shadcn design · Paid Figma kit for shadcn/ui, plus coded Pro Blocks and a Figma-to-code plugin
- Shadcn Space · 401+ shadcn blocks, 393+ component variants and 10 site templates, freemium
- shadcn Studio · 800+ shadcn blocks, 16 templates, themes, MCP server and Figma-to-code
- Shadcnblocks · 1,837 paid shadcn blocks and 19 Next.js and Astro templates, lifetime license
- shadcncraft · Paid shadcn/ui registry plus a 1:1 Figma kit, 8 styles across Radix and Base UI
- Shopify Polaris · Shopify's admin design system, now shipped as framework-agnostic web components
- Tailwind Plus · 500+ paid Tailwind UI blocks, 13 Next.js templates and the Catalyst React kit
- FigComponents · 1,619 copy-paste Figma components, 1,002 of them free, CC BY 4.0
- Flowponent · 1,091 copy-paste Webflow cloneable sections, 335 of them free
- Growth.Design · 53 product UX case studies as comics, plus 106 psychology principles
- Manifest UI · 39 MIT shadcn blocks sized for ChatGPT Apps and MCP app surfaces
- moumenlab · shadcn registry of 13 motion-first interaction components, MIT, React 19 + Tailwind v4
- Nicely Done · Searchable index of ~199k SaaS screens, 12.5k flows and 29k UI components
- Page Flows · Screen recordings of real user flows from shipped iOS, Android, web, and email apps
- Shoogle · Search engine across 277 shadcn registries, with an MCP and CLI namespace