Content

CodeBlock

Code container with optional window chrome, filename and language labels, and a copy button that says so when the copy fails. Pass raw code in code, or children for highlighted JSX.

view .md

Preview

terminal · zsh

~/your-appbash

npx @entrepta/cli@latest init --theme=ivy
npx @entrepta/cli@latest add button card command-palette

hero.tsx

tsx

import { Button } from "@/components/entrepta/button"

<Button variant="primary">Ship</Button>

Installation

terminal

bash

npx @entrepta/cli@latest add code-block

Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

code-block.tsx

tsx

import { CodeBlock } from "@/components/entrepta/code-block"

// Plain copy-paste snippet
<CodeBlock
  code={`npx @entrepta/cli@latest init --theme=ivy`}
  filename="install.sh"
  language="bash"
  variant="terminal"
/>

// Custom highlighted body; copy still grabs the raw code
<CodeBlock code={raw} filename="tokens.css" language="css">
  <span className="text-[var(--fg-brand)]">--fg-brand</span>: #7C6BFF;
</CodeBlock>

Props

Prop	Type	Default	Description
code	string	-	Raw code string copied to the clipboard. Required.
filename	string	-	Label shown on the left of the chrome
language	string	-	Language tag shown on the right (e.g. bash, tsx, css)
meta	string	-	Secondary label between filename and language
variant	"default" \| "terminal"	"default"	`terminal` adds three macOS-style window dots
showCopy	boolean	true	Toggle the copy button
copyTimeout	number	1500	How long the 'copied' state stays visible (ms)