Hand-drawn, animated illustrations & empty states for Compose Multiplatform.

Sketchy is a Kotlin Multiplatform library of sketch-style, line-art artwork — the kind of warm, human illustration you'd want for onboarding flows and empty states — drawn entirely on Canvas, animated out of the box, and fully themeable to match your app. It runs on Android, iOS, desktop and the web from one commonMain source set.

iosX64 (the Intel simulator) is not supported — Compose Multiplatform no longer publishes artifacts for it.

https://github.com/user-attachments/assets/b5ab7d8a-45b9-43c3-ab53-1d2f6dc9a673

Most illustration libraries ship static SVGs or Lottie files — dependencies outside Compose's own rendering pipeline, hard to restyle, and rarely animated in a way that feels alive. Sketchy takes a different approach:

• Pure Compose, zero image assets. Every illustration is vector line-art drawn with DrawScope, so it's crisp at any size and ships as pure Kotlin — no drawables, no Lottie JSON, no binary bloat.
• Animated by default. Each scene has its own small, purposeful motion — a sweeping stopwatch hand, a ringing bell, a heartbeat pulse — not just a generic fade-in. Turn it off with a single animate = false when you want a static frame instead.
• Hand-drawn by default, painted on request. Every scene renders as a pure outline sketch — ink lines on a transparent canvas, nothing filled in, lifted only by small accent marks. Pass colorful = true and the same scene is painted in full: shaded surfaces, contact shadows, highlights. No second set of artwork, and never a background of its own either way.
• Genuinely reskinnable. Both catalogs take color, size, and copy as plain parameters (SketchyColors, Dp, String, TextStyle) — no XML theming, no design-system lock-in. It doesn't even depend on Material.

Every one of the 75 scenes draws two ways from the same code — a colourless hand-drawn outline by default, or fully painted with colorful = true.

A demo ships alongside the library as a live, searchable catalog of every illustration and empty state — the fastest way to browse what's available and copy the exact usage snippet for whatever you pick. Its UI lives in :composeApp and is shared across all four platforms:

./gradlew :composeApp:run                          # desktop
./gradlew :androidApp:installDebug                 # Android
./gradlew :composeApp:wasmJsBrowserDevelopmentRun  # web
open iosApp/iosApp.xcodeproj                       # iOS (run from Xcode)

Sketchy never ships two sets of artwork. Each scene is written once, and the colorful flag decides how the palette hands its colours back to the drawing code:

Neither mode ever paints a background of its own, so a scene drops onto whatever surface your screen already has.

How it works: when a scene is outlined, every surface, light and material slot of the palette reads back as Color.Transparent, so the fill simply isn't painted and what survives is the ink outline of the same shape. That's why colorful is one boolean and not a second catalog.

Sketchy is live on Maven Central as io.github.ali0092:sketchy — the version badge above always reflects the latest published release.

A multiplatform consumer adds it to commonMain — mavenCentral() is already declared by default in a Kotlin Multiplatform project's repositories, no extra repository setup required:

// build.gradle.kts
kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("io.github.ali0092:sketchy:1.0.8")
        }
    }
}

An Android-only consumer adds it the usual way:

// app/build.gradle.kts
dependencies {
    implementation("io.github.ali0092:sketchy:1.0.8")
}

Sketchy is also mirrored on JitPack, kept at the same version and coordinate as Maven Central, as a fallback in case Maven Central isn't reachable from your network:

dependencies {
    implementation("io.github.ali0092:sketchy:1.0.8")
}

with the JitPack repository declared in settings.gradle.kts:

dependencyResolutionManagement {
    repositories {
        mavenCentral()
        maven("https://jitpack.io")
    }
}

import com.sketchy.library.illustrations.Sketch
import com.sketchy.library.illustrations.SketchyIllustration

SketchyIllustration(
    sketch = Sketch.PlanTasks,
    modifier = Modifier.size(280.dp)
)

