# mdui v2 Documentation

mdui is an front-end component library based on Material Design 3, using Web Components, supporting dynamic colors, dark mode, and lightweight efficiency.

## Primeros pasos

- [Visión general](https://www.mdui.org/es/docs/2/index.md): mdui es una biblioteca de Web Components con 50+ componentes de Material Design. Soporta modo oscuro, localización y TypeScript. Crea rápidamente aplicaciones web modernas.
- [Instalación](https://www.mdui.org/es/docs/2/getting-started/installation.md): Instala mdui vía npm, pnpm o CDN. Admite importaciones completas y bajo demanda. Guías para construcciones globales y módulos ES que aseguran una integración sencilla.
- [Inicio rápido](https://www.mdui.org/es/docs/2/getting-started/usage.md): Basado en Web Components, mdui detalla el uso de atributos, propiedades, métodos e interacciones. Domina actualizaciones de componentes y Shadow DOM con estas guías.
- [Soporte de TypeScript](https://www.mdui.org/es/docs/2/getting-started/typescript-support.md): Escrito en TypeScript, mdui ofrece tipos completos. Usa el autocompletado y verificación de tipos para mejorar la eficiencia del desarrollo y la calidad de todo tu código.
- [Soporte de IDE](https://www.mdui.org/es/docs/2/getting-started/ide-support.md): Optimizado para VS Code y WebStorm. Obtén autocompletado y pistas mediante npm o extensiones. El soporte de datos HTML y CSS aumenta mucho la velocidad en tus desarrollos.
- [Localización](https://www.mdui.org/es/docs/2/getting-started/localization.md): Soporte multilenguaje con 50+ paquetes. Admite carga diferida, precarga e importaciones estáticas vía CDN o npm. Crea aplicaciones globales usando eventos de localización.
- [Preguntas frecuentes](https://www.mdui.org/es/docs/2/getting-started/faq.md): Preguntas frecuentes con respuestas oficiales. Soluciones para etiquetas de autocierre, prevención de FOUC y ejemplos prácticos muy útiles para resolver problemas comunes.

## Desarrollo asistido por IA

- [LLMs.txt](https://www.mdui.org/es/docs/2/ai/llms.md): mdui proporciona llms.txt y llms-full.txt para ofrecer un contexto preciso a los LLM. Los documentos Markdown mejoran la precisión y velocidad de las respuestas de la IA.
- [MCP Server](https://www.mdui.org/es/docs/2/ai/mcp.md): @mdui/mcp integra MCP Servers para agentes de IA. Consulta atributos, Material Icons y CSS Custom Properties directamente para mejorar la experiencia de codificación con IA.

## Estilos

- [Modo oscuro](https://www.mdui.org/es/docs/2/styles/dark-mode.md): Todos los componentes incluyen soporte para modo oscuro. Se activa por preferencias del sistema o manualmente con setTheme. Soporta cambios de tema globales o regionales.
- [Color dinámico](https://www.mdui.org/es/docs/2/styles/dynamic-color.md): Genera automáticamente paletas claras y oscuras desde un color base. Usa setColorScheme y getColorFromImage para crear temas armoniosos, coherentes y personalizados.
- [Tipografía](https://www.mdui.org/es/docs/2/styles/prose.md): Las clases mdui-prose y mdui-table optimizan el diseño de artículos y tablas. Obtén tipografía y espaciado elegantes para cualquier contenido dinámico o Markdown.
- [Design Tokens](https://www.mdui.org/es/docs/2/styles/design-tokens.md): Sistema de Design Tokens mediante CSS Custom Properties. Incluye 100+ tokens. Personalízalos para crear un estilo único y al mismo tiempo unificado en tus aplicaciones.

## Integración con frameworks

- [Integración con React](https://www.mdui.org/es/docs/2/frameworks/react.md): Basado en Web Components, mdui se integra perfectamente con React. Ofrece soporte de TypeScript para vincular eventos y sincronizar propiedades con mejores prácticas.
- [Integración con Vue](https://www.mdui.org/es/docs/2/frameworks/vue.md): Integración sencilla con Vue configurando el compilador. Soporta v-model, eventos personalizados, tipos de TypeScript y sugerencias inteligentes para el IDE en desarrollos.
- [Integración con Angular](https://www.mdui.org/es/docs/2/frameworks/angular.md): Requiere CUSTOM_ELEMENTS_SCHEMA para Angular. Ofrece guías de integración y ejemplos. Soporta DI, vinculación bidireccional y definiciones de tipos completas de TypeScript.
- [Integración con otros frameworks](https://www.mdui.org/es/docs/2/frameworks/others.md): Basado en Web Components estándar, mdui se integra con cualquier framework moderno como Svelte o Next.js. Ofrece mejores prácticas y guías de integración universales.

## Componentes

- [Componente Avatar](https://www.mdui.org/es/docs/2/components/avatar.md): Avatar representa usuarios o marcas con imágenes, iconos o texto. Admite formas circulares o cuadradas de diversos tamaños. Ideal para perfiles, comentarios y tarjetas.
- [Componente Badge](https://www.mdui.org/es/docs/2/components/badge.md): Badge muestra recuentos o etiquetas de estado. Admite tamaños pequeños y grandes con números o texto. Se añade fácilmente a componentes para dar notificaciones.
- [Componente Bottom App Bar](https://www.mdui.org/es/docs/2/components/bottom-app-bar.md): Bottom App Bar ofrece navegación móvil y barras de acción en el inferior. Integra el Fab, elementos y menús. Soporta ocultación al scroll, posición fija y estilos.
- [Componente Botón](https://www.mdui.org/es/docs/2/components/button.md): Botón admite estilos elevados, rellenos, tonales, contorneados y de texto. Incluye iconos, estados de carga y accesibilidad completa según las pautas de Material Design 3.
- [Componente Botón de icono](https://www.mdui.org/es/docs/2/components/button-icon.md): Botón de icono para acciones secundarias admite estilos estándar, rellenos, tonales y contorneados. Incluye estados de carga y enlaces. Ideal para barras de herramientas.
- [Componente Tarjeta](https://www.mdui.org/es/docs/2/components/card.md): La Tarjeta es un contenedor versátil para contenido y acciones. Admite estilos elevados, rellenos y contorneados con soporte para enlaces y medios en cualquier interfaz.
- [Componente Checkbox](https://www.mdui.org/es/docs/2/components/checkbox.md): Checkbox permite seleccionar varias opciones. Admite estados marcados e indeterminados. Incluye iconos, validación y soporte completo para todo tipo de formularios.
- [Componente Chip](https://www.mdui.org/es/docs/2/components/chip.md): El Chip representa entrada, selección o filtrado. Incluye variantes de asistencia, filtro y entrada con estados marcables y eliminables. Ideal para categorización.
- [Componente Progreso circular](https://www.mdui.org/es/docs/2/components/circular-progress.md): Progreso circular muestra finalización con barras circulares. Admite modos determinado y giratorio. Tamaños y colores personalizables para botones o carga de apps.
- [Componente Collapse](https://www.mdui.org/es/docs/2/components/collapse.md): Collapse organiza el contenido en secciones para ahorrar espacio. Incluye modo acordeón, disparadores y animaciones. Ideal para preguntas frecuentes y ajustes.
- [Componente Diálogo](https://www.mdui.org/es/docs/2/components/dialog.md): Diálogo para información importante o decisiones. Admite títulos, iconos y botones con modos modales. Admite funciones de alerta, confirmación y aviso programático.
- [Componente Divider](https://www.mdui.org/es/docs/2/components/divider.md): Separador aporta separación visual para listas y diseños. Admite modos horizontal y vertical. Herramienta básica para lograr una clara jerarquía visual en la interfaz.
- [Componente Dropdown](https://www.mdui.org/es/docs/2/components/dropdown.md): Dropdown activa menús o contenido al hacer clic o al situar el cursor. Ofrece varios modos de activación, posicionamiento automático y retrasos para interacciones.
- [Componente Floating Action Button](https://www.mdui.org/es/docs/2/components/fab.md): El Floating Action Button destaca acciones principales en formas regulares o extendidas. Incluye iconos y estados de carga para un acceso rápido a todas las funciones.
- [Componente Icono](https://www.mdui.org/es/docs/2/components/icon.md): Icono representa acciones con Material Icons o SVG personalizados. Personaliza tamaño, color y rotación mediante CSS. Eleva el reconocimiento de la UI en tus menús.
- [Componente Layout](https://www.mdui.org/es/docs/2/components/layout.md): Layout organiza barras de aplicaciones, cajones y áreas de contenido. Incluye un sistema de cuadrícula con breakpoints y espaciado para crear marcos de página.
- [Componente Progreso lineal](https://www.mdui.org/es/docs/2/components/linear-progress.md): Progreso lineal muestra avance de tareas con barras horizontales. Admite modos determinado e indeterminado. Colores y alturas personalizables para cualquier carga.
- [Componente Lista](https://www.mdui.org/es/docs/2/components/list.md): Lista muestra elementos verticales para navegación o contactos. Admite líneas simples o dobles con avatares, iconos y enlaces. Diseño y contenido personalizables.
- [Componente Menú](https://www.mdui.org/es/docs/2/components/menu.md): Menú muestra opciones de operación verticales. Soporta modos de selección, submenús y contenido personalizado. Ideal para menús contextuales y navegación avanzada.
- [Componente Navigation Bar](https://www.mdui.org/es/docs/2/components/navigation-bar.md): Barra de navegación para cambiar entre páginas principales en móviles. Admite de 3 a 5 elementos con etiquetas automáticas e iconos. Con ocultación al hacer scroll.
- [Componente Navigation Drawer](https://www.mdui.org/es/docs/2/components/navigation-drawer.md): Navigation Drawer se desliza desde el lateral para navegar. Admite modos modales y no modales para ambos lados. Incluye información y sus separadores de contenido.
- [Componente Navigation Rail](https://www.mdui.org/es/docs/2/components/navigation-rail.md): Navigation Rail ofrece navegación lateral compacta para tablets y escritorios. Admite badges, separadores y alineación. Muestra iconos con sus etiquetas opcionales.
- [Componente Radio](https://www.mdui.org/es/docs/2/components/radio.md): Radio para selecciones mutuamente excluyentes. Asegura que solo se elija una opción. Admite iconos y estados deshabilitados para usar en formularios y encuestas.
- [Componente Range Slider](https://www.mdui.org/es/docs/2/components/range-slider.md): Range Slider permite seleccionar rangos con dos controles. Incluye pasos discretos, etiquetas y validación. Útil para precios, tiempo o parámetros de aplicaciones.
- [Componente Select](https://www.mdui.org/es/docs/2/components/select.md): Select permite la selección única o múltiple desde un menú desplegable. Incluye etiquetas, validación e iconos. Ideal para entrada de datos y el filtrado complejo.
- [Componente Botón segmentado](https://www.mdui.org/es/docs/2/components/segmented-button.md): Botón segmentado admite selección única o múltiple para filtrar o cambiar vistas. Incluye iconos, enlaces y estilos. Un componente básico para controles de interfaz.
- [Componente Slider](https://www.mdui.org/es/docs/2/components/slider.md): Slider permite seleccionar valores con control de pasos y marcas. Incluye validación, autoenfoque y etiquetas. Ideal para volumen, brillo, niveles o filtrado de rangos.
- [Componente Snackbar](https://www.mdui.org/es/docs/2/components/snackbar.md): Snackbar ofrece breve retroalimentación con botones de acción y cierre automático. Admite colores, posiciones y llamadas para una mejor experiencia de uso del sistema.
- [Componente Switch](https://www.mdui.org/es/docs/2/components/switch.md): Switch alterna ajustes binarios con retroalimentación instantánea. Admite iconos y colores personalizados. Ideal para páginas de ajustes, permisos y preferencias.
- [Componente Tabs](https://www.mdui.org/es/docs/2/components/tabs.md): Tabs cambia entre varias vistas en un área. Admite estilos primarios y secundarios con iconos, badges e indicadores. Ideal para navegar por diversas categorías.
- [Componente Campo de texto](https://www.mdui.org/es/docs/2/components/text-field.md): Campo de texto permite entrada de varias líneas para contraseñas, correos y más. Incluye etiquetas, iconos y validación. Es totalmente accesible y con ajuste de altura.
- [Componente Tooltip](https://www.mdui.org/es/docs/2/components/tooltip.md): Tooltip muestra información adicional al pasar el cursor o enfocar. Soporta texto enriquecido, posición personalizada y retrasos. Ayuda a entender cada función.
- [Componente Top App Bar](https://www.mdui.org/es/docs/2/components/top-app-bar.md): Top App Bar ofrece títulos, navegación y acciones arriba. Incluye estilos, efectos de scroll e iconos. Un cabezal unificado para toda la navegación y el control.

## Funciones

- [Biblioteca de utilidades jq](https://www.mdui.org/es/docs/2/functions/jq.md): Librería tiny jq integrada con una API tipo jQuery en un sexto de su tamaño. Soporta DOM encadenable, eventos y animaciones sin dependencias externas ni sobrecarga.
- [función dialog](https://www.mdui.org/es/docs/2/functions/dialog.md): Wrapper programático para mdui-dialog. Abre modales desde JavaScript sin usar HTML. Admite títulos y botones personalizados y retorna una Promise de interacción.
- [función alert](https://www.mdui.org/es/docs/2/functions/alert.md): Reemplazo moderno para window.alert basado en mdui-dialog. Muestra alertas con títulos y botones personalizados sin bloquear el renderizado de las aplicaciones.
- [función confirm](https://www.mdui.org/es/docs/2/functions/confirm.md): Reemplazo de Material Design para window.confirm. Muestra confirmaciones y gestiona elecciones mediante una Promise para un gran control y estilo nativo del sistema.
- [función prompt](https://www.mdui.org/es/docs/2/functions/prompt.md): Reemplazo de window.prompt con estilo Material Design. Captura entrada del usuario mediante diálogos con validación y tipos. Retorna una Promise con el valor.
- [función snackbar](https://www.mdui.org/es/docs/2/functions/snackbar.md): Llamada programática para mdui-snackbar. Muestra mensajes con acciones, duración y ubicación personalizadas. Sin HTML para avisos en la aplicación moderna de hoy.
- [función getTheme](https://www.mdui.org/es/docs/2/functions/getTheme.md): Recupera los ajustes de tema para la página o los elementos. Admite modos claro, oscuro y automático. Útil para ajustar lógica o estilos según el tema activo actual.
- [función setTheme](https://www.mdui.org/es/docs/2/functions/setTheme.md): Establece dinámicamente temas claros, oscuros o automáticos para la página o elementos específicos. Soporta anulaciones globales o locales para gran flexibilidad web.
- [función getColorFromImage](https://www.mdui.org/es/docs/2/functions/getColorFromImage.md): Extrae colores dominantes de imágenes como valores hex. Úsalo con setColorScheme para generar paletas que coincidan con el contenido de forma automática y dinámica.
- [función setColorScheme](https://www.mdui.org/es/docs/2/functions/setColorScheme.md): Genera paletas de Material Design desde un color hexadecimal. Admite ajustes globales o locales para marca rápida y un esquema de colores cohesivo y de calidad.
- [función removeColorScheme](https://www.mdui.org/es/docs/2/functions/removeColorScheme.md): Elimina esquemas de colores para restaurar la paleta predeterminada. Úsalo globalmente o en elementos específicos; ideal para restaurar de forma ágil el tema.
- [función loadLocale](https://www.mdui.org/es/docs/2/functions/loadLocale.md): Carga paquetes de idiomas para la localización de aplicaciones. Soporta métodos diferidos, precarga y estáticos. Optimizado para obtener mejor rendimiento y carga.
- [función setLocale](https://www.mdui.org/es/docs/2/functions/setLocale.md): Establece códigos de idioma de forma dinámica con soporte asíncrono. Actualiza automáticamente los componentes para localización fluida sin tener que recargar nada.
- [función getLocale](https://www.mdui.org/es/docs/2/functions/getLocale.md): Recupera el código de idioma de la aplicación actual. Úsalo para la detección del entorno, carga de activos o ajustes de diseño. Retorna cadenas simples de código.
- [función throttle](https://www.mdui.org/es/docs/2/functions/throttle.md): Crea funciones de aceleración para limitar la frecuencia. Ideal para eventos de alta frecuencia como scroll o resize, mejorando el rendimiento de la aplicación.
- [función observeResize](https://www.mdui.org/es/docs/2/functions/observeResize.md): Monitorea cambios de tamaño de elementos mediante la API ResizeObserver. Activa devoluciones de llamada para diseños receptivos. Incluye soporte de limpieza simple.
- [función breakpoint](https://www.mdui.org/es/docs/2/functions/breakpoint.md): Verifica Breakpoints receptivos como xs, sm, md, lg, xl o xxl. Evalúa si el ancho es mayor, menor o está en un rango para una lógica de UI receptiva personalizada.

## Paquetes independientes

- [Biblioteca de componentes de íconos @mdui/icons](https://www.mdui.org/es/docs/2/libraries/icons.md): Biblioteca de Material Icons independiente con todos los iconos de Google. Optimizada para tree-shaking e importación para reducir el tamaño del paquete final.