121 Pro components and page blocks

Get Pro
uibrik

Updated

Checkout Flow

Pro

Preview

Customize

Bag
Tax rate0.08
USD
Free delivery at250
Max quantity9
Photo radius12px
Payment delay1400ms

Installation

Pro

Checkout Flow is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/checkout-flow

Usage

import { CheckoutFlow } from "@/components/uibrik/checkout-flow/checkout-flow";​const defaultItems = [  {    id: "pines",    title: "Morning pines",    variant: "Print · 30 × 40 cm",    price: 48,    quantity: 1,    image: "/registry/checkout-flow/sunlit-forest.webp",    alt: "Sun rays through a pine forest",  },  {    id: "lake",    title: "Copper lake",    variant: "Print · 50 × 70 cm",    price: 56,    quantity: 2,    image: "/registry/checkout-flow/lake-reflection.webp",    alt: "Autumn trees reflected in a still lake",  },  // …1 more];​const defaultAddresses = [  { id: "home", label: "Home", name: "Maya Chen", street: "48 Elm Street", city: "Portland", region: "OR", postcode: "97205", country: "USA" },  { id: "studio", label: "Studio", name: "Maya Chen", street: "210 Water Ave, Suite 4", city: "Portland", region: "OR", postcode: "97214", country: "USA" },];​const defaultCards = [  { id: "visa", brand: "visa", last4: "4242", expiry: "08/28" },  { id: "mc", brand: "mastercard", last4: "1881", expiry: "02/27" },];​const delivery = [  { id: "standard", label: "Standard", detail: "3–5 business days", price: 0, eta: "Mon, Nov 17" },  { id: "express", label: "Express", detail: "Next business day", price: 12, eta: "Wed, Nov 12" },];​const promoCodes = {  WELCOME10: { percent: 10 },  FREESHIP: { freeShipping: true },};​<CheckoutFlow  defaultStep="bag"  taxRate={0.08}  currency="USD"  locale="en-US"  freeShippingThreshold={250}  simulateDecline={false}  maxQuantity={9}  photoRadius={12}  sectionIcons  title="Bag"  checkoutLabel="Checkout"  payLabel="Pay"  doneLabel="Done"  simulateDelay={1400}  defaultItems={defaultItems}  defaultAddresses={defaultAddresses}  defaultCards={defaultCards}  delivery={delivery}  promoCodes={promoCodes}  emptyText="Your bag is empty"  onItemsChange={(items) => {}}  onAddressesChange={(addresses) => {}}  onCardsChange={(cards) => {}}  onPay={(order) => {}}  onDone={(order) => {}}/>

Where to use Checkout Flow

  • Online stores

    The whole checkout stays on one card, so shoppers never lose sight of what they are paying for.

    Pairs with Cart Flight

  • Mobile commerce

    Address, delivery and payment each fit on one line until tapped, which keeps a small screen short.

  • Subscriptions and add-ons

    Every total rolls as quantities or delivery change, so the effect of each choice on the price is clear.

    Pairs with Pricing Calculator

Props

CheckoutFlow
defaultStep
Type "bag" | "details"
"bag"
Step shown on mount.
taxRate
Type number
0.08
Sales tax as a fraction of subtotal plus shipping. 0 hides the row.
currency
Type "USD" | "EUR" | "GBP" | "JPY" | "INR"
"USD"
ISO 4217 code used to format prices.
locale
Type string
"en-US"
Locale used to format prices.
freeShippingThreshold
Type number
250
Subtotal after discounts that makes delivery free, with a meter in the bag. 0 turns it off.
simulateDecline
Type boolean
false
Make the first simulated payment fail, to see the error state.
maxQuantity
Type number
9
Most of one item in the bag.
photoRadius
Type number
12
Corner radius of the item photos. 28 gives circles.
sectionIcons
Type boolean
true
Show an icon beside address, delivery and payment.
title
Type string
"Bag"
Heading over the items.
checkoutLabel
Type string
"Checkout"
Primary button on the bag step. The subtotal follows it.
payLabel
Type string
"Pay"
Primary button on the details step. The total follows it.
doneLabel
Type string
"Done"
Button on the receipt.
simulateDelay
Type number
1400
How long the simulated payment takes when there's no `onPay`.
defaultItems
Type { id: string; title: string; variant?: string; price: number; quantity: number; image: string; alt?: string }[]
SAMPLE_ITEMS
Items on mount. The card keeps its own state from then on.
onItemsChange
Type (items: CheckoutItem[]) => void
–
Called after a quantity changes, or an item is removed or restored.
defaultAddresses
Type { id: string; label: string; name?: string; street: string; city: string; region?: string; postcode?: string; country?: string }[]
SAMPLE_ADDRESSES
Saved addresses on mount. The first is picked. Shoppers can edit, add and delete them in place.
onAddressesChange
Type (addresses: CheckoutAddress[]) => void
–
Called after an address is added, edited or deleted.
defaultCards
Type { id: string; brand: CardBrand; last4: string; expiry?: string }[]
SAMPLE_CARDS
Saved cards on mount. Shoppers can add a card (number, expiry and CVC in one field) or remove one.
onCardsChange
Type (cards: CheckoutCard[]) => void
–
Called after a card is added or removed. Only the brand, last four and expiry are kept.
delivery
Type { id: string; label: string; detail?: string; price: number; eta?: string }[]
SAMPLE_DELIVERY
Delivery speeds. `price` 0 shows Free and `eta` is printed on the receipt.
promoCodes
Type Record<string, { percent?: number; amount?: number; freeShipping?: boolean }>
SAMPLE_PROMOS
Codes the promo field accepts, matched without case. The samples are WELCOME10 and FREESHIP. Empty hides the field.
onPay
Type (order: CheckoutOrder) => void | Promise<unknown>
–
Called with the items, address, delivery, card and totals when Pay is pressed. Return a promise to keep the spinner until it settles; a rejection's message is shown above the button. Without it, payment is simulated.
onDone
Type (order: CheckoutOrder) => void
–
Called with the placed order when Done is pressed on the receipt, after the card resets to the bag.
emptyText
Type string
"Your bag is empty"
Shown when the last item is removed.
className
Type string
–
Classes for the card.