Every Sketch scales to whatever size you give it and animates on a loop by default. Pass animate = false to freeze it on its resting frame — handy for lower-power devices or a still hero image.

// Colourless — the default. Ink outlines, a few accent marks, nothing filled in.
SketchyIllustration(
    sketch = Sketch.MorningCoffee,
    modifier = Modifier.size(280.dp),
)

// Colourful — the same scene, painted: shaded surfaces, shadows, highlights.
SketchyIllustration(
    sketch = Sketch.MorningCoffee,
    modifier = Modifier.size(280.dp),
    colorful = true,
)

colorful works on every illustration and every empty state, and it's an ordinary parameter — drive it from a setting, from isSystemInDarkTheme(), or from a single app-wide constant:

SketchyEmptyState(
    state = EmptyState.EmptyCart,
    colorful = !isSystemInDarkTheme(),
)

The six Featured scenes are the elaborate ones — a whole scene rather than a single motif, one source file each, built on the shading primitives the painted mode uses. They're the ones worth giving a full-bleed hero slot:

SketchyIllustration(
    sketch = Sketch.ReadingNook,   // or WarmWelcome, MorningCoffee, HomeWorkspace, GroceryRun, RainyWindow
    modifier = Modifier.fillMaxWidth().aspectRatio(1f),
    colorful = true,
)

They take exactly the same parameters as every other Sketch — animate, colorful and colors all behave identically — and they render colourless just as happily if that's your look. Because they carry the most detail, they also gain the most from colorful = true, so they're the best place to start if you're deciding between the two modes.

colors is a plain SketchyColors parameter — override any subset of it and every stroke, fill, and sparkle in the scene repaints to match, no XML themes or design-system lock-in required.

A colourless scene only ever draws from the first block of the palette — ink, inkSoft, inkFaint and the four accents (accent, accentGreen, accentBlue, accentRed). The light and material slots below them are what the colourful version fills with, so reskinning a colourless app means changing the ink and the accents and nothing else:

import com.sketchy.library.SketchyColors
import com.sketchy.library.illustrations.Sketch
import com.sketchy.library.illustrations.SketchyIllustration

SketchyIllustration(
    sketch = Sketch.BuildBetterHabits,
    modifier = Modifier.size(280.dp),
    colors = SketchyColors(
        ink = MaterialTheme.colorScheme.onSurface,
        accent = MaterialTheme.colorScheme.primary,
        accentBlue = MaterialTheme.colorScheme.secondary,
    )
)

If you use colorful = true, the rest of the palette is worth a look too — it's grouped so you can retint a whole painted scene a few slots at a time:

Overriding a material slot while a scene is colourless is harmless — it's simply never read.

import com.sketchy.library.SketchyColors
import com.sketchy.library.emptystates.EmptyState
import com.sketchy.library.emptystates.SketchyEmptyState

SketchyEmptyState(
    state = EmptyState.NoInternet,
    colors = SketchyColors(
        ink = MaterialTheme.colorScheme.onSurface,
        accent = MaterialTheme.colorScheme.primary,
    ),
    illustrationSize = 180.dp,
    title = "You're offline",
    subtitle = "We'll sync everything as soon as you're back online.",
    titleStyle = MaterialTheme.typography.titleMedium,
    subtitleStyle = MaterialTheme.typography.bodyMedium,
)

Every knob — color, size, copy, typography — is an ordinary parameter with a sensible default. Omit title/subtitle entirely (pass null) for an icon-only illustration. SketchyColors is the same type for both catalogs, so one palette restyles your entire onboarding flow and empty-state set at once.

A handful of situations — a network error, an empty result set, "all caught up" — are drawn in more than one visual family, so you pick whichever fits your app instead of being stuck with one look:

