Todo proyecto de panel vuelve a construir la misma capa: inicio de sesión, estructura, tablas, árboles, notificaciones, ajustes, estados vacíos y estados de error. El resultado difiere en color, espaciado y detalle de interacción, y mantener la coherencia cuesta más con cada página nueva.

Reunimos esa capa en una única base reutilizable y la publicamos con licencia MIT: admin-design, el diseño y la implementación de un panel estándar extraídos del frontend de la plataforma Runlume.

Qué incluye

  • Tema y tokens semánticos: el color pasa solo por clases de utilidad semánticas, con seis paletas predefinidas que se combinan con colores base y de tema, y modos claro y oscuro que se ajustan solos.
  • Tres estructuras de aplicación: navegación lateral, superior más lateral y superior. El ancho de la barra lateral, el radio, las transiciones y el orden de las acciones de cabecera son ajustables.
  • Nueve páginas de componentes: controles básicos, formularios y selectores, visualización de datos, avisos y capas, navegación y flujos, métricas y gráficos, iconos, tema y ajustes, y páginas estándar. La galería sirve como documentación y como superficie de aceptación.
  • Tipos de página estándar: panel de trabajo, listado, detalle, ajustes, centro de notificaciones, acceso, registro y recuperación de contraseña.
  • Chino e inglés de serie, acceso por teclado y opciones de accesibilidad, además de la misma búsqueda por paleta de comandos que usa la documentación.

Tres puntos de entrada

Para quién es y dónde está el límite

Encaja en equipos que construyen su propio panel y no quieren escribir la interfaz dos veces desde cero: copie el repositorio, cambie el nombre en package.json, sustituya el menú y los recursos de marca y apunte los datos de ejemplo a su propia API.

Incluye solo la capa de diseño e interacción: no hay API de negocio, ni implementación de autenticación, ni modelo de permisos, ni reglas de negocio. Los datos de ejemplo viven en memoria y se reinician al recargar. Capacidades como identidad, subida de archivos, arrastre en árboles y carga diferida se inyectan mediante props, así que conectar un servicio real consiste en reemplazar la llamada, no en editar el componente.