cosmemilton-ui/clientDados & visualizacao

CmCodeBlock

Use em documentacao, telas tecnicas e auditores de configuracao que precisam expor comandos copiaveis.

Import

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

Bloco copiavel

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

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

npm install cosmemilton-ui

import { CmCodeBlock } from "cosmemilton-ui/client";
import { CmStack } from "cosmemilton-ui/server";

const code = [
  'import { CmButton } from "cosmemilton-ui/client";',
  "",
  "export function SaveAction() {",
  '  return <CmButton tone="primary">Salvar</CmButton>;',
  "}",
].join("\n");

export default function Example() {
  return (
    <CmStack gap="sm">
      <CmCodeBlock language="tsx" copyable code={code} />
      <CmCodeBlock inline code="npm install cosmemilton-ui" />
    </CmStack>
  );
}

API rapida

CmCodeBlock

codelanguagecopyableinlinecopyLabel