Todos os componentes

Before And After Slider

Before And After Slider é um componente de media para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.

Motion Primitives MIT media

O que é

Before And After Slider é um componente de media para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Não precisa de pacotes além do que o projeto já tem

Licença

Este componente vem de Motion Primitives e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Before And After Slider

app/docs/image-comparison/image-comparison-spring.tsx
import {
  ImageComparison,
  ImageComparisonImage,
  ImageComparisonSlider,
} from '@/components/core/image-comparison';

export function ImageComparisonSpring() {
  return (
    <ImageComparison
      className='aspect-16/10 w-full rounded-lg border border-zinc-200 dark:border-zinc-800'
      enableHover
      springOptions={{
        bounce: 0.3,
      }}
    >
      <ImageComparisonImage
        src='/mp_dark.png'
        alt='Motion Primitives Dark'
        position='left'
      />
      <ImageComparisonImage
        src='/mp_light.png'
        alt='Motion Primitives Light'
        position='right'
      />
      <ImageComparisonSlider className='w-0.5 bg-white/30 backdrop-blur-xs' />
    </ImageComparison>
  );
}

Componentes parecidos