# 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.

## Primeiros Passos

- [Visão geral](https://www.mdui.org/pt-br/docs/2/index.md): O mdui é uma biblioteca de Web Components de alta qualidade com mais de 50 componentes Material Design. Suporta modo escuro, localização e TypeScript para criar apps modernos.
- [Instalação](https://www.mdui.org/pt-br/docs/2/getting-started/installation.md): Instale o mdui via npm, pnpm ou CDN. Oferece importação completa ou sob demanda para reduzir o tamanho do pacote. Guias para builds globais e módulos ES garantem integração.
- [Início rápido](https://www.mdui.org/pt-br/docs/2/getting-started/usage.md): Baseado em Web Components, mdui detalha o uso de atributos, propriedades, métodos, eventos e slots. Domine a atualização e o Shadow DOM com nossos guias de estilo modernos.
- [Suporte a TypeScript](https://www.mdui.org/pt-br/docs/2/getting-started/typescript-support.md): Desenvolvido em TypeScript, mdui oferece definições totais para todos os componentes. Aproveite o autocompletar e verificação de tipos para melhorar seu código e produtividade.
- [Suporte a IDE](https://www.mdui.org/pt-br/docs/2/getting-started/ide-support.md): Otimizado para VS Code e WebStorm. Obtenha sugestões e dicas ao passar o mouse via npm ou extensões. O suporte total a HTML e CSS acelera muito o desenvolvimento de seu app.
- [Localização](https://www.mdui.org/pt-br/docs/2/getting-started/localization.md): Suporte nativo com mais de 50 pacotes de idiomas. Permite carregar pacotes via CDN ou npm. Crie apps globais com eventos de localização e gestão de idiomas de seu app.
- [Perguntas frequentes](https://www.mdui.org/pt-br/docs/2/getting-started/faq.md): Respostas para perguntas da comunidade. Soluções para tags autofechadas, prevenção de FOUC e dicas para depuração com vários exemplos práticos de código em seu projeto.

## Desenvolvimento assistido por IA

- [LLMs.txt](https://www.mdui.org/pt-br/docs/2/ai/llms.md): O mdui fornece llms.txt para oferecer contexto preciso para LLMs. Documentos em Markdown facilitam o uso por IAs, melhorando a precisão das respostas e do código web.
- [Servidor MCP](https://www.mdui.org/pt-br/docs/2/ai/mcp.md): O @mdui/mcp integra servidores MCP para agentes de IA. Consulte atributos e ícones para aprimorar drasticamente a profundidade do seu desenvolvimento assistido por IA.

## Estilos

- [Modo escuro](https://www.mdui.org/pt-br/docs/2/styles/dark-mode.md): Todos os componentes possuem suporte nativo ao modo escuro. Ative via preferência do sistema ou manualmente com setTheme. Suporta personalização de temas globais ou em partes.
- [Cor dinâmica](https://www.mdui.org/pt-br/docs/2/styles/dynamic-color.md): Gere paletas a partir de uma cor ou imagem. Use setColorScheme e getColorFromImage para criar temas personalizados que se adaptam perfeitamente ao conteúdo do seu aplicativo.
- [Tipografia](https://www.mdui.org/pt-br/docs/2/styles/prose.md): Classes mdui-prose e mdui-table otimizam layouts de artigos e tabelas. Tenha tipografia elegante e espaçamentos ideais para qualquer conteúdo dinâmico ou gerado via Markdown.
- [Design tokens](https://www.mdui.org/pt-br/docs/2/styles/design-tokens.md): Tokens de design via propriedades CSS personalizadas com mais de 100 opções. Personalize-os para criar uma identidade visual única e unificada em todo o seu projeto de web app.

## Integração com Frameworks

- [Integração com React](https://www.mdui.org/pt-br/docs/2/frameworks/react.md): O mdui se integra bem ao React. Oferece suporte total a TypeScript para vinculação de eventos e sincronização de propriedades com guias de melhores práticas e muitos exemplos.
- [Integração com Vue](https://www.mdui.org/pt-br/docs/2/frameworks/vue.md): Integração simples com Vue via configuração do compilador. Suporta v-model, eventos personalizados, tipos TypeScript e dicas inteligentes para facilitar seu desenvolvimento moderno.
- [Integração com Angular](https://www.mdui.org/pt-br/docs/2/frameworks/angular.md): Exige o CUSTOM_ELEMENTS_SCHEMA no Angular. Oferece guias de integração e exemplos. Suporta DI, vinculação bidirecional e definições de tipos TypeScript para desenvolvedores.
- [Integração com outros frameworks](https://www.mdui.org/pt-br/docs/2/frameworks/others.md): Construído em Web Components, o mdui se integra a qualquer framework moderno como Svelte, Next.js ou Nuxt. Oferece guias universais e melhores práticas de integração de código.

## Componentes

- [Componente Avatar](https://www.mdui.org/pt-br/docs/2/components/avatar.md): Representa usuários ou marcas com imagens, ícones ou texto. Oferece formas circulares ou quadradas em vários tamanhos. Ideal para perfis, comentários e cartões de um aplicativo.
- [Componente Badge](https://www.mdui.org/pt-br/docs/2/components/badge.md): Exibe contagens ou rótulos de status. Suporta tamanhos pequeno e grande com números ou texto. Fixa-se a componentes para notificações e indicadores visuais úteis no seu app.
- [Componente BottomAppBar](https://www.mdui.org/pt-br/docs/2/components/bottom-app-bar.md): Barra de navegação e ações móveis na parte inferior. Integra o Fab, itens e menus. Suporta ocultação ao rolar, posições fixas e estilos customizados para aplicativos modernos.
- [Componente Button](https://www.mdui.org/pt-br/docs/2/components/button.md): Botão com estilos elevado, preenchido, tonal, delineado e de texto. Com ícones, estados de carga e acessibilidade total seguindo as diretrizes de design do Material Design 3.
- [Componente ButtonIcon](https://www.mdui.org/pt-br/docs/2/components/button-icon.md): Botão de ícone para ações secundárias com estilos padrão, preenchido, tonal e delineado. Inclui estados de carregamento e links. Ideal para barras de ferramentas e cartões web.
- [Componente Card](https://www.mdui.org/pt-br/docs/2/components/card.md): O card é um contêiner versátil para conteúdo e ações relacionadas. Suporta estilos elevado, preenchido e delineado com suporte a mídia e links para qualquer tipo de interface.
- [Componente Checkbox](https://www.mdui.org/pt-br/docs/2/components/checkbox.md): Selecione várias opções. Suporta estados marcado, desmarcado e indeterminado. Com ícones customizados, validação e suporte completo a formulários em sua aplicação web moderna.
- [Componente Chip](https://www.mdui.org/pt-br/docs/2/components/chip.md): O chip representa entrada, seleção ou filtragem. Inclui variantes de assistência, filtro, entrada e sugestão com estados clicáveis ou removíveis para categorização eficiente.
- [Componente CircularProgress](https://www.mdui.org/pt-br/docs/2/components/circular-progress.md): Exibe a conclusão com barras circulares. Suporta os modos determinado e spinner. Tamanhos e cores customizáveis para botões, cargas ou atualizações de página no seu aplicativo.
- [Componente Collapse](https://www.mdui.org/pt-br/docs/2/components/collapse.md): Organiza o conteúdo em seções agrupadas para salvar espaço. Possui modo acordeão, gatilhos e animações. Ideal para FAQs e páginas de configurações complexas de seu aplicativo.
- [Componente Dialog](https://www.mdui.org/pt-br/docs/2/components/dialog.md): Diálogo para informações ou decisões importantes. Suporta títulos, ícones e botões com modos modal ou tela cheia. Oferece alerta, confirmação e funções de solicitação de dados.
- [Componente Divider](https://www.mdui.org/pt-br/docs/2/components/divider.md): Separação visual para listas e layouts. Suporta os modos horizontal e vertical com recuos customizados. Ferramenta básica para criar hierarquias de interface claras e fluidas.
- [Componente Dropdown](https://www.mdui.org/pt-br/docs/2/components/dropdown.md): Aciona menus ou conteúdos na posição do clique ou cursor. Possui múltiplos modos de ativação, posicionamento automático e atrasos ajustáveis para interações de usuário ricas.
- [Componente Fab](https://www.mdui.org/pt-br/docs/2/components/fab.md): O botão de ação flutuante destaca ações principais em formas regulares ou estendidas e três tamanhos. Com ícones, cores e estados de carga para acesso rápido a funções úteis.
- [Componente Icon](https://www.mdui.org/pt-br/docs/2/components/icon.md): Utilize Material Icons ou SVGs customizados. Personalize tamanho, cor e rotação via CSS. Melhora o reconhecimento visual em botões e menus de navegação de seu aplicativo web.
- [Componente Layout](https://www.mdui.org/pt-br/docs/2/components/layout.md): Organiza barras, gavetas e áreas de conteúdo. Possui um sistema de grid responsivo com breakpoints e espaçamentos customizados para construir estruturas de páginas completas.
- [Componente LinearProgress](https://www.mdui.org/pt-br/docs/2/components/linear-progress.md): Exibe o progresso de tarefas com barras horizontais. Suporta os modos determinado e indeterminado. Cores e alturas customizáveis para qualquer interface de carga ou de upload.
- [Componente List](https://www.mdui.org/pt-br/docs/2/components/list.md): Exibe itens verticais para navegação ou contatos. Suporta linhas simples, duplas ou triplas com avatares, ícones e links. Layout e conteúdo totalmente personalizáveis no app.
- [Componente Menu](https://www.mdui.org/pt-br/docs/2/components/menu.md): O menu exibe opções de operação verticalmente. Suporta modos de seleção, submenus, atalhos e conteúdo customizado. Perfeito para menus de contexto e barras de navegação web.
- [Componente NavigationBar](https://www.mdui.org/pt-br/docs/2/components/navigation-bar.md): Barra de navegação para alternar entre as páginas principais no celular. Suporta 3 a 5 itens com rótulos automáticos, ícones e badges. Possui ocultação ao rolar no aplicativo.
- [Componente NavigationDrawer](https://www.mdui.org/pt-br/docs/2/components/navigation-drawer.md): Gaveta lateral para navegação. Suporta os modos modal ou não modal com abertura para esquerda ou direita. Contém dados e listas para navegação em seu aplicativo moderno.
- [Componente NavigationRail](https://www.mdui.org/pt-br/docs/2/components/navigation-rail.md): Navegação lateral compacta para tablets e desktops. Suporta badges, divisores e alinhamento customizado. Exibe ícones com rótulos opcionais para otimizar o espaço em seu app.
- [Componente Radio](https://www.mdui.org/pt-br/docs/2/components/radio.md): Botões de rádio para seleções mutuas, garantindo uma única escolha. Suporta ícones personalizados e estados desabilitados para seus formulários e pesquisas de usuários no app.
- [Componente RangeSlider](https://www.mdui.org/pt-br/docs/2/components/range-slider.md): Slider de intervalo permite selecionar faixas com controles duplos. Possui passos discretos e rótulos customizados. Ideal para faixas de preços, tempo ou parâmetros técnicos.
- [Componente Select](https://www.mdui.org/pt-br/docs/2/components/select.md): Permite seleção única ou múltipla via menu suspenso. Possui rótulos, validação e ícones customizados. Ideal para lógica, entrada de dados e necessidades de filtragem no app.
- [Componente SegmentedButton](https://www.mdui.org/pt-br/docs/2/components/segmented-button.md): Botão segmentado permite seleção única ou múltipla para filtrar ou alternar vistas. Suporta ícones, links e estilos personalizados para controles de interface muito intuitivos.
- [Componente Slider](https://www.mdui.org/pt-br/docs/2/components/slider.md): Permite selecionar valores com controle de passos e marcas de escala. Apresenta validação e rótulos customizados. Ideal para ajustes de volume, brilho ou filtros de intervalo.
- [Componente Snackbar](https://www.mdui.org/pt-br/docs/2/components/snackbar.md): Feedback breve com botões de ação e fechamento automático. Suporta cores e posições customizadas e chamadas via código para uma melhor experiência em seu aplicativo moderno.
- [Componente Switch](https://www.mdui.org/pt-br/docs/2/components/switch.md): O switch alterna configurações binárias com feedback imediato. Suporta ícones, cores e tamanhos. Ideal para páginas de ajustes e gestão de preferências do usuário no app web.
- [Componente Tabs](https://www.mdui.org/pt-br/docs/2/components/tabs.md): As abas alternam entre múltiplas visões em uma área. Suporta estilos primário e secundário com ícones, badges e indicadores. Ideal para navegação por categorias em apps web.
- [Componente TextField](https://www.mdui.org/pt-br/docs/2/components/text-field.md): Entrada de linha única ou múltipla para senhas e e-mails. Possui rótulos, ícones e validação. Totalmente acessível com suporte a ajuste automático de altura das linhas no app.
- [Componente Tooltip](https://www.mdui.org/pt-br/docs/2/components/tooltip.md): Mostra informações extras ao passar o mouse ou focar. Suporta texto rico e posicionamento customizado. Ajuda os usuários a entender funções e recursos de sua aplicação web.
- [Componente TopAppBar](https://www.mdui.org/pt-br/docs/2/components/top-app-bar.md): Barra com títulos e navegação no topo. Possui vários estilos, efeitos de rolagem e botões customizados. Um cabeçalho unificado para a navegação de sua aplicação web moderna.

## Funções

- [Biblioteca de ferramentas jq](https://www.mdui.org/pt-br/docs/2/functions/jq.md): Biblioteca jq integrada com API similar ao jQuery em um sexto do tamanho. Suporta manipulação de DOM, eventos e animações sem dependências externas ou sobrecarga no seu projeto.
- [Função dialog](https://www.mdui.org/pt-br/docs/2/functions/dialog.md): Wrapper programático para mdui-dialog. Abra diálogos a partir do JavaScript sem usar HTML. Suporta títulos e botões customizados e retorna uma Promise para interações web.
- [Função alert](https://www.mdui.org/pt-br/docs/2/functions/alert.md): Substituto moderno para window.alert baseado no mdui-dialog. Mostre alertas temáticos com títulos e botões customizados sem bloquear o processo de renderização da sua página.
- [Função confirm](https://www.mdui.org/pt-br/docs/2/functions/confirm.md): Substituto para window.confirm no estilo Material Design. Use diálogos de confirmação via código e trate escolhas via Promise para obter melhor controle em seu web app moderno.
- [Função prompt](https://www.mdui.org/pt-br/docs/2/functions/prompt.md): Substituto para window.prompt com o estilo Material Design. Captura entradas via diálogos com validação e tipos customizados. Retorna uma Promise com o valor inserido no app.
- [Função snackbar](https://www.mdui.org/pt-br/docs/2/functions/snackbar.md): Chamada programática para o mdui-snackbar. Mostre mensagens de feedback com ações, duração e posição customizados. Sem a necessidade de HTML para alertas instantâneos no app.
- [Função getTheme](https://www.mdui.org/pt-br/docs/2/functions/getTheme.md): Recupere as configurações de tema da página ou de elementos. Suporta os modos claro, escuro e automático. Útil para ajustar a lógica ou estilos conforme o tema ativo no app.
- [Função setTheme](https://www.mdui.org/pt-br/docs/2/functions/setTheme.md): Define dinamicamente os temas claro, escuro ou automático para a página ou elementos. Suporta substituições de tema globais ou especificas para uma experiência web moderna.
- [Função getColorFromImage](https://www.mdui.org/pt-br/docs/2/functions/getColorFromImage.md): Extrai cores de imagens em hexadecimais. Combine com o setColorScheme para gerar paletas harmoniosas que combinam com seu conteúdo de forma dinâmica e automática em seu app.
- [Função setColorScheme](https://www.mdui.org/pt-br/docs/2/functions/setColorScheme.md): Gera paletas do Material Design a partir de uma cor hexadecimal. Suporta ajustes globais ou locais para personalização rápida e coesa das cores de sua marca em sua aplicação.
- [Função removeColorScheme](https://www.mdui.org/pt-br/docs/2/functions/removeColorScheme.md): Redefina esquemas de cores para restaurar a paleta padrão. Pode ser aplicado globalmente ou a elementos específicos, sendo ideal para redefinir o tema de sua aplicação web.
- [Função loadLocale](https://www.mdui.org/pt-br/docs/2/functions/loadLocale.md): Carrega pacotes de idiomas. Suporta carga sob demanda, prévia ou métodos estáticos para mais de 50 idiomas. Otimizado para ter um melhor desempenho em sua aplicação web.
- [Função setLocale](https://www.mdui.org/pt-br/docs/2/functions/setLocale.md): Define códigos de idioma da aplicação dinamicamente com suporte assíncrono. Aciona as atualizações de componentes automaticamente para localização sem recarregar a página.
- [Função getLocale](https://www.mdui.org/pt-br/docs/2/functions/getLocale.md): Recupera o código de idioma atual da aplicação. Útil para detecção de ambiente, carga de recursos ou ajustes de layout. Retorna strings simples de códigos de idiomas no app.
- [Função throttle](https://www.mdui.org/pt-br/docs/2/functions/throttle.md): Cria funções controladas para limitar a frequência de execução. Ideal para eventos como rolagem ou redimensionamento, aumentando o desempenho geral de sua aplicação moderna.
- [Função observeResize](https://www.mdui.org/pt-br/docs/2/functions/observeResize.md): Monitora o tamanho de elementos via ResizeObserver. Aciona retornos de chamada para layouts responsivos ou contêineres adaptáveis. Inclui suporte simples para limpeza eficaz.
- [Função breakpoint](https://www.mdui.org/pt-br/docs/2/functions/breakpoint.md): Verifica Breakpoints responsivos como xs, sm, md, lg, xl ou xxl. Avalia se a largura é maior, menor ou dentro de uma faixa para a lógica customizada de sua interface web.

## Bibliotecas

- [Biblioteca de ícones @mdui/icons](https://www.mdui.org/pt-br/docs/2/libraries/icons.md): Biblioteca independente com todos os ícones do Google. Otimizada para tree-shaking e carga sob demanda para reduzir o tamanho do bundle de seu projeto web moderno.