Layout completo para apps con navegación, header y modo mobile.
El App Shell de Zerina UI organiza la estructura principal de una aplicación: navegación lateral, barra superior, área de contenido, usuario y navegación inferior cuando la interfaz entra en modo mobile.
Partes del layout
Estructura para paneles y herramientas internas.
Esta página documenta la composición visual del App Shell: navegación, área de trabajo y adaptación a pantallas pequeñas.
Sidebar
Área lateral para navegación principal, secciones internas y acceso rápido a módulos.
Header
Barra superior para contexto de pantalla, usuario, acciones globales y estado de la aplicación.
Mobile Bar
Navegación inferior para pantallas pequeñas cuando el layout cambia a modo mobile.
Demo
App Shell renderizado con componentes de Zerina UI.
El demo muestra la estructura completa en una pantalla de ejemplo con navegación, contenido, header y comportamiento responsivo.
UncontrolledAppShell
App shell autónomo: administra su ruta activa internamente y sirve para demos, previews o apps pequeñas.
Dashboard
Página demo con métricas, alertas y acciones.
Usuarios
1,248
demoSesiones
342
demoAlertas
7
demoErrores
2
demoRoutedAppShell
App shell controlado: recibe activePath, activeRouteId y navigate desde un router externo. Aquí se muestra sin Wouter/Next Router para mantenerlo aislado.
Dashboard
Página demo con métricas, alertas y acciones.
Usuarios
1,248
demoSesiones
342
demoAlertas
7
demoErrores