Diff

A draggable slider that reveals two panes side-by-side. Drag the handle to compare before/after content — images, text, or any HTML.

Image comparison

Drag the handle left and right to reveal the sharp vs blurred version.

diff (images)

Any content can go inside the slots — here two styled text blocks show a theme color contrast.

diff (text)

NEOKIT

Use the aspect prop to set any Tailwind aspect ratio. Default is aspect-16/9.

diff aspect-square

AFTER

BEFORE

Compare two UI states — useful for design system documentation.

diff (theme colors)

Dark Mode

Accent colour on dark background

Light Mode

Same content on light background