Component

ModuleBox

Contenedor modular para construir bloques de información con una estructura consistente: encabezado, slot de contenido y pie de acciones.

Módulo base

Descripcion

Slot

Inicio rápido

ModuleBox es ideal para tarjetas de negocio donde necesitas mantener jerarquía visual estable y contenido dinámico.

TypeScript

1import { ModuleBox } from 'nave-ui-library/react'
2 
3<ModuleBox>
4        <ModuleBox.Header
5          title="..."
6          description="..."
7          tooltip="..."
8        >
9        ...
10        </ModuleBox.Header>
11        <ModuleBox.Content>
12          ...
13        </ModuleBox.Content>
14      </ModuleBox>

Estructura mínima

Módulo base

Slot

Ejemplo

Módulo base

Descripcion

$32.045.668,02

+10% vs ultimo mes

Total bruto

$38.211.412,12

Impuestos (17,5%)

-$3.500.000,00

Costos servicio (7,5%)

-$1.500.000,00

API Reference

Props principales del componente Feedback.

Module Box

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Contenido del slot central (configurable).
`tokens`	`Partial<ThemeTokensBase>`	—	Overrides locales de estilo/tokens por instancia.

Module Box Header

Prop	Type	Default	Description
`title`	`string`	—	Título del header.
`description`	`string`	—	Descripcion del header.
`tooltip`	`string`	—	Muestra el icono y mensaje del tooltip.
`children`	`React.ReactNode`	—	Contenido lateral derecho del header (configurable).
`tokens`	`Partial<ThemeTokensBase>`	—	Overrides locales de estilo/tokens por instancia.

Module Box Content

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Contenido del slot central (configurable).
`tokens`	`Partial<ThemeTokensBase>`	—	Overrides locales de estilo/tokens por instancia.

Definición en el registry

Configuración técnica del componente para renderizado dinámico del catálogo.

TypeScript

1{
2  "name": "ModuleBox",
3  "description": "Contenedor modular con Header configurable y Slot de contenido.",
4  "component": "ModuleBox",
5  "files": [
6    "components/base/data-display/module-box/ModuleBox.tsx"
7  ],
8  "dependencies": [
9    "react"
10  ],
11  "props": {
12    "children": {
13      "type": "React.ReactNode",
14      "description": "Contenido del slot central (configurable)."
15    }
16  }
17}

TypeScript

1{
2  "name": "ModuleBoxHeader",
3  "description": "Contenedor del Header del Module Box.",
4  "component": "ModuleBoxHeader",
5  "files": [
6    "components/base/data-display/module-box/ModuleBoxHeader.tsx"
7  ],
8  "dependencies": [
9    "react"
10  ],
11  "props": {
12    "title": {
13      "type": "string",
14      "description": "Título del header."
15    },
16    "description": {
17      "type": "string",
18      "description": "Descripcion del header."
19    },
20    "tooltip": {
21      "type": "string",
22      "description": "Muestra el icono y mensaje del tooltip."
23    },
24    "children": {
25      "type": "React.ReactNode",
26      "description": "Contenido lateral derecho del header (configurable)."
27    }
28  }
29}

TypeScript

1{
2  "name": "ModuleBoxContent",
3  "description": "Contenido principal del componente Module Box.",
4  "component": "ModuleBoxContent",
5  "files": [
6    "components/base/data-display/module-box/ModuleBoxContent.tsx"
7  ],
8  "dependencies": [
9    "react"
10  ],
11  "props": {
12    "children": {
13      "type": "React.ReactNode",
14      "description": "Contenido del slot central (configurable)."
15    }
16  }
17}