Skip to content
NewService Map: 30 components for hosts, ports and routes
<hf-redact>Custom elementAgentFree

PII redaction

Shows text next to what a model would see, with names, emails, IBANs and phone numbers swapped for placeholders like EMAIL_1.

View as Markdown
<hf-redact>

Trytype another email address.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-redact>
Props
namesremounts
labelremounts
<HfRedact names="Anna Berger" label="Before it leaves your device" />

Installation

pnpm dlx shadcn@latest add @lumesec/hf-redact
First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-redact.json

Usage

import { HfRedact } from "@/components/lumesec/hf-redact";

export function Example() {
  return (
    <HfRedact names="Anna Berger" />
  );
}

Behaviour

Finds names, emails, IBANs and phone numbers and shows what the model would see instead. Placeholders resolve out of noise; switching off dissolves the chips back to the original text. Edit the text to try your own.

API reference

Attributes

namesReact propnamesTypestringDefaultAnna Berger

Comma-separated names to redact, matched exactly and case-sensitively.

labelReact proplabelTypestringDefaultBefore it leaves your device

Heading text. Read once on connect.

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

changeReact proponChangeDetail{ redacted: boolean, text: string }

Fires on connect, when the Redact switch changes and 160 ms after the text is edited. text is the output pane: placeholders when redacted is true, the original otherwise.

Properties

names (read-only)Typestring[]

The parsed names.

Accessibility

  • The Redact control is a button with role="switch" and aria-checked.
  • The input is a <textarea> inside a <label>, with aria-label="Your text".
  • The output pane is an aria-live="polite" region, so the whole output is announced after each change.
  • Placeholder highlights are drawn on an aria-hidden canvas; the placeholders themselves are text.
  • Reduced motion: placeholders appear without resolving out of noise, switching off shows the original text without the dissolve, and the count changes without rolling.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --border, --card, --foreground, --lumesec, --muted and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-fg, --ui-font, --ui-mono, --ui-muted, --ui-surface and --ui-track.

Notes

  • The initial text is the element's text content, read once on connect; without it a built-in sample is used.
  • Detection is a demo: simple patterns for email addresses, IBANs and international phone numbers starting with +, plus the names list. It is not a complete PII detector, and it runs in the browser.
  • Placeholders are numbered per kind in order of appearance: NAME_1, EMAIL_1, IBAN_1, PHONE_1.
  • The two panes sit side by side when each can be 240px wide and stack otherwise.

Related

<hf-approve>
Permission prompthf-approveOpen Permission prompt
<hf-diff>
Diff reviewhf-diffOpen Diff review
<hf-tree>
Changed fileshf-treeOpen Changed files
<hf-graph>
Agent graphhf-graphOpen Agent graph

Was this page helpful?