---
title: "Primeros pasos"
description: "Qué incluye Tanrei, cómo encajan sus piezas y por dónde empezar en tu plataforma."
url: "https://tanrei.chnotchy.com/es/getting-started/"
last_updated: 2026-10-20T01:38:40.000Z
---

# Primeros pasos

> Qué incluye Tanrei, cómo encajan sus piezas y por dónde empezar en tu plataforma.

Tanrei es un sistema de diseño que se distribuye como bibliotecas nativas. No adoptas un entorno de ejecución ni un framework multiplataforma: añades el paquete de la plataforma con la que ya trabajas y obtienes los mismos tokens, los mismos componentes y el mismo comportamiento de accesibilidad que en todas las demás.

> [!WARNING]
> **Prelanzamiento**
>
> `0.1.0-next.0` está publicado con la etiqueta de distribución (dist-tag) de npm `next`: hasta `0.1.0`, añade `@next` al nombre del paquete al instalarlo (`npm install @tanrei/web@next`). Durante los prelanzamientos 0.x no se mantiene la compatibilidad con versiones anteriores: cualquier prelanzamiento puede romper cualquier cosa, sin un periodo de obsolescencia previo, y su changeset dice qué se rompió.
>
> Aún sin publicar: SwiftUI, Jetpack Compose, Flutter y React Native. Una plataforma se publica cuando se ha puesto al día con las especificaciones actuales, y hasta entonces su CI está en pausa; mientras tanto, su guía muestra cómo se añade desde el código fuente.

## Elige tu plataforma

- [Web](https://tanrei.chnotchy.com/es/getting-started/web/): Propiedades personalizadas de CSS y Web Components. Funciona con cualquier framework, o sin ninguno.
- [React](https://tanrei.chnotchy.com/es/getting-started/react/): Componentes de React con tipos, generados a partir de los Web Components.
- [SwiftUI](https://tanrei.chnotchy.com/es/getting-started/swiftui/): Un paquete de Swift para iOS y macOS.
- [Jetpack Compose](https://tanrei.chnotchy.com/es/getting-started/compose/): Una biblioteca de Android sobre Compose Foundation, sin dependencia de Material.
- [Flutter](https://tanrei.chnotchy.com/es/getting-started/flutter/): Un paquete escrito solo en Dart que funciona con MaterialApp o sin él.
- [React Native](https://tanrei.chnotchy.com/es/getting-started/react-native/): Componentes escritos solo en TypeScript, sin módulos nativos.

## El mismo botón, de seis maneras

Cada componente se define una sola vez, en una especificación independiente de la plataforma, y se implementa con el estilo propio de cada una. La pestaña que elijas se recuerda en todo el sitio.

**Web**

```html
<tanrei-button variant="tonal">Guardar borrador</tanrei-button>
```

**React**

```tsx
<Button variant="tonal" onClick={saveDraft}>Guardar borrador</Button>
```

**SwiftUI**

```swift
TanreiButton("Guardar borrador", variant: .tonal) { saveDraft() }
```

**Compose**

```kotlin
TanreiButton(text = "Guardar borrador", onClick = ::saveDraft, variant = TanreiButtonVariant.Tonal)
```

**Flutter**

```dart
TanreiButton(variant: TanreiButtonVariant.tonal, onPressed: saveDraft, child: const Text('Guardar borrador'))
```

**React Native**

```tsx
<Button variant="tonal" onPress={saveDraft}>Guardar borrador</Button>
```

## Qué obtienes en todas las plataformas

- **Tokens.** Roles de color, escala tipográfica, forma, elevación, movimiento, estado y espaciado: valores generados desde una única fuente DTCG como propiedades personalizadas de CSS y como constantes de Swift, Kotlin, Dart y TypeScript.
- **Temas.** Claro y oscuro, cada uno con contraste estándar, medio y alto. De forma predeterminada, el tema sigue al sistema operativo; puedes forzar cualquiera de los dos ajustes para toda la aplicación o para un subárbol.
- **Componentes.** Implementaciones de las especificaciones compartidas, con las mismas variantes, los mismos estados y el mismo comportamiento de teclado en todas partes.
- **Accesibilidad de serie.** El área de pulsación mínima, un anillo de foco visible, texto que resiste una ampliación al 200% y el respeto por la preferencia de reducir movimiento vienen incorporados, en lugar de quedar a cargo de cada pantalla.

## Cómo leer esta documentación

- Los [fundamentos](https://tanrei.chnotchy.com/es/foundations/brand/) explican las ideas y las reglas.
- La [referencia de tokens](https://tanrei.chnotchy.com/es/tokens/color/) enumera todos los valores, representados directamente a partir de los archivos de tokens.
- Los [componentes](https://tanrei.chnotchy.com/es/components/) siguen una misma plantilla: descripción general, especificaciones, pautas y accesibilidad. Las tablas de esas páginas salen de la especificación del componente, así que no pueden quedar desactualizadas.
- El [estado](https://tanrei.chnotchy.com/es/status/) se genera a partir del repositorio.
- [Usar Tanrei con agentes de IA](https://tanrei.chnotchy.com/es/getting-started/ai-agents/) muestra cómo conectar el servidor MCP y da a un agente de programación las reglas para escribir tu interfaz con Tanrei.