Kit de UI para Expo · React Native61 componentesFunciona en Expo Gov1.1.1

Sumak UI

Botones, formularios, hojas, avisos, pestañas y modo oscuro, ya diseñados y construidos. Elige un color de marca y tu app se ve terminada desde el primer arranque, en iOS, Android y la web.

  • Pantalla de inicio en modo oscuro: lista de personas con buscador, iniciales de colores, filtros Todos y En línea, y barra de pestañas
  • Menú lateral abierto sobre el inicio en modo oscuro: perfil, opciones de navegación con un contador de avisos y cerrar sesión
  • Detalle de una persona en modo oscuro con imagen de portada, etiquetas, biografía, acordeones y acciones
  • Ajustes con controles del tema en vivo: color de marca, modo, estilo de encabezado, degradado y sombra
  • Perfil en modo oscuro con estadísticas, un anillo de progreso, chips y filas de la cuenta
  • Galería de componentes, sección de contenido: tarjetas y filas de lista
  • Pantalla de inicio de sesión en modo oscuro con campos de email y contraseña
  • La pantalla de inicio en modo claro
  • Detalle de una persona en modo claro

Qué trae el kit

Código fuente que es tuyo, listo para poner en una app de Expo. Cada componente usa el tema, funciona en claro y oscuro, y tiene animaciones fluidas.

61 componentesTodo lo que pide una pantalla típica, desde un botón hasta un selector de fecha, una hoja inferior y un carrusel deslizable. Todo tipado y accesible.
Un motor de temas14 colores de marca listos o cualquier color hexadecimal. De ese color el kit saca los tonos, el degradado, la variante oscura y un texto legible encima. Cuatro estilos de encabezado, degradado sí o no, intensidad de sombra y tres niveles de oscuro.
Una app de ejemplo realInicio de sesión y registro, una lista con buscador y una pantalla de detalle, un perfil, ajustes con controles del tema en vivo y una galería de todos los componentes. Hecha con expo-router.
Documentación para quien compraPrimeros pasos, temas, cada componente con sus props y slots, formularios, navegación, accesibilidad, pruebas y cómo actualizar, en un sitio estático que abres desde tu disco.

Los componentes

Personalízalo. Actualízalo igual.

Casi todos los kits te hacen elegir: editar los componentes o seguir recibiendo actualizaciones. Sumak UI guarda tus cambios en tus propios archivos, así que una versión nueva nunca los pisa.

Overrides tipadosProps por defecto, estilos y variantes extra para cualquier componente, en un archivo que es tuyo: theme/overrides.ts. Tu editor autocompleta cada clave.
Slots con nombreCada componente expone sus partes (root, label, icon…) por nombre. Los nombres de slots, variantes y props no cambian dentro de la 1.x, y si alguno cambia en la 2.0, TypeScript te señala tu archivo.
Expulsa un componenteCuando los overrides no alcanzan, copia ese componente a components/custom/ y edítalo libremente. Tu app usa tu copia en todas partes.
Actualiza reemplazando una carpetacomponents/kit/ es de Sumak UI; reemplázala por la nueva. El changelog dice exactamente qué archivos cambiaron, así sabes si una copia expulsada necesita revisión.
components/kit/De Sumak UI. Se reemplaza en cada actualización.theme/ · components/custom/ · components/ui.tsTuyos. Nunca se sobrescriben.

Dónde funciona

Sin módulos nativos propios ni dev build que mantener. Instalas, ejecutas y lo abres en tu teléfono.

Expo Go
funciona tal cual: solo usa librerías incluidas en Expo Go
SDK 58 · 57
el SDK actual de Expo y el anterior, con la Nueva Arquitectura
iOS · Android · web
un solo código; la versión web es la demo en vivo
44 pt
de área táctil, además de lectores de pantalla, movimiento reducido, texto escalable e idiomas de derecha a izquierda

Consigue Sumak UI

Los mismos niveles y términos que nuestras plantillas. Un solo pago, una licencia de por vida, y puedes subir de nivel después pagando la diferencia.

Personal$49
  • 1 desarrollador
  • 1 app, tuya o de tu empresa
  • Solo productos gratuitos
  • Todas las actualizaciones 1.x, con código fuente
Comprar Personal
Extended$249
  • Todo lo de Team
  • Apps por las que tus usuarios pagan: suscripciones, compras dentro de la app o una app de pago
  • Todas las actualizaciones 1.x, con código fuente
Comprar Extended
✓ Descarga inmediata: la app de ejemplo, el kit, la documentación y la licencia✓ Reembolso en 15 días si no funciona como se describe✓ Pago seguro con Polar (comerciante registrado)Leer la licencia →

Qué descargas

  • example/La app de ejemplo completa, lista para npx expo start.
  • kit/Los componentes y archivos iniciales para copiar a una app que ya tienes, con una guía corta de instalación.
  • documentation/La documentación, como un sitio estático que abres desde tu disco.
  • LICENSE.md · LICENCIA.mdLa licencia 1.2, en inglés y en español.

Preguntas sobre Sumak UI

¿Algo más? Escribe a support@cactusdeck.com.

¿Funciona en Expo Go?

Sí. El kit solo usa librerías incluidas en Expo Go y no tiene módulos nativos propios, así que no hay dev build que mantener. Ejecuta el ejemplo con npx expo start y escanea el código QR.

¿Qué versiones del SDK de Expo soporta?

Cada versión soporta el SDK actual de Expo y el anterior, con la Nueva Arquitectura: hoy el SDK 58 y el 57. La app de ejemplo fija el SDK 58 para que abra en Expo Go. Cuando sale un SDK nuevo, llega una versión de corrección.

¿Cómo funcionan las actualizaciones?

Todas las actualizaciones 1.x son gratis. Descarga el zip nuevo, reemplaza components/kit/ y revisa en el changelog la lista de archivos que cambiaron. Una nueva versión mayor se ofrece con 50% de descuento a quienes ya compraron.

¿Puedo personalizarlo sin romper las actualizaciones?

Sí, el diseño está pensado para eso. El color de marca y los ajustes van en theme/sumak.config.ts, los estilos y props por defecto en theme/overrides.ts, y un componente reescrito por completo en components/custom/. Ninguno de esos archivos se toca al actualizar.

¿Qué tan bien funciona en la web?

Todos los componentes se ven y funcionan en la web con react-native-web; la demo en vivo es la app de ejemplo exportada a la web. Aun así es un kit pensado para móvil, y algunos detalles son más limitados ahí: los anuncios para lectores de pantalla, Link no es un <a href> real y el soporte de teclado en Tabs y PageIndicator es parcial.

¿Incluye react-hook-form?

Sí. FormField está hecho sobre react-hook-form y forma parte de la entrada del kit, así que react-hook-form es una dependencia normal de toda app que importa el kit.

Mi app tiene suscripciones o compras dentro de la app. ¿Qué licencia necesito?

Extended. Toda app cuyos usuarios pagan, con suscripciones, compras dentro de la app o una descarga de pago, necesita Extended. Las apps gratuitas, con publicidad o internas pueden usar Personal o Team.

¿Y si no me funciona?

Si Sumak UI no funciona como se describe y no podemos arreglarlo, o compraste la licencia equivocada, te devolvemos el dinero dentro de 15 días. Política de reembolsos →

¿Por qué “Sumak”?

Sumak significa “hermoso” o “bueno” en kichwa, una lengua de los Andes de Ecuador, el país de Cactus Deck. Es la palabra de sumak kawsay, el “buen vivir”. Queríamos un kit que haga que una app se vea bien desde el primer arranque, y el nombre se quedó.