# Before and after
> Before-and-after slider over a mock document: personal data is highlighted on the left and blacked out on the right.
- Element: `<hf-compare>`
- React: `import { HfCompare } from "@/components/lumesec/hf-compare"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-compare.json
- Page: https://elements.lumesec.ai/components/pixel-hd/compare



Live preview: https://elements.lumesec.ai/view/hf-compare

```html
<hf-compare></hf-compare>
```

## Installation

```bash
npx shadcn@latest add @lumesec/hf-compare
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/hf-compare.json
```

## Usage

React:

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

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

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/hf-compare.js"></script>

<hf-compare></hf-compare>
```

## 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.

| Event   | React prop | Detail                 | Description                                                                                                        |
| ------- | ---------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `input` | `onInput`  | `{ 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](/docs/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.