shadcn.io is not affiliated with official shadcn/ui
Resolution Ladder Complaint Contact Block for React
A complaint form in a card in card: four resolution cards one per row, each with its handling time, an incident date, an order number checked against its shape, and a switch that adds a Manager review badge.
Installation
Overview
A complaint section for React with Base UI, built as a card in card: a muted frame on +-marked corners around one raised panel. At the start of the panel the visitor picks how to put it right from four radio cards, one per row (a refund, a replacement, store credit or an apology only), each showing the time it takes, and a line under them repeats the time of the chosen one. At the end are the day it happened in a Date Input, an order number in the HG-000000 shape, a name, an email, what happened, and a switch that asks for a manager review and adds a "Manager review" Badge to the form and to the confirmation. Submitting checks every field (a day still to come and a malformed order number are refused with their reason) and focuses the first problem; a valid complaint turns into a confirmation that repeats what was asked for. It's built from Radio Group, Date Input, Switch, Badge, Field, Frame, Guides, Shine Button and Button, with your theme's tokens for every colour. The handling times are example figures. For retailers, marketplaces and services that want complaints that say what fix the customer wants.
FAQ
Are the handling times real promises?
No: they are example wording in RESOLUTIONS. Replace the four entries with your published times, and the cards, the line under them and nothing else will follow. The confirmation never repeats a time, so the form does not claim one that nothing keeps.
How is the date checked?
The Date Input accepts any day, and problems refuses a day later than today. Today is read in the browser once the page has loaded, so there is no fixed month or year in the file and the server and the browser agree on the first render.
What does the order number accept?
HG- and six digits, in either case; "hg-482913" is shown as HG-482913 in the confirmation. Anything else gets a message that says the shape. Change ORDER_SHAPE for your own numbering.
What does the manager review switch do?
It only adds the "Manager review" Badge, at the end of the card's heading and again in the confirmation, and records escalate in details. The badge keeps its space when it is off, so switching never moves the form.
Related
- Pro
Support Channels Contact
Support and feedbackA support desk for a help desk tool: a band of four channels with their response times above a form with a subject, a normal or urgent priority and a message, which checks itself and confirms in place.
- Pro
Warranty Meter Contact
Repairs and claimsA warranty claim where the purchase date works out your cover on one line: a meter of the 24 months used, the month cover ends, and issue types that change with it.
- Pro
Reason First Cancellation Contact
Support and feedbackA cancellation form that asks why first: four reason cards, an offer panel that follows the reason (20% off, a smaller plan, a pause), and a confirm box, note and submit that are always there so an offer never blocks cancelling.
- Pro
Tappable device repair Contact
Repairs and claimsA repair request for a phone shop where four buttons on a drawn phone pick the parts, and a model menu lists an example price for each.
- Pro
Order Lookup Contact
Support and feedbackAn order desk that looks the order up first: a number and email, a read-only timeline with dates counted from today, then a help form that wakes once an order is found.
- Pro
Star Rating Feedback Contact
Support and feedbackA product feedback form for a roadmap tool in a card in card: five named stars with a word that follows the choice, switch-on topic chips and a message, ending in a confirmation that lists what was chosen.