Integration Connect

An OAuth-style connect sheet with paired logos, a permission checklist and documentation and source links.

Uv0

Connect Untitled to v0

Generate stunning UIs with AI, then customize and deploy instantly, straight from prompt to prod.

Untitled would like to

Generate UI components based on prompts

Sync generated layouts into your project

Preview and insert components in real time

Access and edit your existing v0.dev projects

Deploy updates directly to your frontend

untitledui.com/integrations/v0

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@Composable
fun IntegrationConnectScreen(
    appName: String,
    target: String,
    permissions: List<String>,
    onClose: () -> Unit,
) {
    val emerald = Color(0xFF10B981)
    Column(
        Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background).padding(20.dp),
    ) {
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Surface(color = MaterialTheme.colorScheme.onBackground,
                    shape = RoundedCornerShape(10.dp), modifier = Modifier.size(36.dp)) {}
                Icon(Icons.AutoMirrored.Filled.ArrowForward, null,
                    Modifier.padding(horizontal = 8.dp).size(16.dp))
                Surface(color = MaterialTheme.colorScheme.onBackground,
                    shape = RoundedCornerShape(10.dp), modifier = Modifier.size(36.dp)) {}
            }
            IconButton(onClick = onClose) { Icon(Icons.Filled.Close, "Close") }
        }
        Text("Connect $appName to $target", Modifier.padding(top = 16.dp),
            style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold)
        Text("Generate stunning UIs with AI, then customize and deploy instantly.",
            Modifier.padding(top = 4.dp), style = MaterialTheme.typography.bodySmall,
            color = MaterialTheme.colorScheme.onSurfaceVariant)
        HorizontalDivider(Modifier.padding(vertical = 16.dp))
        Text("$appName would like to", style = MaterialTheme.typography.labelMedium,
            fontWeight = FontWeight.SemiBold)
        permissions.forEach { p ->
            Row(Modifier.fillMaxWidth().padding(top = 12.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically) {
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Icon(Icons.Filled.Check, null, Modifier.size(16.dp), tint = emerald)
                    Spacer(Modifier.width(8.dp))
                    Text(p, style = MaterialTheme.typography.bodySmall)
                }
                Icon(Icons.Filled.ChevronRight, null, Modifier.size(14.dp))
            }
        }
        Spacer(Modifier.height(20.dp))
        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
            OutlinedButton(onClick = {}, modifier = Modifier.weight(1f)) {
                Icon(Icons.Outlined.MenuBook, null, Modifier.size(14.dp))
                Spacer(Modifier.width(6.dp)); Text("Documentation")
            }
            OutlinedButton(onClick = {}, modifier = Modifier.weight(1f)) {
                Icon(Icons.Filled.Code, null, Modifier.size(14.dp))
                Spacer(Modifier.width(6.dp)); Text("Source")
            }
        }
    }
}