Diff is a component for visually comparing two pieces of content side-by-side. It is useful for showing before/after states, image comparisons, or any scenario where visual diffing is needed.
A simple before/after image comparison using the Diff component. Use the one and two slots to provide the content to compare.
Diff is a standalone component.
The Diff component displays two content areas for comparison, typically as before/after or side-by-side. The first slot is shown as the left (or top) item, and the second as the right (or bottom) item. Includes a draggable resizer for interactive comparison.
| Diff Slots | Description |
|---|---|
one | The first content area to compare (e.g., "before" image or state). |
two | The second content area to compare (e.g., "after" image or state). |