Diff

Side-by-side comparison with an interactive resizer.

Import

import { Diff } from 'asterui'

Examples

Image Comparison

Compare two images with a draggable slider.

</>

import { Diff } from 'asterui'

function App() {
  return (
      <Diff
        left={<img src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" alt="Original" />}
        right={<img src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" alt="Blurred" />}
      />
    )
}

export default App

Text Comparison

Compare text with different styles.

</>

DAISY

DAISY

import { Diff } from 'asterui'

function App() {
  return (
      <Diff
        left={
          <div className="bg-primary text-primary-content grid place-content-center text-7xl font-black h-full">
            DAISY
          </div>
        }
        right={
          <div className="bg-base-200 grid place-content-center text-7xl font-black h-full">
            DAISY
          </div>
        }
      />
    )
}

export default App

Custom Aspect Ratio

Use different aspect ratios.

</>

import { Diff, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="lg">
        <Diff
          aspect="aspect-square"
          className="max-w-xs"
          left={<img src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" alt="Original" />}
          right={<img src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" alt="Blurred" />}
        />
        <Diff
          aspect="aspect-4/3"
          className="max-w-md"
          left={<img src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" alt="Original" />}
          right={<img src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" alt="Blurred" />}
        />
      </Space>
    )
}

export default App

API

Property	Description	Type	Default
left	Left side content (revealed when dragging)	React.ReactNode	-
right	Right side content (hidden when dragging)	React.ReactNode	-
aspect	Aspect ratio class	string	'aspect-16/9'
className	Additional CSS classes	string	-

Accessibility

• Keyboard accessible with tab navigation
• Uses role="img" for semantic meaning
• Arrow keys control the resizer position when focused