Saltar al contenido
menumenu tanreiexpand_morecontrasttranslate
tanreiexpand_more
Primeros pasosWebReactSwiftUIJetpack ComposeFlutterReact NativePreajustesTu propio sistema de diseñoUsar Tanrei con agentes de IAMarcaTokens de diseñoSistemas de diseño y personalizaciónTheme StudioColorTipografíaIconosFormaElevaciónMovimientoEstados de interacciónComportamientoDiseño de páginaAccesibilidadTextosTokens de colorTokens de la escala tipográficaTokens de formaTokens de elevaciónTokens de movimientoTokens de estadoTokens de espacio y de medidaComponentesBotónBotón de acción principalBotón segmentadoGrupo de botonesBotón con menúBarra de herramientasBotón de copiarCasilla de verificaciónBotón de opciónInterruptorChipMenúControl deslizanteCampo de control deslizanteCalendarioDateTimePickerGrupo de camposGrupo de botones de opciónGrupo de casillas de verificaciónSelectCampo de selecciónBarra de menúsSubida de archivosSelector de archivos AvanzadoZona de soltar archivosEntrada de texto AvanzadoCampo de textoCampo de chipsCampoCuadro combinado AvanzadoCampo de cuadro combinadoEntrada numérica AvanzadoCampo numéricoEntrada de color AvanzadoCampo de colorEntrada de código de un solo uso AvanzadoCampo de código de un solo usoEntrada de texto incrustada AvanzadoCuadro de redacción de chatTarjetaDivisorCapa modal AvanzadoDiálogoListaFila de listaHoja inferiorHoja lateralCarruselBloque de códigoTablaPopoverPasosAcordeónLista de descripcionesFiguraEstructura de la aplicaciónCabecera de páginaVista de árbolLínea de tiempoVista previa de imágenesTirador de tamañoMarco redimensionableÁrea de desplazamientoInsigniaIndicador de progresoMedidorContador animadoIndicador de cargaSnackbarTooltipAtajo de tecladoTagCódigo en líneaCalloutAvatarEstado vacíoGrupo de tagsEsqueletoElemento de archivoMuestraTexto en marquesinaPestañasVista de pestañasBarra de la aplicaciónBarra de navegaciónPanel de navegaciónBúsquedaEnlacePaginaciónEnlaces anterior y siguienteIndicador de pasosRuta de navegaciónTabla de contenidoTarjeta de enlaceMenú FABEstadoCómo se construye TanreiCómo contribuirLicencia y atribución
InicioPrimeros pasosPrimeros pasos

Primeros pasos

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

content_copyVer en Markdown

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.

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

WebPropiedades personalizadas de CSS y Web Components. Funciona con cualquier framework, o sin ninguno.ReactComponentes de React con tipos, generados a partir de los Web Components.SwiftUIUn paquete de Swift para iOS y macOS.Jetpack ComposeUna biblioteca de Android sobre Compose Foundation, sin dependencia de Material.FlutterUn paquete escrito solo en Dart que funciona con MaterialApp o sin él.React NativeComponentes 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.

<tanrei-button variant="tonal">Guardar borrador</tanrei-button>
 
<Button variant="tonal" onClick={saveDraft}>Guardar borrador</Button>
 
TanreiButton("Guardar borrador", variant: .tonal) { saveDraft() }
 
TanreiButton(text = "Guardar borrador", onClick = ::saveDraft, variant = TanreiButtonVariant.Tonal)
 
TanreiButton(variant: TanreiButtonVariant.tonal, onPressed: saveDraft, child: const Text('Guardar borrador'))
 
<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 explican las ideas y las reglas.
  • La referencia de tokens enumera todos los valores, representados directamente a partir de los archivos de tokens.
  • Los componentes 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 se genera a partir del repositorio.
  • Usar Tanrei con agentes de IA muestra cómo conectar el servidor MCP y da a un agente de programación las reglas para escribir tu interfaz con Tanrei.

Código fuente e incidencias en GitHub