---
title: "Jetpack Compose"
description: "Añade Tanrei a una aplicación de Android construida con Jetpack Compose."
url: "https://tanrei.chnotchy.com/es/getting-started/compose/"
last_updated: 2026-10-20T01:38:40.000Z
---

# Jetpack Compose

> Añade Tanrei a una aplicación de Android construida con Jetpack Compose.

La biblioteca de Compose proporciona funciones composables, un `TanreiTheme` y objetos de tokens generados. Depende de Compose Foundation y no de una biblioteca de componentes Material, así que no introduce un segundo sistema de diseño en tu aplicación.

> [!WARNING]
> **Aún no publicado**
>
> `io.github.chnotchy:tanrei` todavía no está en Maven Central. Una plataforma se publica cuando se ha puesto al día con las especificaciones actuales, y hasta entonces la CI de Jetpack Compose está en pausa. «Desde el código fuente», más abajo, muestra cómo se añade el paquete desde [chnotchy/tanrei](https://github.com/chnotchy/tanrei); «Cuando se publique» muestra cómo se instalará entonces.

## Instalación

### Desde el código fuente

> [!WARNING]
> **Hoy no se compila**
>
> La biblioteca de Compose todavía no se ha puesto al día con las especificaciones y los tokens actuales: su código fuente se escribió para una versión anterior del código de tokens generado y no compila con el de hoy. Su CI está en pausa hasta que se ponga al día, y la [página de estado](https://tanrei.chnotchy.com/es/status/) marca sus componentes como _rezagados_. Los pasos siguientes muestran cómo se añade a una aplicación; funcionarán cuando la biblioteca se haya puesto al día.

Clona el repositorio junto a tu aplicación e incluye su compilación de Gradle, que contiene la biblioteca como el proyecto `:tanrei`:

```kotlin
// settings.gradle.kts
includeBuild("../tanrei/packages/compose") {
  dependencySubstitution {
    substitute(module("io.github.chnotchy:tanrei")).using(project(":tanrei"))
  }
}
```

```kotlin
// build.gradle.kts
dependencies {
  implementation("io.github.chnotchy:tanrei")
}
```

### Cuando se publique

```kotlin
// build.gradle.kts
dependencies {
  implementation("io.github.chnotchy:tanrei:<version>")
}
```

## Uso

Envuelve tu contenido en `TanreiTheme` una sola vez, cerca de la raíz:

```kotlin
import io.github.chnotchy.tanrei.components.TanreiButton
import io.github.chnotchy.tanrei.theme.TanreiTheme
import io.github.chnotchy.tanrei.tokens.TanreiButtonVariant

@Composable
fun DeployScreen(isDeploying: Boolean, onDeploy: () -> Unit) {
  TanreiTheme {
    TanreiButton(
      text = "Desplegar",
      onClick = onDeploy,
      variant = TanreiButtonVariant.Filled,
      enabled = !isDeploying,
    )
  }
}
```

La convención de Compose es el indicador en positivo `enabled`, y eso es lo que usa Tanrei; la propiedad `disabled` de la especificación corresponde a su inverso. Una sobrecarga con slot acepta una lambda `content` cuando necesitas algo más que una etiqueta de texto.

## Tema y contraste

De forma predeterminada, `TanreiTheme` sigue el tema oscuro del sistema y el ajuste de contraste del sistema. Ambos se pueden fijar:

```kotlin
TanreiTheme(theme = TanreiThemeMode.Dark, contrast = TanreiContrast.High) {
  App()
}
```

## Fuentes

De forma predeterminada, la escala tipográfica se resuelve con la familia de fuentes predeterminada de la plataforma. Pasa tus propias `TanreiFontFamilies` a `TanreiTheme` para usar Inter (y Noto Sans JP, Roboto Mono) desde los recursos de fuentes de tu aplicación. Los estilos de texto se nombran por nivel (`TanreiTheme.tokens.typescale.heading2`, `.body`, `.label`; `.toTextStyle()` convierte uno en un `TextStyle` de Compose), y `TanreiTheme.tokens.typescale.heading1.emphasized()` es el mismo estilo con su peso más el paso de énfasis de la familia de títulos (fuera de la composición, `emphasized(system.typescale.emphasis)`).