Quick Start

Add the required dependencies

Open your existing Jetpack Compose or Compose Multiplatform project. Every app uses these libraries:

• Compose Unstyled provides the component behavior and primitives.
• Ripple Indication adds ripple feedback to interactive controls.
• Google Fonts loads the fonts used by the theme.
• System UI controls system-bar appearance.

Some apps need one or two more:

• Compose URI Painter loads remote images in Pairel and Vela.
• FileKit opens the photo picker in Pairel.
• kotlinx-datetime powers the calendars and streaks in Tally.

Make sure your project can resolve dependencies from google() and mavenCentral():

dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
    }
}

Add the dependencies to the module where you will put the app source. Choose your project type below, keep the lines for the app you downloaded, then sync Gradle. If you use a version catalogue, add the same coordinates there and use its aliases. Keep your existing Kotlin and Compose configuration.

dependencies {
    implementation("com.composables:composeunstyled:2.10.2")
    implementation("com.composables:ripple-indication:1.1.1")
    implementation("com.composables:google-fonts:0.3.0")
    implementation("com.composables:systembars:1.0.0")

    // Pairel and Vela
    implementation("com.composables:compose-uri-painter:1.4.0")
    // Pairel
    implementation("io.github.vinceglb:filekit-dialogs-compose:0.14.1")
    // Tally
    implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.7.1")
}

kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("com.composables:composeunstyled:2.10.2")
            implementation("com.composables:ripple-indication:1.1.1")
            implementation("com.composables:google-fonts:0.3.0")
            implementation("com.composables:systembars:1.0.0")

            // Pairel and Vela
            implementation("com.composables:compose-uri-painter:1.4.0")
            // Pairel
            implementation("io.github.vinceglb:filekit-dialogs-compose:0.14.1")
            // Tally
            implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.7.1")
        }
    }
}

Download an app

Choose how much of an app you want to use:

• A complete app: sign in with your paid account, open the app from the home page, and click Download all.
• Individual screens or components: browse Screens or Components, open the item you want, and click Download.

Unzip your download. It contains Kotlin source to add to your existing project.

Add the source to your project

Copy the downloaded Kotlin source into your module, keeping the app’s packages, such as com.composables.pairel, and the supplied theme and supporting files together:

• Jetpack Compose: copy into your app’s Kotlin source directory, usually app/src/main/kotlin/.
• Compose Multiplatform: copy into the shared Kotlin source directory, usually composeApp/src/commonMain/kotlin/.

Keep any included license and attribution notices. You can rename the packages after importing them; update the imports together.

The sample images and fonts load over the internet. For Android, add the internet permission to your app’s manifest if it is not already declared:

<uses-permission android:name="android.permission.INTERNET" />

Show your first component

With the source and dependencies in place, use its components inside the app’s theme: PairelTheme, VelaTheme, or TallyTheme. This example uses Pairel:

import androidx.compose.runtime.Composable
import com.composables.pairel.components.Button
import com.composables.pairel.components.Text
import com.composables.pairel.theme.PairelTheme

@Composable
fun ContinueButton(onContinue: () -> Unit) {
    PairelTheme {
        Button(onClick = onContinue) {
            Text("Continue")
        }
    }
}

Run your app using your project’s usual run configuration. Change the theme to match your product and replace the sample data as you connect the screens.

Component downloads use the same dependency setup. Keep the supplied theme with the component source.