Diffs

API Docs

Interactive comparison components with a sliding divider to compare before and after states. Perfect for showcasing image edits, text changes, design iterations, and any visual or content differences with smooth transitions.

Text / HTML Diff

Diffs are best when they show two mostly similar items that have only a few differences.

Preview

LocoMotion

Code

= daisy_diff(css: "aspect-video max-w-[800px] max-h-[450px]") do |diff|
  - diff.with_item do
    .bg-primary.text-primary-content.grid.place-content-center.text-6xl.lg:text-8xl.font-black
      LocoMotion

  - diff.with_item do
    .bg-base-200.grid.place-content-center.text-6xl.lg:text-8xl.font-black
      LocoMotion

Image Diff

Here is an example using two images. One is blurred, and the other is the full-resolution image.

Preview

Code

= daisy_diff(css: "aspect-video max-w-[800px] max-h-[450px]") do |diff|
  - diff.with_item do
    = image_tag("landscapes/desert.jpg")

  - diff.with_item do
    = image_tag("landscapes/desert.jpg", class: "blur-xs")

Made with by Profoundry .

Diffs

Text / HTML Diff

Image Diff

Docs

Guides

Hero

Daisy