CosmeMilton UI
Uma vitrine viva para validar cada componente da biblioteca, comparar estilos por tema e copiar exemplos de implementação em projetos Next e React.
Primeiros passos
Instalação
Como instalar o pacote e preparar o projeto consumidor.
Setup de tema
Como ligar CmThemeProvider, CmThemeScript e CmThemeToggle.
Tokens
Cores, raios, sombras e tipografia expostos por CSS variables.
Imports
Caminhos públicos para importar componentes, hooks e tema.
Next e React
Uso em App Router, client components e providers.
Checklist de validação
A biblioteca compila com TypeScript.
O docs app consome cosmemilton-ui@1.3.0 publicado no npm.
Todas as páginas de componentes renderizam previews vivos.
Playwright percorre home, guias e componentes.
Componentes
CmAccordion
Seções expansivas para conteúdo em camadas.
CmAlert
Mensagens contextuais com tons de status.
CmAlertDialog
Confirmação acionada por trigger declarativo.
CmAppShell
Shell administrativo com sidebar, topbar e conteúdo rolável.
CmAspectRatio
Container de mídia com proporção estável.
CmAvatar
Imagem ou fallback de usuário.
CmBadge
Marcadores curtos para status e categorias.
CmBarChart
Gráfico de barras simples para leitura rápida.
CmBreadcrumb
Mostra o caminho até a página atual.
CmButton
Ações primárias, secundárias e estados de carregamento.
CmButtonGroup
Agrupamento visual de botões relacionados.
CmCalendar
Calendário mensal com seleção de data.
CmCard
Superfícies flexíveis para dashboards, perfis, planos e conteúdo destacado.
CmCarousel
Sequência navegável para showcases, onboarding e destaques de produto.
CmChart
Barras horizontais compactas.
CmCheckbox
Entrada booleana com label e descrição.
CmCodeBlock
Bloco de código com cópia opcional e versão inline.
CmCollapsible
Bloco de conteúdo recolhível.
CmCombobox
Seleção pesquisável com lista filtrável.
CmCommand
Paleta pesquisável para executar ações rápidas.
CmConfirmDialog
CmDialog controlado para confirmar ações.
CmContextMenu
Menu de ações aberto pelo clique direito em uma área alvo.
CmDataTable
Tabela com ordenação, paginação, seleção, ações e preferências de colunas.
CmDialog
Modal controlado com cabeçalho, corpo e rodapé.
CmDrawer
Painel lateral ou inferior controlado.
CmDropdownMenu
Lista de ações ancorada em trigger.
CmEmpty
Estado vazio com ação opcional.
CmField
Wrapper para rótulo, ajuda, erro e controle.
CmForm
Estrutura de formulário com título e ações.
CmGrid
CmGrid responsivo com spans por breakpoint.
CmHoverCard
Conteúdo flutuante em hover.
CmIcon
Renderizador universal de ícones Iconify.
CmIconBadge
Ícone em círculo para detalhes, status e listas compactas.
CmInput
Campo de texto com label flutuante e adornos.
CmInputGroup
Composição de prefixo, campo e sufixo.
CmInputOTP
Entrada segmentada para códigos.
CmItem
Linha clicável com título, descrição e meta.
CmKbd
Representação visual de teclas.
CmLabel
Rótulo de formulário com opcionalidade.
CmLayout
Primitivos CmRow, CmCol, CmStack e CmContainer.
CmLink
Link temático com variantes para texto, botão e card.
CmLineChart
Gráfico de linha SVG responsivo.
CmMenubar
Barra compacta de ações de navegação.
CmMetricCard
Card de métrica com tom, acento, ícone e estado de carregamento.
CmMultiSelect
Seleção múltipla com popover.
CmNavigationMenu
Menu horizontal de links.
CmPage
Container padrão de página com largura, padding e espaçamento.
CmPageHeader
Cabeçalho de página com eyebrow, título, descrição, meta e ações.
CmPagination
Controle de páginas com irmãos.
CmPopover
Painel flutuante ancorado para filtros, ações rápidas e conteúdo leve.
CmPortal
Renderiza overlays customizados fora da árvore visual atual, direto no document.body.
CmProgress
Barra de progresso acessível.
CmProgressModal
Modal de acompanhamento por etapas.
CmRadioGroup
Grupo controlado de opções exclusivas em lista.
CmResizable
Painel com largura ajustável.
CmScrollArea
Área com rolagem e altura controlada.
CmSelect
CmSelect customizado com label flutuante.
CmSeparator
Divisão horizontal ou vertical.
CmSectionHeader
Cabeçalho de seção para cards, listas e blocos de conteúdo.
CmSidebar
Layout lateral autocontido com menu recolhível.
CmSplitButton
Botão principal com seleção de opção.
CmStatCard
Indicador numérico com tendência.
CmSwitch
Controle on/off com estado controlado e rótulo associado.
CmTabs
Navegação local por abas com variantes e controle opcional.
CmThemeToggle
Seletor dos temas registrados no CmThemeProvider.
CmToolbar
Barra responsiva para filtros, comandos e ações de tela.
CmText
Tipografia padronizada por tom, peso e tamanho.
CmTextarea
Campo de texto longo com adornos.
CmToast
Notificações temporárias via provider.
CmTopbar
Barra superior com slots de início, centro e ações.
CmUserMenu
Menu de usuário para headers com avatar, identidade e ações.
CmTreeView
Árvore hierárquica com busca, ações e seleção.