DashboardLayout
Layout fijo con sidebar, header y footer como slots — base para dashboards y reportes.
pnpm dlx nuvo-ui add dashboard-layoutPreview — Reporting Dashboard
Dashboard
Jul 2024
Usuarios
1,280↑ 12.4%
vs mes ant.
Activos
976↑ 8.1%
vs mes ant.
Ingresos
$48k↑ 21.3%
vs mes ant.
Churn
2.4%↓ 3.2%
vs mes ant.
Ingresos por mes
Últimos 6 meses
Últimas transacciones
| Usuario | Monto | Estado | Fecha |
|---|---|---|---|
| Juan Díaz | $1,200 | Pagado | 01 Jul |
| María Pérez | $980 | Pendiente | 02 Jul |
| Carlos López | $3,450 | Pagado | 03 Jul |
| Sofía Ruiz | $760 | Fallido | 03 Jul |
| Ana Gómez | $2,100 | Pagado | 04 Jul |
Uso full-page
// Para usar como página completa, envuelve en h-screen
import {
DashboardLayout, DashboardHeader,
DashboardSidebar, DashboardNav
} from "@nuvo-ui/ui"
export default function AppPage() {
return (
<div className="h-screen">
<DashboardLayout
sidebarWidth="240px"
sidebar={
<DashboardSidebar header={<Logo />}>
<DashboardNav items={navItems} />
</DashboardSidebar>
}
header={
<DashboardHeader
left={<h1>Dashboard</h1>}
right={<ThemeSwitcher />}
/>
}
>
<div className="p-6">Contenido principal</div>
</DashboardLayout>
</div>
)
}Props — DashboardLayout
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| sidebar | ReactNode | — | Contenido del sidebar (usa DashboardSidebar) |
| header | ReactNode | — | Header superior (usa DashboardHeader) |
| footer | ReactNode | — | Footer inferior |
| sidebarWidth | string | "240px" | Ancho del sidebar |
| headerHeight | string | "56px" | Alto del header |
| footerHeight | string | "48px" | Alto del footer |
| children | ReactNode | — | Área de contenido principal (scrollable) |