# Quick Start

> Add an app template to your project and show your first component.

## 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()`:

```kotlin title="settings.gradle.kts"
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.

### Jetpack Compose

```kotlin title="app/build.gradle.kts"
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")
}
```

### Compose Multiplatform

```kotlin title="composeApp/build.gradle.kts"
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](https://composables.com/index.md), and click **Download all**.
- **Individual screens or components:** browse [Screens](https://composables.com/screens.md) or [Components](https://composables.com/components.md), 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:

```xml title="AndroidManifest.xml"
<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:

```kotlin title="Your app"
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.