Content

CodeBlock

Code container with optional macOS-style chrome, filename and language labels, and a one-click copy button. Pass raw code via the `code` prop; provide `children` for syntax-highlighted JSX rendering.

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)