Snippet code
A code snippet block is a read-only panel that shows source as source: a monospaced body with syntax colour, the filename in the chrome above it, line numbers down the gutter and a copy button that puts the whole thing on the clipboard. Orvain's Snippet code family is one component in four dresses, light and dark, each either rounded with the code floating on an inset panel, or flush to the card's edge under a taller header.
Most readers never read a snippet. They copy it and find out what it does in their own project, which makes the clipboard the component's real output and the place these blocks usually go wrong: line numbers, prompt characters and a truncating ellipsis belong to the drawing, not to the code, and none of them should survive a copy. Wrapping is the second trap. Code is the rare content where a line break changes meaning, so a long line scrolls sideways, with the bar left visible, so the reader knows there is more.
Code window
Best for
Docs and changelogs on a light page: the snippet sits on its own inset panel
Anatomy
Window chrome with the filename and a Copy that really copies · inset panel on a 32px card · line numbers · the file's own highlight palette
Flush code
Best for
Dense docs: the same window with the code running edge to edge
Anatomy
Taller chrome on a 20px card · panel flush to the edge · line numbers · click a line to hold it lit
Dark window
Best for
Landing pages and dark docs: the snippet reads as an editor
Anatomy
Same chrome inverted · inset panel on the dark card · outlined Copy · the palette's plain ink goes light
Dark flush
Best for
Terminal-style blocks: dark, edge to edge, nothing between the code and the card
Anatomy
Taller chrome on a 20px dark card · panel flush · outlined Copy · sideways scroll once a line outruns the stage
Using Snippet code
Reach for it when
- Documentation whose next step is the reader pasting the code into their own file.
- A changelog showing exactly what a migration changes.
- An install command on a landing page, where the command is the proof.
- Support answers that hand over a config file the reader has to keep intact.
Reach for something else when
- A flag, a function name or a path inside a sentence. Inline code keeps the sentence moving; a panel stops it.
- Code the reader is meant to change and run. That wants an editor or an embedded sandbox; a snippet is read-only on purpose.
- A whole file. Nobody reads past a screenful: show the lines that matter and link to the source for the rest.
Where it shows up
Install instructions
The first block on a quickstart page: one command, a copy button and nothing competing with it. Dark chrome earns its place here, because the command reads as something you paste into a terminal.
API examples
A reference page showing the same call in two languages, each with its filename in the chrome, so a reader can tell the server example from the client one without reading a line of it.
Migration notes
A release note showing the before and the after as two blocks rather than as prose. Line numbers pay for themselves here, because the paragraph above can point at the line that moved.
Support answer
A reply handing over a config file. It gets copied whole, so comments and indentation have to arrive on the clipboard exactly as they were drawn, including the blank line nobody notices.
Questions
Should code blocks have line numbers?
Add them when the surrounding text refers to particular lines, or when the block runs long enough that a reader needs somewhere to point. Leave them off for a single command meant to be copied, where they are only noise. Either way keep the numbers out of the clipboard: they belong to the gutter, not to the source.
How should a code block behave on a narrow screen?
Let the long line scroll horizontally, and show the scrollbar rather than hiding it. Wrapping is tempting but changes how the code reads, and in whitespace-sensitive languages it can change what the code means. A visible bar tells the reader something continues off-screen, which a silently clipped line never does.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPSnippet code
A code snippet block is a read-only panel that shows source as source: a monospaced body with syntax colour, the filename in the chrome above it, line numbers down the gutter and a copy button that puts the whole thing on the clipboard. Orvain's Snippet code family is one component in four dresses, light and dark, each either rounded with the code floating on an inset panel, or flush to the card's edge under a taller header.
Most readers never read a snippet. They copy it and find out what it does in their own project, which makes the clipboard the component's real output and the place these blocks usually go wrong: line numbers, prompt characters and a truncating ellipsis belong to the drawing, not to the code, and none of them should survive a copy. Wrapping is the second trap. Code is the rare content where a line break changes meaning, so a long line scrolls sideways, with the bar left visible, so the reader knows there is more.
Code window
Best for
Docs and changelogs on a light page: the snippet sits on its own inset panel
Anatomy
Window chrome with the filename and a Copy that really copies · inset panel on a 32px card · line numbers · the file's own highlight palette
Flush code
Best for
Dense docs: the same window with the code running edge to edge
Anatomy
Taller chrome on a 20px card · panel flush to the edge · line numbers · click a line to hold it lit
Dark window
Best for
Landing pages and dark docs: the snippet reads as an editor
Anatomy
Same chrome inverted · inset panel on the dark card · outlined Copy · the palette's plain ink goes light
Dark flush
Best for
Terminal-style blocks: dark, edge to edge, nothing between the code and the card
Anatomy
Taller chrome on a 20px dark card · panel flush · outlined Copy · sideways scroll once a line outruns the stage
Using Snippet code
Reach for it when
- Documentation whose next step is the reader pasting the code into their own file.
- A changelog showing exactly what a migration changes.
- An install command on a landing page, where the command is the proof.
- Support answers that hand over a config file the reader has to keep intact.
Reach for something else when
- A flag, a function name or a path inside a sentence. Inline code keeps the sentence moving; a panel stops it.
- Code the reader is meant to change and run. That wants an editor or an embedded sandbox; a snippet is read-only on purpose.
- A whole file. Nobody reads past a screenful: show the lines that matter and link to the source for the rest.
Where it shows up
Install instructions
The first block on a quickstart page: one command, a copy button and nothing competing with it. Dark chrome earns its place here, because the command reads as something you paste into a terminal.
API examples
A reference page showing the same call in two languages, each with its filename in the chrome, so a reader can tell the server example from the client one without reading a line of it.
Migration notes
A release note showing the before and the after as two blocks rather than as prose. Line numbers pay for themselves here, because the paragraph above can point at the line that moved.
Support answer
A reply handing over a config file. It gets copied whole, so comments and indentation have to arrive on the clipboard exactly as they were drawn, including the blank line nobody notices.
Questions
Should code blocks have line numbers?
Add them when the surrounding text refers to particular lines, or when the block runs long enough that a reader needs somewhere to point. Leave them off for a single command meant to be copied, where they are only noise. Either way keep the numbers out of the clipboard: they belong to the gutter, not to the source.
How should a code block behave on a narrow screen?
Let the long line scroll horizontally, and show the scrollbar rather than hiding it. Wrapping is tempting but changes how the code reads, and in whitespace-sensitive languages it can change what the code means. A visible bar tells the reader something continues off-screen, which a silently clipped line never does.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
