shadcn.io is not affiliated with official shadcn/ui
Resolution Ladder Complaint Contact Block for Ark UI
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 Ark 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.