Catálogo

Todos los componentes

Todo lo que necesitas para construir una superficie de producto completa, en iOS y Android.

10 Primitivos
41 Componentes
1022 Pruebas unitarias
100% TypeScript

Primitivos 10

Box

  • Layout

View que recibe tokens de espaciado, color, radio y elevación como props.

  • Props de padding y margin
  • Fondo con color del tema
  • Radio y 6 niveles de elevación

Stack

  • Layout

Pilas verticales y horizontales con gaps basados en tokens.

  • VStack y HStack
  • Gap desde tokens de espaciado
  • Props align, justify y wrap

Text

  • Tipografía

Primitivo tipográfico vinculado a la escala tipográfica del tema.

  • 18 variantes tipográficas
  • Tokens de color del tema
  • Colores de acento legibles

Heading

  • Tipografía

Texto con rol de encabezado asociado a los estilos de titular.

  • Niveles 1-3 más 2 tamaños display
  • Rol de encabezado para lectores de pantalla

PressableScale

  • Movimiento

Pressable con un escalado spring de Reanimated al pulsar.

  • Escala configurable
  • Respeta el movimiento reducido
  • Anillo de foco de teclado

MarqueeText

  • Movimiento
  • Tipografía

Texto de una línea que solo se desplaza cuando desborda.

  • Detección de desbordamiento
  • Velocidad y pausa configurables
  • Estático con movimiento reducido

PaginationDots

  • Navegación

Indicador animado de página o paso.

  • El punto activo se ensancha
  • Anuncia el paso actual

SectionLabel

  • Tipografía

Pequeño título superior en mayúsculas con rol de encabezado.

  • Mayúsculas por defecto
  • Transformación y color personalizados

SystemIcon

  • Layout

Conjunto de iconos dibujados que se ve igual en iOS y Android.

  • 12 glifos
  • Los chevrons se reflejan en RTL
  • Oculto para lectores de pantalla

Componentes 41

ActionTile

  • Acciones

Mosaico pulsable con un chip de icono tintado y una etiqueta.

  • 5 tonos
  • Escalado spring al pulsar
  • Háptico suave al pulsar

Avatar

  • Visualización de datos

Avatar circular que muestra una imagen o iniciales.

  • 4 tamaños (sm-xl)
  • Iniciales a partir de un nombre
  • Fondo de iniciales personalizado

Badge

  • Feedback

Contador, etiqueta corta o punto de estado.

  • 5 variantes de color
  • Tope de desbordamiento (99+)
  • Modo punto

BottomSheet

  • Overlays

Sheet modal que se desliza desde abajo.

  • Arrastra hacia abajo para cerrar
  • Partes Header, Body y Footer
  • Evita el teclado
  • Gesto de escape del lector de pantalla

BottomTabBar

  • Navegación

Barra de pestañas inferior con una píldora activa animada.

  • Insignias por pestaña
  • Roles de pestaña con estado seleccionado
  • Inset de área segura

Button

  • Acciones

Botón de acción principal con variantes, tamaños, estado de carga e iconos.

  • 5 variantes
  • 3 tamaños (sm/md/lg)
  • Estado de carga
  • Pulsación háptica

Card

  • Layout

Superficie tematizada que se vuelve pulsable al recibir un handler.

  • 4 niveles de elevación
  • 3 tamaños de densidad
  • Slots de cabecera y pie

Checkbox

  • Formularios

Checkbox con etiqueta opcional.

  • 2 tamaños
  • Rol y estado de checkbox
  • Háptico suave al alternar

Chip

  • Formularios

Chip seleccionable o etiqueta de filtro.

  • 3 variantes y 3 formas
  • Icono inicial
  • Layout ChipGroup

ConfettiOverlay

  • Movimiento

Explosión de confeti celebratoria que nunca bloquea los toques.

  • Número de partículas configurable
  • Se dispara al mostrarse
  • Respeta el movimiento reducido

Countdown

  • Visualización de datos

Cuenta atrás que se actualiza sola hasta una fecha límite.

  • 4 formatos
  • Unidades localizables
  • Etiqueta y callback al expirar

DatePickerInput

  • Formularios

Campo de fecha, hora o fecha y hora.

  • 3 modos
  • Fechas mínima y máxima
  • Se puede borrar
  • Alternativa de solo lectura sin el selector

DateRangePickerInput

  • Formularios

Campos de fecha de inicio y fin para un rango.

  • Cada extremo limita al otro
  • Error independiente por extremo
  • Se puede borrar

EmptyState

  • Feedback

Estado vacío centrado con icono, título, mensaje y acción.

  • 3 tamaños
  • Slot de acción
  • Rol de resumen

ErrorBoundary

  • Feedback

