Code Block
Standalone syntax-highlighted code, with a copy button.
Overview
CodeBlock renders a code string with shiki syntax highlighting. Two themes
(one-light / one-dark-pro) are pre-rendered and toggled by the .dark class, so
theme switches are instant with no re-highlight. Nest a CodeBlockCopyButton for
a hover-revealed copy affordance.
$ npx morpha-ui add code-blockStreamed markdown replies render their own fenced code via
Response. Reach for CodeBlock when you
have a code string in hand — a tool result, a snippet — rather than a
markdown document. Tool uses it for JSON params and results.
Installation
Distributed via the Morpha CLI: npx morpha-ui add code-block. Ported from
AI Elements; depends on shiki.
npx morpha-ui add code-blockAPI Reference
Prop
Type