Entry points e instalação

Snippets

Trechos prontos para colar no projeto.

Instalação

npm install cosmemilton-ui react react-dom

CSS global

Inclui o reset global e os tokens de todos os temas embutidos — nada mais é necessário para renderizar componentes estilizados.

import "cosmemilton-ui/styles.css";

Adoção incremental em app existente

components.css traz tokens e estilos de componentes sem o reset global: a página continua com o estilo do app e só as subárvores cm-* são normalizadas.

import "cosmemilton-ui/components.css";

Imports por ambiente

import { CmButton } from "cosmemilton-ui/client";
import { CmCard, CmStack } from "cosmemilton-ui/server";
import { CmThemeProvider } from "cosmemilton-ui/theme";
import { CmMap } from "cosmemilton-ui/map";

Mapa com Leaflet

CmMap fica num entry dedicado para manter Leaflet como peer opcional. Importe o CSS do Leaflet no layout raiz.

npm install leaflet

// app/layout.tsx
import "cosmemilton-ui/styles.css";
import "leaflet/dist/leaflet.css";

import { CmMap } from "cosmemilton-ui/map";

Script global (sem bundler)

Carregue CSS, React e ReactDOM antes da biblioteca. A versão da URL acompanha automaticamente o pacote instalado pela documentação.

<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;
  ReactDOM.createRoot(document.getElementById("root")).render(
    React.createElement(CmButton, null, "Salvar")
  );
</script>

Notas

`cosmemilton-ui/client` contém componentes interativos.

`cosmemilton-ui/server` contém componentes server-safe e utilitários.

`cosmemilton-ui/theme` concentra provider, script, toggle, temas e tokens.

`cosmemilton-ui/map` contém `CmMap` e exige o peer opcional `leaflet` apenas quando você usar mapas.

O bundle global expõe `window.CmUI`, não inclui React/ReactDOM e pode ser carregado pela URL raiz do pacote no unpkg. Ele não inclui o `CmMap`, para não tornar Leaflet obrigatório em páginas sem bundler.

Em uma tag `<script>` sem compilação, escreva os elementos com `React.createElement`; JSX exige uma etapa de transformação.

`cosmemilton-ui/styles.css` e `cosmemilton-ui/components.css` também existem minificados (`styles.min.css`, `components.min.css`).

Todo o CSS é publicado dentro de `@layer cm.reset, cm.tokens, cm.components` — qualquer CSS seu fora de layer sempre vence o da biblioteca, sem guerra de especificidade.