A phone mockup with a product page and a wallet-style payment sheet that rises from the bottom. Payment is confirmed by dragging a slider, or with the arrow keys and Enter, followed by a success state inside the sheet.
Mobile checkout
A wallet-style sheet that rises over the product page, fills itself from saved details and confirms with a single slide. No forms, no new page.
npx shadcn@latest add https://hyperblur.dev/r/checkout-mobile-sheet.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/checkout-mobile-sheet.tsx.
import { CheckoutMobileSheet } from "@/components/hyperblur/checkout-mobile-sheet"
<CheckoutMobileSheet defaultOpen={false} onConfirm={(values) => console.log(values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Mobile checkout" | Label above the title. Empty hides it. |
| title | string | "Checkout in one gesture" | Section heading. |
| subtitle | string | Paragraph under the heading. | |
| points | { value: string; label: string }[] | 3 stats | Figures under the copy. |
| merchant | string | "Aria Audio" | Store name on the product page and sheet. |
| product | { name: string; subtitle: string; price: number; colors: { name: string; value: string }[] } | Aria Over-Ear | Product shown on the phone. Color swatches tint the illustration. |
| shipping | number | 0 | Shipping cost added to the total. |
| cardLabel | string | "Harbor Card 4242" | Saved card shown in the sheet. |
| address | string | "88 Larkin St, San Francisco" | Saved shipping address shown in the sheet. |
| defaultOpen | boolean | true | Whether the sheet starts open. |
| currency | string | "USD" | ISO currency code. |
| onConfirm | (values: { product: string; color: string; total: number }) => void | Called after the slide completes. | |
| accent | string | "#ff6b4a" | Slider, eyebrow and success color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |