Começar

npm install cosmemilton-ui react react-dom

Instale @iconify/react se usar CmIcon — ou se importar cosmemilton-ui/client em ambiente sem tree-shaking (o entry referencia CmIcon via CmSelect). Instale leaflet somente se usar CmMap pelo entry cosmemilton-ui/map.

// app/layout.tsx (Next) ou main.tsx (Vite/CRA)
import "cosmemilton-ui/styles.css";

O CSS já inclui os tokens de todos os temas embutidos — os componentes renderizam estilizados sem nenhum setup de tema (padrão cm-neutral). Para fixar outro tema sem JavaScript, use <html data-theme="cm-dark">. Se usar CmMap, importe também leaflet/dist/leaflet.css no layout raiz.

O CmThemeScript no head aplica o tema salvo antes do primeiro paint, sem flash no SSR.

import "cosmemilton-ui/styles.css";
import { CmThemeProvider, CmThemeScript } from "cosmemilton-ui/theme";

export default function RootLayout({ children }) {
  return (
    <html lang="pt-BR" suppressHydrationWarning>
      <head>
        <CmThemeScript />
      </head>
      <body>
        <CmThemeProvider>{children}</CmThemeProvider>
      </body>
    </html>
  );
}

cosmemilton-ui/client

Componentes interativos. Use em Client Components ou como fronteira cliente no App Router.

cosmemilton-ui/server

Componentes server-safe, tipos comuns, utilitários e tokens que não carregam hooks de cliente.

cosmemilton-ui/theme

CmThemeProvider, CmThemeScript, CmThemeToggle/Menu, temas, extendThemes e helpers de CSS de tema.

cosmemilton-ui/map

CmMap com Leaflet. Instale leaflet e importe leaflet/dist/leaflet.css apenas quando usar mapas.

cosmemilton-ui/styles.css

CSS publicado com reset global e os tokens de todos os temas embutidos. Importe uma única vez no layout raiz ou main.tsx.

cosmemilton-ui/components.css

CSS sem o reset global, para adoção incremental em apps existentes. Ambos têm variante .min.css.

<link rel="stylesheet" href="https://unpkg.com/cosmemilton-ui@3.15.0/styles.min.css" />

<script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/cosmemilton-ui@3.15.0"></script>

<div id="root"></div>
<script>
  const { CmButton } = window.CmUI;
  const button = React.createElement(CmButton, null, "Salvar");
  ReactDOM.createRoot(document.getElementById("root")).render(button);
</script>

A versão das URLs é gerada automaticamente a partir do pacote instalado nesta documentação. Em script puro não há transformação de JSX; use React.createElement ou um compilador no navegador.

import { CmButton } from "cosmemilton-ui/client";

export function SaveAction() {
  return <CmButton tone="primary">Salvar</CmButton>;
}

Depois abra os componentes e copie exemplos completos com preview idêntico.

1. Instale

2. Importe o CSS uma vez

3. Habilite a troca de tema (opcional)

4. Entry points

5. Sem bundler: use o script global

6. Copie um exemplo