# Checkout stepper
> Checkout steps with an elastic progress line, ticks that pop in and content that slides the right way.
- Category: [Navigation](https://library.aimran.es/components/navigation)
- Built with: React + Motion
- Live editor: https://library.aimran.es/blocks/checkout-stepper
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham
## Where to use it
Paying is where online shops lose people, and a clear sense of how much is left helps. This checkout stepper takes someone from cart to shipping, payment and confirmation, with the main button changing to “Pay €48.90” on the right step. It also fits any multi‑step form, like a booking or a signup.
Keep it to three to five steps, more and the dots get cramped. Completed steps can be clicked to go back, future ones cannot, which avoids half‑filled orders. If the card is narrow, hide the labels and let the numbers do the work.
## Code
### React (Motion)
```tsx
import { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { Check } from "lucide-react";
const CHECKOUT_STEPS = [
{
label: "Cart",
title: "Your cart",
body: "Aura headphones + case",
meta: "2 items",
},
{ label: "Shipping", title: "Delivery", body: "Calle Mayor 14, Madrid", meta: "Thursday 12" },
{ label: "Payment", title: "Payment", body: "Visa ending in 4242", meta: "No fees" },
{
label: "Done",
title: "Order confirmed",
body: "Receipt sent by email",
meta: "#A-20931",
},
];
interface CheckoutStepperProps {
color?: string;
showLabels?: boolean;
}
export default function CheckoutStepper({
color = "#635bff",
showLabels = true,
}: CheckoutStepperProps) {
const [step, setStep] = useState(0);
const [dir, setDir] = useState(1);
const reduce = useReducedMotion();
const last = CHECKOUT_STEPS.length - 1;
const current = CHECKOUT_STEPS[step]!;
const done = step === last;
const go = (i: number) => {
setDir(i >= step ? 1 : -1);
setStep(i);
};
const primary = step === 2 ? "Pay €48.90" : done ? "New order" : "Continue";
const slide = reduce ? 0 : 28;
return (
);
}
```
## Prompt for AI assistants
Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):
````text
I want to add the “Checkout stepper” block (Navigation) from AIMRAN Library to my project.
## What it is
Checkout steps with an elastic progress line, ticks that pop in and content that slides the right way.
## Chosen settings
- Color: #635bff
- Labels: yes
## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with React + TypeScript, with framer-motion for the animation and lucide-react for the icons. If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.
## Reference code
```tsx
import { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { Check } from "lucide-react";
const CHECKOUT_STEPS = [
{
label: "Cart",
title: "Your cart",
body: "Aura headphones + case",
meta: "2 items",
},
{ label: "Shipping", title: "Delivery", body: "Calle Mayor 14, Madrid", meta: "Thursday 12" },
{ label: "Payment", title: "Payment", body: "Visa ending in 4242", meta: "No fees" },
{
label: "Done",
title: "Order confirmed",
body: "Receipt sent by email",
meta: "#A-20931",
},
];
interface CheckoutStepperProps {
color?: string;
showLabels?: boolean;
}
export default function CheckoutStepper({
color = "#635bff",
showLabels = true,
}: CheckoutStepperProps) {
const [step, setStep] = useState(0);
const [dir, setDir] = useState(1);
const reduce = useReducedMotion();
const last = CHECKOUT_STEPS.length - 1;
const current = CHECKOUT_STEPS[step]!;
const done = step === last;
const go = (i: number) => {
setDir(i >= step ? 1 : -1);
setStep(i);
};
const primary = step === 2 ? "Pay €48.90" : done ? "New order" : "Continue";
const slide = reduce ? 0 : 28;
return (