Saasflare UI
Components

Image Swap Hover

Crossfades between a primary and alternate image on hover. Product and team-photo flourish.

Installation

npx shadcn@latest add https://ui.saasflare.io/r/image-swap-hover.json
pnpm add @saasflare/ui

Usage

Loading…
"use client"import { ImageSwapHover } from "@saasflare/ui"/** A product image that crossfades to an alternate view on hover. */export function Demo() {    return (        <div className="w-full max-w-xs">            <ImageSwapHover                src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=800"                hoverSrc="https://images.unsplash.com/photo-1600185365926-3a2ce3cdb9eb?w=800"                alt="Sneaker — front and side view"            />            <p className="mt-3 text-center text-sm text-muted-foreground">Hover to see the alternate view</p>        </div>    )}

API Reference

Prop

Type

On this page