DashboardLayout

Layout fijo con sidebar, header y footer como slots — base para dashboards y reportes.

pnpm dlx nuvo-ui add dashboard-layout

Preview — 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

UsuarioMontoEstadoFecha
Juan Díaz$1,200Pagado01 Jul
María Pérez$980Pendiente02 Jul
Carlos López$3,450Pagado03 Jul
Sofía Ruiz$760Fallido03 Jul
Ana Gómez$2,100Pagado04 Jul
NuvoUI v0.1 · Reporte generado automáticamente

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

PropTipoDefaultDescripción
sidebarReactNodeContenido del sidebar (usa DashboardSidebar)
headerReactNodeHeader superior (usa DashboardHeader)
footerReactNodeFooter inferior
sidebarWidthstring"240px"Ancho del sidebar
headerHeightstring"56px"Alto del header
footerHeightstring"48px"Alto del footer
childrenReactNodeÁrea de contenido principal (scrollable)