STORYBOOK FOR ANDROID JETPACK COMPOSE

Your Compose UI.
Ready to explore.

Turn your components into an interactive, in-app catalog. Explore real UI states, tweak parameters, and give your design system a place to live.

Get started View on GitHub

v1.3.0-alpha03 Pre-release/ Available on Maven Central

ComposiumScreen()

One composable. Anywhere in your app.

Composium Android catalog with nested scene groups, thumbnails, and a sample button — Browse scenes. Change values. See what happens.

Native Jetpack ComposeKSP discovery · optionalAndroid minSdk 24Apache 2.0 · open source

A WORKSPACE FOR YOUR UI

Less setup.
More exploration.

Keep the components, states, and edge cases you care about together—inside the app you already build.

01 / CATALOG

Every state, in one place.

Organize scenes into searchable, nested groups. Automatic thumbnails and custom badges make your catalog easy to browse.

Explore scenes

02 / CONTROLS

Change it. See it.

Edit text, toggle booleans, and pick enum or sealed options at runtime. Bring your own choices for custom types.

Meet the parameters

03 / ENVIRONMENT

Check the edge cases.

Try dark theme, larger fonts, different display sizes, and RTL. Review your UI under the conditions your users experience.

Adjust the environment

FROM COMPONENT TO CATALOG

Compose code.
A whole new playground.

Scenes are ordinary Compose code, with a few controls added. Your components keep their existing API.

Add the dependencies

Use google() and mavenCentral(), set compileSdk 36, and add the library and KSP processor.

Describe a scene

Wrap your component in scene { }. Declare values with param() and let Composium build the controls.

Open your catalog

Embed ComposiumScreen() in a debug route, activity, or internal tools screen. KSP discovers your annotated scenes.

Follow the full setup

Prefer manual registration? Skip KSP.

build.gradle.kts

plugins {
    id("com.google.devtools.ksp") version "<ksp-version>"
}

dependencies {
    implementation("io.github.oleginvoke:composium:1.3.0-alpha03")
    ksp("io.github.oleginvoke:composium-processor:1.3.0-alpha03")
}

Choose a KSP2 version compatible with your Kotlin and AGP. See requirements →

See a complete button scene

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import oleginvoke.com.composium.ComposiumScene
import oleginvoke.com.composium.scene

@ComposiumScene
internal val buttonScene by scene(
    group = "Buttons",
    name = "Primary",
) { contentPadding ->
    val enabled: Boolean by param(true)
    val label: String by param("Continue")

    Box(Modifier.padding(contentPadding)) {
        Button(onClick = {}, enabled = enabled) {
            Text(label)
        }
    }
}

ONE CATALOG, MANY REASONS

For the people
behind the pixels.

Design systems

A living reference for components, tokens, and their variations.

QA & visual review

Make loading, error, empty, and disabled states easy to reproduce.

Everyday development

A focused sandbox for the UI you are working on right now.

START WITH ONE SCENE

Give your UI room to play.

Small integration. A catalog that grows with your app.

Build your first catalog

Your Compose UI.Ready to explore.

Less setup.More exploration.