• The original catalog — no prefix (NoInternet, EmptyCart, AllDone, …). The default, general-purpose style, covering four categories: Connectivity & Errors, Content & Search, Saved & Commerce, and Everyday & Productivity.
• Signboard* — road signage as the scene's setting: signals, warning and stop signs, cones, boards.
• Network* — network hardware only: routers, servers, cables — no abstract icon glyphs.
• LinedMan* — a single minimal outline figure. The body never changes; only the eyes and mouth do, to carry the mood.

Every prefixed family names its entries {Family}{Situation}, so the family is right there in the enum: LinedManLoading, NetworkNoInternet, SignboardNetworkError. Where a situation is covered by more than one family, here's the cross-reference:

Swapping styles is a one-line change — same parameters, same colors override, same optional title/subtitle:

// The default style
SketchyEmptyState(state = EmptyState.NoInternet)

// The same situation, drawn as network hardware instead
SketchyEmptyState(state = EmptyState.NetworkNoInternet)

// ...or as the minimal Lined Man figure
SketchyEmptyState(state = EmptyState.LinedManNoConnection)

Every other entry (EmptyCart, LinedManWelcome, NetworkNoList, …) is currently exclusive to its family — a good spot to contribute a matching scene in a different style.

Every entry below draws both ways — colourless by default, painted with colorful = true.

Sketchy/
├── library/    # The published artifact — pure Compose, no app dependencies
│   └── src/commonMain/kotlin/com/sketchy/library/
│       ├── SketchyColors.kt           # Shared reskinnable palette (both catalogs)
│       ├── SketchyStyle.kt            # Outlined vs. painted — how one scene renders both ways
│       ├── illustrations/
│       │   ├── SketchyIllustrations.kt  # Sketch enum, SketchyIllustration composable
│       │   ├── Featured*.kt             # …the elaborate full scenes, one file each
│       │   └── Onboarding*.kt           # …grouped by category, 2-5 scenes each
│       ├── emptystates/
│       │   ├── EmptyState.kt            # EmptyState enum, SketchyEmptyState composable
│       │   └── EmptyStates*.kt          # …grouped by category
│       └── utils/
│           ├── Extensions.kt            # DrawScope drawing extensions (stroke, sketchLine, …)
│           ├── Painting.kt              # Fills, shading, brushes, limbs — the painted half
│           └── Utils.kt                 # Ink/accent color constants, wave(), DesignSize
├── composeApp/ # Demo UI — searchable, categorized gallery of everything above,
│   │           # shared across all four platforms
│   ├── src/commonMain/kotlin/   # The catalog screens
│   ├── src/androidMain/kotlin/  # Clipboard + Material You actuals
│   ├── src/jvmMain/kotlin/      # Desktop entry point (main.kt)
│   ├── src/iosMain/kotlin/      # iOS entry point (MainViewController.kt)
│   └── src/wasmJsMain/kotlin/   # Web entry point (main.kt)
├── androidApp/ # Thin Android shell — Activity, manifest, launcher resources.
│               # Separate because AGP 9 won't apply com.android.application
│               # alongside the Kotlin Multiplatform plugin.
└── iosApp/     # Xcode project hosting the shared Compose UI

New illustrations are very welcome. A new scene is just an internal DrawScope function plus one enum entry — no boilerplate beyond that:

1. Pick a category (or propose a new one) and add an entry to the Sketch or EmptyState enum with its display copy and category.
2. Write the scene as internal fun DrawScope.drawYourScene(t: Float, colors: SketchyStyle) in the matching illustrations/Onboarding*.kt or emptystates/EmptyStates*.kt file, reusing the shared extensions from utils/Extensions.kt (stroke, sketchLine, sketchCircle, twinkle, wave, groundHint/groundLine) for a consistent hand-drawn look — and always paint from colors.* (never the raw Ink/Accent constants in utils/Utils.kt) so the scene stays themeable.
3. Wire it into the when dispatcher and open a PR.

Please keep new scenes framework-agnostic (no Material/Material3 imports inside :library) so the empty-state API stays usable in any design system.

Sketchy is available under the MIT License.

Muhammad Ali