Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Storefront blocks

Pro

Return Request Storefront Block for React Aria

A returns portal: recent items with a 28-day window against a fixed today, a reason Select per ticked item, a refund in whole cents with return postage, and a QR label with the return number and a Print button.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Take things back without a form to chase, with this returns portal for React with React Aria. A header names the page and the shop, Willet, an apparel maker, and its 28-day rule. In a hairline frame with a plus mark on each corner, the first cell lists recent items, each with a drawn thumbnail, the order, a Checkbox and when its window closes (the purchase day plus 28 against one fixed today); an item past it has a dash instead of a box and says when its window closed. A ticked item opens a Native Select for the reason in a slot the row already holds, and "Changed my mind" takes a typed postage fee off the refund. The side cell, under the items on a phone, adds up the refund in whole cents, and on Create label (the one Shine Button) draws a QR Code with the return number and a drop-off line; Print opens the browser's print dialog. It's built from Checkbox, Native Select, QR Code, Button, Shine Button and Guides, with a CSS entrance only. For an order page, a clothing shop or a returns help page.

FAQ

How is the return window worked out?

It is the item's bought date plus WINDOW (28) days, compared with the fixed AS_OF date; both are ISO strings and the arithmetic is Date.UTC, so it reads the same on the server and in every time zone. An item past its window can't be ticked and shows the day it closed.

How is the refund worked out?

The prices of the ticked items, minus each item's postage fee from its reason, in whole cents. Only "Changed my mind" carries a fee ($3.95, typed in REASONS); the rest are free. The side cell shows the items, the postage and the refund, and the numbers update as you tick or change a reason.

What does Create label do?

It checks that something is ticked and every ticked item has a reason; if not, it says which and focuses the first reason. Otherwise it draws the QR code from the return number (the order and a letter per item) and the label cell fills in place. Changing a tick or a reason voids the label, and the status line says to create it again. In this demo no label is issued, the code carries only a made-up string, and nothing is refunded.

Is Print real?

Yes: it calls window.print() once a label exists. Add a print stylesheet that shows only the label if you want a clean page, and replace the QR value with the code your carrier scans.

How do I use my own items?

Edit ITEMS (a name, variant, order, price in cents, a bought date and a code letter for the return number), REASONS (a label and a fee in cents) and WINDOW. Enforce the same window and fees on your server.

Is it accessible?

Each checkbox is named by its item and described by its window, each reason Select is named by its item, a missing reason is announced as an alert, the QR code has a text alternative and the return number is written out beside it. The side cell stacks under the items on a phone.

All 100 storefront blocks