CompareImage

Updated: May 4, 2025

View on GitHub

Image

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

The CompareImage component supports ReactNode for the content.

ReactNode

Left

Right

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

Prop	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	—

ComponentsCarousel

ComponentsContextMenu

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club