Recurso
Base

Next, RSC e React puro

A separação de entry points permite usar componentes server-safe em RSC e componentes interativos somente onde a tela precisa de cliente.

Snippets

Trechos prontos para colar no projeto.

Server Component

tsx
import { CmCard, CmStack, CmText } from "cosmemilton-ui/server";

export default function DashboardSummary() {
  return (
    <CmCard padding="lg">
      <CmStack gap="xs">
        <CmText weight="semibold">Pedidos</CmText>
        <CmText tone="muted">Resumo renderizado no servidor.</CmText>
      </CmStack>
    </CmCard>
  );
}

Client Component

tsx
"use client";

import { useState } from "react";
import { CmSwitch } from "cosmemilton-ui/client";

export function ToggleSetting() {
  const [checked, setChecked] = useState(true);
  return <CmSwitch checked={checked} onCheckedChange={setChecked} />;
}

Notas

Em React puro, importar `cosmemilton-ui/styles.css` uma vez já basta para renderizar componentes estilizados (tema padrão cm-neutral).

`CmThemeProvider` é necessário apenas para troca de tema em runtime (CmThemeToggle, useCmTheme, persistência em localStorage, temas custom).

Navegação aceita adaptadores por `linkComponent`, então não depende de Next em runtime.