Before / After Image Viewer

Compare an original image with a transformed result — a two-panel grid with checkerboard transparency (shipped inline) or a segmented Original / Enhanced toggle. Pairs with useImageToImage / useSegmentImage.

Library

LocalMode

Framework

React

Type

component

License

MIT

Install

npx shadcn add @localmode/ui/ui/media-vision/before-after-image-viewer

Files

• apps/ui/registry/localmode/media-vision/before-after-image-viewer/before-after-image-viewer.tsx
• apps/ui/registry/localmode/lib/utils.ts

Source

https://github.com/LocalMode-AI/LocalMode

Categories

• Image Components
• React Image Components
• Tailwind CSS Image Components
• Image Compare Components
• React Image Compare Components
• Tailwind CSS Image Compare Components
• Media Components
• React Media Components
• Tailwind CSS Media Components

More from LocalMode

• Background Remover Block
• Image Enhancer Block
• Object Detector Block
• Bounding Box Overlay
• Artifact
• Chart Artifact
• Code Diff Viewer
• Data Table Artifact
• Audio Scrub Player
• Mic Selector
• Streaming Speech Panel
• Synced Transcript Viewer