Return Request
Start a return in three short steps: choose items and quantities, give a reason, pick refund method and drop-off.
return-request.tsxreturn-request.css
Checking access…
Overview
Step one lists the order with checkboxes and a quantity for multiples. Step two asks why, with an optional note. Step three chooses refund to card or store credit and a drop-off option.
The refund estimate updates as items change, and the summary on the last step lists exactly what is going back.
When to use
- Order detail pages, post-purchase support.
When not to use
- Warranty claims needing photos and serials.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/return-request.json$
npx shadcn@latest add https://sundaeui.dev/r/return-request.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/return-request.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/return-request.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy return-request.tsx and return-request.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { ReturnRequest } from '@/components/sundae/return-request'
<ReturnRequest />Props
| Prop | Type | Default |
|---|---|---|
items*Order lines. | { id: string; name: string; price: number; qty: number }[] | — |
onSubmitCalled with the return. | (r) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Steps are announced as "Step n of 3"; Back keeps choices.
- Reasons and methods are radiogroups.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-rtn; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Return Request free?
- Return Request is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Return Request?
- Run npx shadcn@latest add https://sundaeui.dev/r/return-request.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Return Request support keyboard and screen readers?
- Steps are announced as "Step n of 3"; Back keeps choices. Reasons and methods are radiogroups.
- Does Return Request respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All checkout →- Pro
Tender Checkout
Checkout · Refined - Pro
Back in Stock
Checkout · Refined - Pro
Receipt Card
Checkout · Refined - Pro
Gift Card
Checkout · Refined - Pro
Bundle Builder
Checkout · Refined - Pro
Subscribe & Save
Checkout · Refined