Carregando…Carregando…Carregando…Carregando…Code block with filename tab, line numbers, copy button, scrollable maxHeight and multi-file tabs.
$ npx kikitocn add code-block@/lib/utilsimport { CodeBlock } from "@/components/ui/cn/code-block/CodeBlock";
export function CodeBlockExample() {
return (
<CodeBlock
language="tsx"
filename="Example.tsx"
showLineNumbers
code={`import { Button } from "@/components/ui/cn/button/Button";
export function Example() {
return <Button intent="primary">Clique aqui</Button>;
}`}
/>
);
}
// prop files — abas trocando entre arquivos diferentes
export function CodeBlockMultiFileExample() {
return (
<CodeBlock
showLineNumbers
files={[
{ filename: "Button.tsx", language: "tsx", code: "export function Button() { /* ... */ }" },
{ filename: "utils.ts", language: "ts", code: "export const cn = (...classes) => classes.filter(Boolean).join(' ');" },
]}
/>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
code | string | — | Código a ser exibido (modo single-file, ignorado quando `files` é passado) |
language | string | — | Label da linguagem exibido no topo (sem syntax highlight) |
filename | string | — | Nome do arquivo exibido no topo |
files | CodeBlockFile[] | undefined | Modo multi-arquivo: { filename, code, language? }[] — renderiza abas no topo |
defaultFileIndex | number | 0 | Aba ativa inicial em modo `files` (uncontrolled) |
showLineNumbers | boolean | false | Exibe numeração de linhas |
maxHeight | number | — | Altura máxima em px com scroll vertical |
className | string | — | Classes CSS extras |
style | CSSProperties | — | Estilos inline pro container |
lang=tsx · filename · showLineNumbers
import { Button } from "@/components/ui/cn/button/Button"; |
export function Example() { |
async function handleSave() { |
await saveData(); |
} |
return ( |
<Button intent="primary" onClick={handleSave}> |
Salvar |
</Button> |
); |
} |
lang=ts · sem filename · sem linha
const greet = (name: string): string => { |
return `Olá, ${name}!`; |
}; |
console.log(greet("Mundo")); |
maxHeight=120px
import { Button } from "@/components/ui/cn/button/Button"; |
export function Example() { |
async function handleSave() { |
await saveData(); |
} |
return ( |
<Button intent="primary" onClick={handleSave}> |
Salvar |
</Button> |
); |
} |
Copy button revela no hover ou no foco por teclado (Tab)
const greet = (name: string): string => { |
return `Olá, ${name}!`; |
}; |
console.log(greet("Mundo")); |
prop files — abas trocando entre arquivos diferentes
import { Button } from "@/components/ui/cn/button/Button"; |
export function Example() { |
async function handleSave() { |
await saveData(); |
} |
return ( |
<Button intent="primary" onClick={handleSave}> |
Salvar |
</Button> |
); |
} |
Advanced Code Block — syntax highlighting real via Shiki
export const explanations = {
main: "Real Shiki syntax highlighting",
detailed: "Theme fixed to github-dark, highlights on mount",
};Code Card — linguagem rotacionada na lateral, desloca no hover
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}Code Snippet — pílula clicável que copia o próprio conteúdo
Inline Code — trecho de código em meio a texto corrido
This is an example of a code found on cuicui.day which you can simply copy and paste into your own project using npx kikitocn add.