Error boundary con un fallback para reintentar.

  • Reset keys
  • Render de fallback personalizado
  • HOC withErrorBoundary

FieldError

  • Formularios

Texto de error que se muestra bajo los campos de formulario.

  • Rol de alerta
  • Región en vivo cortés (polite)

FieldLabel

  • Formularios

Etiqueta de campo en mayúsculas con marca de obligatorio.

  • Marca de obligatorio
  • Se anuncia como obligatorio

HeaderBar

  • Navegación

Cabecera de pantalla con botón atrás, título y acciones.

  • Títulos normal y grande
  • Título centrado o a la izquierda
  • El chevron atrás se refleja en RTL

IconButton

  • Acciones

Botón circular solo con icono.

  • 4 variantes y 3 tamaños
  • Hit slop integrado
  • Háptico suave

Input

  • Formularios

Input de texto con etiqueta, error y borde de foco.

  • Etiqueta, error y obligatorio
  • Reenvía ref y props de TextInput
  • Soporte multilínea

InputPrompt

  • Overlays
  • Formularios

Diálogo multiplataforma para introducir texto.

  • Alert.prompt del sistema en iOS
  • Modal tematizado en Android
  • Botones localizados

KeyboardLiftedFooter

  • Layout

Barra de acciones inferior que se mantiene por encima del teclado.

  • Sube con el teclado
  • Activado por defecto en Android

ListHeader

  • Tipografía

Cabecera de lista o de página en cuatro tamaños.

  • 4 tamaños
  • Opciones de transformación de texto
  • Rol de encabezado

ListItem

  • Visualización de datos

Fila de lista con icono, subtítulo, valor y chevron.

  • Chevron cuando es pulsable
  • Estilo destructivo
  • Slots personalizados

ListSection

  • Visualización de datos

Sección de lista agrupada con título y nota al pie.

  • Tarjeta agrupada o filas separadas
  • Título y nota al pie

ListSwitchItem

  • Visualización de datos
  • Formularios

Fila de lista con un switch integrado.

  • Switch integrado
  • Icono y subtítulo

Modal

  • Overlays

Diálogo centrado con backdrop, título y pie.

  • Partes Header, Body y Footer
  • Cierre al tocar el backdrop
  • Gesto de escape del lector de pantalla

ProgressBar

  • Feedback

Barra de progreso horizontal determinada.

  • Color semántico o personalizado
  • Rol de barra de progreso con valor
  • Altura configurable

Radio

  • Formularios

Opción de radio individual con etiqueta opcional.

  • Selección controlada
  • Rol de radio
  • Háptico suave

ScreenContainer

  • Layout

Envoltura de pantalla con área segura y ancho máximo en tabletas.

  • Áreas seguras superior e inferior
  • Contenido centrado en tabletas
  • Padding opcional

SearchBar

  • Formularios

Campo de búsqueda con debounce y botón de limpiar.

  • Debounce integrado
  • Botón de limpiar
  • Slots izquierdo y derecho

SegmentedControl

  • Formularios

Control segmentado de selección única estilo iOS.

  • Grupo de radio para lectores de pantalla
  • Valores tipados
  • Háptico suave

Select

  • Formularios
  • Overlays

Selector de un solo valor con las opciones en un bottom sheet.

  • Selector con BottomSheet
  • Iconos en las opciones
  • Etiqueta, error y obligatorio

SettingsRow

  • Visualización de datos

Fila de ajustes con un recuadro de icono redondeado.

  • Recuadro de icono
  • Estilo destructivo
  • Variante SettingsSwitchRow

Skeleton

  • Feedback

Placeholder de carga animado.

  • Preset de Card
  • Respeta el movimiento reducido
  • Etiqueta de carga localizada

Spinner

  • Feedback

Indicador de actividad centrado con etiqueta opcional.

  • 2 tamaños
  • Se anuncia a los lectores de pantalla

StatTile

  • Visualización de datos

Mosaico de estadística con etiqueta, valor y leyenda.

  • 5 tonos
  • 3 tamaños
  • Cifras tabulares

Switch

  • Formularios

Switch nativo tematizado con etiqueta y subtítulo.

  • Toda la fila es pulsable
  • Háptico suave
  • Etiqueta leída junto al subtítulo

TextArea

  • Formularios

Input multilínea con etiqueta y error.

  • Altura mínima en líneas
  • Etiqueta, error y obligatorio

Toast

  • Feedback

Toast imperativo que se monta una sola vez en la raíz de la app.

  • 5 variantes
  • Posición superior o inferior
  • Botón de acción
  • Anuncios para lectores de pantalla
Expo React Native 0.84+ iOS Android TypeScript Accessible