comparekit

Beautiful, interactive before/after image slider with horizontal/vertical orientations, customizable thumb/divider/labels, gestures (drag, double‑tap reset, long‑press), hoisted state API and polished defaults.

#ui
#state-management
#image
#gestures
#compose-multiplatform
#compose

Suggest an edit

Android JVMKotlin/Native

GitHub stars2

Authorsusmandev0

Dependents0

LicenseApache License 2.0

Creation dateabout 1 month ago

Last activity9 days ago

Latest release0.1.3 (9 days ago)

GitHub repository Wiki page

CompareKit
Before/after image comparison for Kotlin Multiplatform

Maven Central · Install · Quick Start · Changelog · License

What is CompareKit?

A Compose Multiplatform library for interactive before/after image sliders. One composable, Android + iOS, no platform-specific UI code.

Highlights

Horizontal and vertical sliders
Custom thumb, divider, labels, and gestures
Auto-scrub animation (PingPong, RevealOnce)
Coil image loading via CompareImageSource
Hoisted SliderState for full control

Platforms: Android (minSdk 24), iOS (iosArm64, iosSimulatorArm64)

Installation

Add to your shared commonMain dependencies:

implementation("io.github.usmandev0:comparekit:0.1.3")

Requirements: Kotlin 2.4+, Compose Multiplatform 1.11.1+

Version catalog setup

# gradle/libs.versions.toml
[versions]
comparekit = "0.1.3"

[libraries]
comparekit = { module = "io.github.usmandev0:comparekit", version.ref = "comparekit" }

// build.gradle.kts
commonMain.dependencies {
    implementation(libs.comparekit)
}

Quick Start

@Composable
fun PhotoComparison(before: Painter, after: Painter) {
    BeforeAfterSlider(
        before = before,
        after = after,
        modifier = Modifier
            .fillMaxWidth()
            .height(280.dp),
    )
}

Drag to compare. Starts at 50% by default.

Common Options

With state

val state = rememberCompareSliderState(initialProgress = 0.5f)

BeforeAfterSlider(
    before = before,
    after = after,
    state = state,
)

Custom look

BeforeAfterSlider(
    before = before,
    after = after,
    cornerRadius = 12.dp,
    dividerColor = Color.White,
    thumbSize = 40.dp,
    beforeLabel = { CompareLabel(text = "Before") },
    afterLabel = { CompareLabel(text = "After") },
)

Vertical slider

BeforeAfterSlider(
    orientation = SliderOrientation.Vertical,
    before = before,
    after = after,
    modifier = Modifier.fillMaxWidth().height(240.dp),
)

Auto animation

BeforeAfterSlider(
    before = before,
    after = after,
    animationMode = CompareAnimationMode.PingPong,
    autoScrubDurationMillis = 2500,
    pauseAutoScrubOnInteraction = true,
)

Mode	What it does
`None`	No auto animation (default)
`PingPong`	Loops 0 → 1 → 0
`RevealOnce`	Animates to after once, then stops

Load images with Coil

BeforeAfterSlider(
    before = CompareImageSource.url("https://example.com/before.jpg"),
    after = CompareImageSource.url("https://example.com/after.jpg"),
)

Gestures

Drag — move the slider
Double tap — reset to center
Long press — onLongPress callback

BeforeAfterSlider(
    before = before,
    after = after,
    onDoubleTap = { /* reset feedback */ },
    onLongPress = { /* action */ },
)

API at a glance

API	Purpose
`BeforeAfterSlider`	Main composable
`SliderState`	Hoisted progress (`0f`–`1f`)
`rememberCompareSliderState()`	Create state
`CompareAnimationMode`	Auto-scrub modes
`CompareImageSource`	Coil / Painter images
`CompareKitDefaults`	Default styling values

Package: com.usmandev.comparekit.beforeafterslider

Sample App

git clone https://github.com/usmandev0/comparekit.git
cd comparekit
./gradlew :androidApp:installDebug

The demo covers basic usage, Coil loading, customization, labels, gestures, orientation, live controls, and auto animation.

Roadmap

Planned	Status
Zoom, magnifier, video comparison	Planned
Desktop & Web targets	Planned
Accessibility improvements	Planned

See CHANGELOG.md for release history.

Contributing

Fork the repo
Create a feature branch
Open a Pull Request

./gradlew :CompareKit:compileAndroidMain
./gradlew :CompareKit:compileKotlinIosSimulatorArm64

License

Apache License 2.0 — see LICENSE.

Author: Usman (@usmandev0)

If CompareKit helps your project, consider starring the repo on GitHub.