Before and after

Before-and-after slider over a mock document: personal data is highlighted on the left and blacked out on the right.

<hf-compare>· loading

Trydrag the handle.

Installation

pnpm dlx shadcn@latest add @lumesec/hf-compare

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-compare.json

Usage

import { HfCompare } from "@/components/lumesec/hf-compare";

export function Example() {
  return (
    <HfCompare />
  );
}

Behaviour

A document before and after redaction, split by a draggable handle. Works with the arrow keys too.

API reference

Events

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

inputReact proponInputDetail{ position: number }

Fires on every divider move, from 0 (left) to 1 (right). Also fires once on connect with the start position, 0.55.

Keyboard

Keys	Action
ArrowLeft / ArrowRight	Move the divider by 5%.
Home / End	Move the divider to the left or right edge.

Accessibility

The handle is a button with role="slider", aria-label="Compare position", aria-valuemin="0", aria-valuemax="100" and aria-valuenow from 0 to 100.
The canvas has role="img" and aria-label Document before and after redaction.
Pressing anywhere on the image moves the divider there.
Reduced motion: the divider jumps to the pointer instead of easing after it.

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, --foreground and --lumesec.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border and --ui-fg.

Notes

The document is generated in code; its content and the Original and Redacted labels cannot be changed.
position in the event runs from 0 to 1, while aria-valuenow runs from 0 to 100.
The image is 236px tall and fills the width.

<hf-card>

Media cardhf-card

<hf-hero>

Herohf-hero

<hf-reveal>

Secret fieldhf-reveal

<hf-marquee>

Logo marqueehf-marquee

Was this page helpful?

Related