CompareImage – Once UI

Image

<CompareImage
  radius="xl"
  border
  overflow="hidden"
  aspectRatio="16 / 9"
  leftContent={{ src: "/images/backgrounds/1.jpg", alt: "Image 1" }}
  rightContent={{ src: "/images/backgrounds/2.jpg", alt: "Image 2" }}
/>

The CompareImage component supports ReactNode for the content.

ReactNode

Left

Right

<CompareImage
  radius="xl"
  border
  overflow="hidden"
  aspectRatio="16 / 9"
  leftContent={{ src: "/images/backgrounds/1.jpg", alt: "Image 1" }}
  rightContent={{ src: "/images/backgrounds/2.jpg", alt: "Image 2" }}
/>

	Type	Default
leftContentrequired What shows on the left of the divider.	SideContent	—
rightContentrequired What shows on the right.	SideContent	—
aspectRatio Frame ratio, held as the width changes.	string	—
unoptimized Skip the framework image optimizer.	boolean	—
…and every FlexProps prop	inherited	—