Comecar

Instale o pacote, importe o CSS global e escolha o entry point correto para cada componente.

1. Instale

npm install cosmemilton-ui react react-dom

Next e @iconify/react sao peers opcionais. Instale @iconify/react somente se usar CmIcon.

2. Importe o CSS uma vez

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

3. Configure o tema

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

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

4. Entry points

cosmemilton-ui/client

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

cosmemilton-ui/server

Componentes server-safe, tipos comuns, utilitarios e tokens que nao carregam hooks de cliente.

cosmemilton-ui/theme

CmThemeProvider, CmThemeScript, CmThemeToggle/Menu, temas, extendThemes e themeToCSSVars.

cosmemilton-ui/styles.css

CSS publicado. Importe uma unica vez no layout raiz ou main.tsx.

5. Copie um exemplo

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