Diff

DaisyUI

Diff shows a side-by-side comparison of two items with a draggable slider.

Basic Diff

Drag the slider to compare before and after.

Text Diff

Compare styled text content.

DAISY

Code Example

use rsxui::components::{Diff, DiffItem1, DiffItem2, DiffResizer};

use rsx_macros::rsx;

let html = rsx! {

    <Diff class="aspect-16/9">

        <DiffItem1>

            <img src="before.jpg" alt="Before" />

        </DiffItem1>

        <DiffItem2>

            <img src="after.jpg" alt="After" />

        </DiffItem2>

        <DiffResizer />

    </Diff>

};

RsxUI

DaisyUI Components for Rust

Created by Isak Rickyanto@2026