Compare

Slide to compare any two pieces of content - images, designs, code, or custom elements

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/compare.json"

Compare.vue

StarField.vue

Drag handle with custom content

AutoPlay

Custom Content with AutoPlay

Prop Name	Type	Default	Description
`firstImage`	`string`	`""`	URL of the first image
`secondImage`	`string`	`""`	URL of the second image
`firstImageAlt`	`string`	`"First image"`	Alt text for first image
`secondImageAlt`	`string`	`"Second image"`	Alt text for second image
`class`	`string`	`""`	Additional classes for the component
`firstContentClass`	`string`	`""`	Classes applied to first content wrapper
`secondContentClass`	`string`	`""`	Classes applied to second content wrapper
`initialSliderPercentage`	`number`	`50`	Initial position of slider (0-100)
`slideMode`	`"hover" \| "drag"`	`"hover"`	Interaction mode for the slider
`showHandlebar`	`boolean`	`true`	Show/hide the handle bar
`autoplay`	`boolean`	`false`	Enable/disable autoplay
`autoplayDuration`	`number`	`5000`	Duration of autoplay cycle in ms

Event Name	Payload	Description
`update:percentage`	`number`	Emitted when slider position changes (0-100)
`drag:start`	-	Emitted when dragging starts
`drag:end`	-	Emitted when dragging ends
`hover:enter`	-	Emitted when mouse enters component
`hover:leave`	-	Emitted when mouse leaves component

Slot Name	Default Content	Description
`first-content`	`<img>` element if `firstImage` prop is provided	Content shown on the left/first side of the comparison. Has full access to component width/height.
`second-content`	`<img>` element if `secondImage` prop is provided	Content shown on the right/second side of the comparison. Has full access to component width/height.
`handle`	Default slider handle with dots icon	Custom handle for the slider. Automatically positioned at the dividing line. Should handle positioning with absolute positioning.

On This Page