Component · Content · 27
Code Block
Code Block = a dark panel with a filename tab and a copy button; never call it a text box.
message.ts
interface StandardMessage {
id: string
role: 'assistant'
content: string
stream: true
}What is a Code Block?
A code block shows an example verbatim. Name the header, the copy affordance, and the syntax tint.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- Say this state explicitly in the prompt.
Anatomy
These are the parts to name in your prompt.
- 01 Header
- 02 Code area
- 03 Copy button
When to use
- API and library documentation
- Terminal commands with expected output
- Config or interface samples in articles
Avoid when
- One variable or function name — use inline code
- Code the user should edit — use an editor
- More than a screenful — split into steps
See also
Create a code block component.
STYLE
- dark panel, 12px radius, 13px monospace
- header row: three window dots, a filename tab, a copy button
- two syntax tints: keywords purple, strings green
STATES
- default, copied — button flips to a green check for 2s
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui