Plantilla de dashboard para SaaS.
Una UI completa de aplicación web para un dashboard de analítica SaaS: ocho pantallas para una herramienta de ejemplo de ingresos por suscripción llamada Tallywise, desde el resumen de MRR y la lista de clientes hasta los informes de ingresos, las facturas, la retención por cohortes, los ajustes del equipo y el primer inicio. Las cifras cuadran en todas las pantallas, y cada una es HTML con Tailwind, así que Codex o Claude Code pueden clonarla y convertirla en tu app.
Actualizado el 7 de noviembre de 2026
Sitio web · 8 páginas · Gratis y de código abierto
01Resumen 
02Clientes 
03Detalle del cliente 
04Ingresos 
05Facturas 
06Cohortes 
07Ajustes 
08Primeros pasos
Clónala
npx degit ummydev/ui-templates/webapps/saas-dashboard my-app
Copia solo esta plantilla en una carpeta nueva, sin el resto del repositorio.
Hazla tuya
Esta es la plantilla Dashboard SaaS de codexdesign.io. Cámbiale el nombre a [tu producto], sustituye los datos de ejemplo por [tus funciones] y mantén todas las pantallas fieles al sistema de diseño de DESIGN.md.
Pega esto en Codex o Claude Code dentro de la carpeta nueva.
Sistema de diseño
LedgerWebUna interfaz densa y oscura para números, con un acento ámbar de terminal.Headings in IBM Plex Sans- Hecha con
- HTML · Tailwind CSS v4 · Lucide icons · SVG charts
Qué incluye la plantilla
| Pantalla | Qué contiene |
|---|---|
| Resumen | MRR, ARR, clientes y cancelación frente al mes anterior, movimiento del MRR, MRR por plan y eventos |
| Clientes | Búsqueda, filtros por plan y estado, orden y una tabla de empresas con plan y MRR |
| Detalle del cliente | Datos de la empresa, la suscripción, historial de MRR, ingresos totales, notas y actividad |
| Ingresos | Doce meses de MRR nuevo, de expansión, de contracción y de cancelación, con exportación CSV |
| Facturas | Facturas por estado (abierta, vencida, borrador, pagada) junto a la vista previa de una |
| Cohortes | Una tabla de retención por mes de alta, con la media ponderada y su lectura |
| Ajustes | Miembros y roles del equipo, invitaciones, claves de API ocultas y permisos por rol |
| Primeros pasos | El estado vacío de una cuenta nueva, con pasos para conectar Stripe, importar e invitar |
Los datos de ejemplo son el octubre de una empresa inventada: 62.500 USD de MRR, 750.000 USD de ARR, 712 clientes y un 3,9 % de cancelación. Los cuatro planes suman exactamente esos totales, el movimiento del mes también cuadra (59.840 + 4.210 + 1.890 − 420 − 3.020 = 62.500) y los doce meses del informe de ingresos terminan en el mismo MRR que el resumen. Los nombres de los clientes son ficticios.
Cada pantalla es un archivo HTML diseñado a 1440×900 y usable en un móvil de 390 píxeles, donde la barra lateral se pliega en un menú y las tablas se desplazan en horizontal. Usa Tailwind CSS v4 y un tokens.css compartido. Los números van en IBM Plex Mono con cifras tabulares, los gráficos son SVG, las filas de las tablas se pueden seleccionar con el teclado y los iconos son de Lucide. Abre cualquier archivo en el navegador; no hay nada que instalar ni compilar.
Úsala con Codex o Claude Code
Copia solo esta plantilla del repositorio ui-templates:
npx degit ummydev/ui-templates/webapps/saas-dashboard my-dashboard
Después pídele a tu agente que la haga tuya:
Esta carpeta es una plantilla de UI para un dashboard SaaS. Conviértela en [tu producto], para [a quién va dirigido]. Mantén DESIGN.md y tokens.css como sistema de diseño, sustituye las métricas, los planes, los clientes y los gráficos por [tus datos] y haz que los totales coincidan en todas las pantallas. Después constrúyela en [Next.js / React / tu stack] y conéctala a [tu fuente de datos].
Como el sistema de diseño está escrito en DESIGN.md, las pantallas nuevas que añada tu agente, como alertas, segmentos o una previsión, encajarán con las ocho que ya existen.
Basada en el sistema de diseño Ledger
La plantilla usa Ledger, un sistema de diseño oscuro y denso para herramientas con muchos datos: IBM Plex Sans con IBM Plex Mono para los números, esquinas de 6px y un único acento ámbar de terminal para el estado activo y las cifras clave. Su página tiene una vista previa en vivo, el DESIGN.md completo y un tema de shadcn.
Preguntas frecuentes
¿Esta plantilla de dashboard SaaS es gratis?
Sí. Es de código abierto con licencia MIT, para proyectos personales y comerciales.
¿Puedo usarla con Next.js, React o shadcn/ui?
Sí. Las pantallas son HTML con clases de Tailwind, así que tu agente puede pasarlas a componentes en cualquier framework, y la página de Ledger incluye un tema de shadcn con los mismos colores. Pídele que deje tokens.css y DESIGN.md tal como están, para que el diseño se mantenga después del cambio.
¿Tiene tema claro?
Sí. El oscuro es el predeterminado; quita class="dark" de la etiqueta <html> de cualquier pantalla para cambiarla al tema claro de Ledger.