shadcn.io is not affiliated with official shadcn/ui
Personal Data Check File Upload Block for Ark UI
A support-ticket text box that finds card numbers (Luhn-checked), SSNs, emails and phone numbers as you type, highlights them, lists masked previews, derives a classification and redacts.
Installation
Overview
Catch personal data in support text before it is shared, with this file upload panel for React with Ark UI. It is the check page of Maskwell, a data-hygiene tool for support teams. A text box holds a sample ticket you can edit, and four detectors run on it as you type: a US Social Security number pattern, payment card numbers that pass the Luhn check, email addresses and phone numbers. Each finding is highlighted in the text by a layer behind it, listed in a native table with a masked preview and its position, and has its own Redact Button. A Badge gives the classification, Internal, Confidential or Restricted, worked out from the kinds found. The foot's Shine Button is Redact all, and Reset sample brings the ticket back. A file dropped on the File Upload strip is listed by name only. The frame's bands are ruled by Guides. For support desks, intake forms and any app that wants a pattern check before text leaves the team.
FAQ
Is this a compliance check?
No, it is a pattern check and says so: "Pattern check only, run in this tab." It finds the shapes it knows and nothing else, so a name, an address or a card number written in words passes unseen. It makes no claim about GDPR, PCI or any other rule. Treat the classification as a prompt for a person to look, not a verdict.
How are card numbers told apart from other numbers?
A card candidate is a run of 13 to 19 digits, optionally spaced or hyphenated, and it only counts when it passes the Luhn check. The sample holds a card that passes and an order number of the same length that does not, so only the card is found. SSNs also have to be possible: no area 000, 666 or 9xx, no group 00 and no serial 0000.
What does Redact do to the text?
It replaces the matched characters with a masked form in the text box itself: the last four digits of a card, an SSN or a phone number stay ("•••• •••• •••• 1111"), and an email keeps its first letter and its domain. Redact all masks every finding at once, and a single Redact masks one. The masked text no longer matches the detectors, so the list empties. Reset sample puts the original ticket back.
How do the highlights line up with the text?
Behind the text box sits a copy of the same text in the same font, size and wrapping with the findings marked, and its scroll follows the box's. The layer is hidden from assistive tech, and the same findings are in the table, which is the accessible list. If you change the font of the text box, change the layer's with it.
What stays local, and how do I wire it to a server?
All of it. The text is state in the block, the detectors run in the tab and nothing is sent, and a dropped file is only listed by name. In your app, run the same detectors on the server before saving a ticket, keep the masked version, and treat the table as a review step.