Contenedor modular para construir bloques de información con una estructura consistente: encabezado, slot de contenido y pie de acciones.
ModuleBox es ideal para tarjetas de negocio donde necesitas mantener jerarquía visual estable y contenido dinámico.
1import { ModuleBox } from 'nave-ui-library/react'2 3<ModuleBox4 title="Resumen"5 headerActions={<Button size="small">Acción</Button>}6>7 <p>Contenido principal del módulo.</p>8</ModuleBox>title + headerActions.slotPlaceholder.footerActions.Composición típica para negocio: encabezado con filtros y CTA, contenido financiero en el slot y separadores para mejorar la lectura.
$32.045.668,02
+10% vs ultimo mesTotal bruto
$38.211.412,12
Impuestos (17,5%)
-$3.500.000,00
Costos servicio (7,5%)
-$1.500.000,00
El slot acepta cualquier composición. Este ejemplo integra Card, Badge, Button y Separator para armar un bloque más complejo.
Total pendiente
$1.321.123,44
Proximas acreditaciones
Montos netos aproximados
Edad promedio
26 - 35 años
Gasto promedio
$12.021,35
Puedes ajustar borde, fondo, tipografía del título y estilo del slot usando la prop tokens en la instancia.
1<ModuleBox2 title="Módulo personalizado"3 tokens={{4 components: {5 moduleBox: {6 backgroundColor: '#FFFFFF',7 borderColor: '#E5E7EB',8 borderRadius: '20px',9 padding: '24px',10 title: { fontSize: '20px', fontWeight: 550 },11 slot: {12 background: '#F8FAFC',13 border: '#CBD5E1',14 borderRadius: '12px',15 minHeight: '140px',16 },17 },18 },19 }}20/>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| title | ReactNode | 'Title' | Título del módulo en el encabezado. |
| headerActions | ReactNode | undefined | Acciones a la derecha del encabezado. |
| footerActions | ReactNode | undefined | Acciones al pie del módulo. |
| children | ReactNode | undefined | Contenido principal del slot. |
| slotPlaceholder | ReactNode | 'Slot' | Placeholder cuando no hay children. |
| headerClassName / slotClassName / footerClassName | string | undefined | Clases para personalizar cada zona. |
| tokens | Partial<ThemeTokensBase> | undefined | Overrides locales de tema. |
Configuración técnica del componente para renderizado dinámico del catálogo.
1{2 "name": "ModuleBox",3 "description": "Contenedor modular con Header configurable, Slot de contenido y Footer opcional para acciones.",4 "component": "ModuleBox",5 "files": [6 "components/base/data-display/module-box/moduleBox.tsx"7 ],8 "dependencies": [9 "react"10 ],11 "props": {12 "title": {13 "type": "React.ReactNode",14 "description": "Título del header."15 },16 "headerActions": {17 "type": "React.ReactNode",18 "description": "Acciones opcionales en el header (lado derecho)."19 },20 "footerActions": {21 "type": "React.ReactNode",22 "description": "Acciones opcionales en el footer (lado derecho)."23 },24 "slotPlaceholder": {25 "type": "React.ReactNode",26 "default": "Slot",27 "description": "Placeholder que se muestra cuando no hay contenido en el slot."28 },29 "children": {30 "type": "React.ReactNode",31 "description": "Contenido del slot central (configurable)."32 }33 }34}