WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text Editor
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselImage CropperImage LightboxLocation MapQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryThemeCredits

Blocks

Checkout Page

BlocksCheckout Page
Automation Builder PageCRM Contact Page
Live props
State
defaultStage
defaultCheckoutStep
guest
loading
Content
freeShippingThreshold
customerEmail
locale
currency
Behavior
shopHref
termsHref
privacyHref
registerHref
animateIn
Layout
stickyBar
Appearance
ctaTone
tone
radius
Code
import { CheckoutPage } from "@/components/blocks/checkout-page"

<CheckoutPage />
Pro

v1.0.0·Added in 1.0.0

The Summit Market shop from the cart to Order placed: an editable cart, four checkout steps and the order confirmation.

A slim three step bar under the header shows where you are (Cart, Delivery and payment, Confirmation). In the cart the steppers change quantities (hold to repeat, a stock hint at the limit, the trash at 1), the × or a swipe left on touch removes a line and leaves an undo row that counts down for 5 seconds, and Save for later moves a line to a saved list below with Move to cart and Delete. The free delivery bar fills as the cart grows and turns green at the threshold. Have a coupon? opens the code field: FALL15, FREESHIP, SAVE50 and BIG200 apply after a short check with a popping tick, EXPIRED is rejected with its date, and a code that stops applying after a quantity change is removed with a note. The summary, the savings badge and the total follow every change. Continue to delivery (or the phone bar with the total, shown while the summary button is off screen) opens the checkout: saved addresses or a new one with the state picker (Romanian counties and localities under a ro locale), a company invoice with the tax ID check, the delivery methods with the locker list, the payment methods, and the review with the terms. Back to cart returns with everything kept. Place order places it; the card ending 0002 is refused with the bank's message on the review step. The button turns into a check, the confirmation slides in with a bouncy tick, the thank you, the email, Track order, Continue shopping, an account hint for guests and the order tracker. You might also like is a swipeable rail whose Add to cart buttons add to the cart. Every stage change moves focus to its heading and is announced; stages slide in the direction you go, a fade under reduced motion. On phones the cart is one column, the checkout is a full screen app with its own footer and the confirmation buttons are full width.

Add to a project

npx wingo-ui@latest add checkout-page

Pro item: the CLI needs a Pro account. See plans

Dependencies

motionlucide-reactalertbadgebuttoncarouselcart-drawercheckout-stepscoupon-inputempty-statelisting-cardorder-trackerprogressquantity-stepperskeletonsticky-cta-bartoastcommercedate-utilsmotionnavigationnumber-formatrelative-timero-locationstonesui-config

Files

  • components/blocks/checkout-page.tsx
  • components/blocks/checkout-page-data.ts

See also

Checkout stepsCart drawerOrder trackerCoupon inputMarketplace ShellPricing PageMarketplace Home PageListing Detail Page
PreviousAutomation Builder PageNext CRM Contact Page