Code blockAI

Monospaced code with an optional title, copy button, line numbers and diff lines. Used by Response and Tool Call.

npx prodular-ui add code-block

With title and copy

Line numbers for code people will discuss. The destructive variant is for error output.

unpaid-due-soon.sql

select vendor, sum(amount) as totalfrom ap_invoiceswhere status = 'unpaid'  and due_date < current_date + interval '14 days'group by vendororder by total desc;

ERROR: column "due_date" does not exist. Did you mean "due_on"?

import {  CodeBlock,  CodeBlockActions,  CodeBlockContent,  CodeBlockCopyButton,  CodeBlockHeader,  CodeBlockTitle,} from "@/components/ui/code-block"
const sql = `select vendor, sum(amount) as totalfrom ap_invoiceswhere status = 'unpaid'  and due_date < current_date + interval '14 days'group by vendororder by total desc;`
export default function CodeBlockDefault() {  return (    <div className="flex w-full max-w-xl flex-col gap-4">      <CodeBlock>        <CodeBlockHeader>          <CodeBlockTitle>unpaid-due-soon.sql</CodeBlockTitle>          <CodeBlockActions>            <CodeBlockCopyButton value={sql} />          </CodeBlockActions>        </CodeBlockHeader>        <CodeBlockContent lineNumbers>{sql}</CodeBlockContent>      </CodeBlock>      <CodeBlock variant="destructive" size="sm">        <CodeBlockContent wrap>          {"ERROR: column \"due_date\" does not exist. Did you mean \"due_on\"?"}        </CodeBlockContent>      </CodeBlock>    </div>  )}

Diff

Added and removed lines for changes an agent proposes.

infra/s3.tf

resource "aws_s3_bucket_lifecycle_configuration" "events_raw" {  rule {    id     = "expire-raw-events"    status = "Disabled"    status = "Enabled"    expiration {      days = 90    }  }}

import {  CodeBlock,  CodeBlockActions,  CodeBlockContent,  CodeBlockCopyButton,  CodeBlockHeader,  CodeBlockLine,  CodeBlockTitle,} from "@/components/ui/code-block"
export default function CodeBlockDiff() {  return (    <CodeBlock className="max-w-xl">      <CodeBlockHeader>        <CodeBlockTitle>infra/s3.tf</CodeBlockTitle>        <CodeBlockActions>          <CodeBlockCopyButton value={"expiration {\n  days = 90\n}"} />        </CodeBlockActions>      </CodeBlockHeader>      <CodeBlockContent lineNumbers startLine={41}>        <CodeBlockLine>{'resource "aws_s3_bucket_lifecycle_configuration" "events_raw" {'}</CodeBlockLine>        <CodeBlockLine>{"  rule {"}</CodeBlockLine>        <CodeBlockLine>{'    id     = "expire-raw-events"'}</CodeBlockLine>        <CodeBlockLine variant="removed">{'    status = "Disabled"'}</CodeBlockLine>        <CodeBlockLine variant="added">{'    status = "Enabled"'}</CodeBlockLine>        <CodeBlockLine variant="added">{"    expiration {"}</CodeBlockLine>        <CodeBlockLine variant="added">{"      days = 90"}</CodeBlockLine>        <CodeBlockLine variant="added">{"    }"}</CodeBlockLine>        <CodeBlockLine>{"  }"}</CodeBlockLine>        <CodeBlockLine>{"}"}</CodeBlockLine>      </CodeBlockContent>    </CodeBlock>  )}

Anatomy

<CodeBlock>  <CodeBlockHeader>    <CodeBlockTitle>query.sql</CodeBlockTitle>    <CodeBlockActions><CodeBlockCopyButton value={code} /></CodeBlockActions>  </CodeBlockHeader>  <CodeBlockContent>{code}</CodeBlockContent></CodeBlock>

Guidance

Use it when

For code, queries, config and logs in answers and tool output.
The ghost variant inside another container, such as a tool call, so it adds no second box.

Avoid

Code blocks for one short command inside a sentence. Use inline code.
Line numbers on snippets under five lines.

Rules for AI agents

Published in llms-full.txt and the registry, so coding agents follow them when they build with this component.

Always include CodeBlockCopyButton with the exact code as value.
Use variant="ghost" when the code sits inside a Card, ToolCall or Popover.
Use CodeBlockLine with variant added or removed for proposed changes, and lineNumbers with startLine to match the real file.
Do not hand write code blocks in Response. Fenced markdown becomes a CodeBlock automatically.

API

CodeBlock

Prop	Type	Default	Description
variant	"default" \| "ghost" \| "destructive"	"default"	Bordered, borderless or error.
size	"default" \| "sm"	"default"	Text and padding.

CodeBlockContent

Prop	Type	Default	Description
lineNumbers / startLine / wrap	boolean, number, boolean		Numbering and wrapping.

CodeBlockLine

Prop	Type	Default	Description
variant	"default" \| "added" \| "removed" \| "highlighted"		Diff and highlight lines.

CodeBlockCopyButton

Prop	Type	Default	Description
value	string		Text copied to the clipboard.