Image Compare

Display

Before/after image slider with draggable divider and label overlays.

Image Compare — drag to reveal before/after

⇔

OriginalProcessed

Instalação via CLI

$ npx kikitocn add image-compare

Exemplo de uso

Image CompareExample.tsx

import { ImageCompare } from "@/components/ui/cn/image-compare/ImageCompare";

export function ImageCompareExample() {
  return (
    <ImageCompare />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`before*`	`string`	—	URL da imagem 'antes'
`after*`	`string`	—	URL da imagem 'depois'
`beforeLabel`	`string`	`'Before'`	Label da imagem de antes
`afterLabel`	`string`	`'After'`	Label da imagem de depois
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientação do divisor
`initialPosition`	`number`	`50`	Posição inicial do divisor (%)
`width`	`number \| string`	—	Largura do componente
`height`	`number \| string`	—	Altura do componente
`className`	`string`	—	Classes CSS extras

Voltar para Display

Carregando…