Pro
Redact scan
Checks a prompt for personal data before it is sent. A scan line passes down the text and marks each email, phone number, card number and name with its kind as it reaches it; Redact then wipes a bar across each, and each one can be shown again.
pnpm dlx shadcn@latest add @caliper/redact-scanWhen to use
Use it for
- AI composers and support tools that send user text to a model or a third party.
- Exports and shares where personal data should be removed first.
Skip it when
- Treating it as complete protection; the built-in detection is a first pass. Pass your own names list and keep server-side checks.
- Text people are still writing; scan when they are about to send.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Marks land with the line
- Each mark is timed to the scan line reaching its row, so the found items appear in reading order.
Styling
- Amber, then ink
- Found items are amber with their kind above them; redacted items are an ink bar with the kind inside, so the two states never look alike.
Usage
- What is sent
onRedactreceives the text with each item replaced by its kind in brackets;findEntitiesandredactTextare exported for the server.
Installation
pnpm dlx shadcn@latest add @caliper/redact-scan
Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source. It is built from RedactScan, findEntities and redactText.
import { RedactScan, findEntities, redactText } from "@/components/ui/redact-scan"
The worked example comes with Pro
The 32-line example behind the preview opens here, ready to copy.
- 602 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
RedactScan
component
Also accepts the native props of its root element and a ref.
findEntities
component
No props of its own; it accepts the native props of its root element.
redactText
component
No props of its own; it accepts the native props of its root element.
Accessibility
It is built on native elements and keeps aria-pressed, aria-label, aria-hidden and aria-live in step with state. Changes that matter are announced through a live region.
No custom key handling; Tab and the native activation keys do the work.
Motion
It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.
Related
- Prompt inputA message box with attachments, suggestions, commands and a stop button.
- Secret fieldA secret shown only on purpose: reveal it and the characters settle into place, and it masks itself again on a visible timer. Copying never needs it revealed.
- Scan progressA document being read: a scan line passes down the page and each field appears as the line reaches where it was found.