header-checkout
Header Checkout
Checkout header with the logo and a secure-checkout note, and the checkout steps in a band below: every step named on a wide screen, the current one and its position on a narrow one.
States: Default, Focus
Parts
| Part | File | Does |
|---|---|---|
| HeaderCheckout | HeaderCheckout.vue | Shows the logo and a secure-checkout note, with the checkout steps in a band below. |
Styling
| Part | Recipe |
|---|---|
| HeaderCheckout | header-checkout |
| HeaderCheckout | logo |
| HeaderCheckout | hint |
Install
Writes 3 files into components/templates/header-checkout/. For agents, npx @frontic/ui docs header-checkout prints this reference as markdown; the MCP server serves the same.
- npm packages
- @lucide/vue
Built from
API reference
HeaderCheckout HeaderCheckout.vue
Shows the logo and a secure-checkout note, with the checkout steps in a band below. Renders a <header>.
| Prop | Type | Default | |
|---|---|---|---|
| steps* | CheckoutStep[] | — | |
| step* | number | — | |
| logoText | string | 'STORE' | |
| logoSrc | string | '' | |
| homeHref | string | '/' | |
| stepsLabel | string | 'Checkout steps' | |
| progressLabel | string | 'Step {step} of {total}' | |
| secureLabel | string | 'Secure Checkout' | |
| class | ClassValue | — | |
| Slot | Slot props | |
|---|---|---|
| navigation | { steps: CheckoutStep[]; step: number; } | |
| Recipe header-checkout | Sets | |
|---|---|---|
| base: header-checkout | 4 properties | |
| Recipe logo | Sets | |
|---|---|---|
| base: logo | 3 properties | |
| focus-ringshared state | 3 properties | |
| Recipe hint | Sets | |
|---|---|---|
| base: hint | 2 properties | |
Example