---
title: "Code snippet UI: anatomy, variants and examples | Kombai"
description: "A code snippet shows a few lines of code in a monospace block, with highlighting and a button to copy them."
canonical_url: https://kombai.com/glossary/code-snippet/
author: "The Kombai Team"
---

# Code snippet

A code snippet shows a few lines of code in a monospace block, with highlighting and a button to copy them.

- Also called: code block
- Platforms: Web
- In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/code-snippet/)

- [Corrour Studio](https://kombai.com/gallery/inspirations/code-snippet-web-1/) (Web)
- [Marline](https://kombai.com/gallery/inspirations/code-snippet-web-27/) (Web)
- [Install Anatase](https://kombai.com/gallery/inspirations/code-snippet-web-17/) (Web)

## What is a code snippet?

A code snippet is a read-only block of code set in a monospace font, with colors that pick out keywords, strings and comments. It keeps the code exactly as written, line breaks and indentation included, so people can read it or paste it somewhere else. Most snippets have a copy button, and many offer the same code in several languages.

- Code keeps its exact spacing and line breaks, and long lines scroll instead of wrapping.
- A copy button sits in the corner and confirms when the code is copied.

## When to use code snippet

- **Install and setup steps.** Commands and config people need to paste exactly as shown.
- **API examples.** A first request in cURL, JavaScript or Python, with keys filled in where possible.
- **Embed codes.** An iframe or script tag that puts a widget on someone else's site.

## When not to use one

- **Code people will edit.** Use a code editor or a text area when the code is meant to change.
- **Single values.** An API key or a link fits a read-only text field with a copy button.
- **Non-technical readers.** If people only need the result, offer a button or a setting instead of code.

## Anatomy

1. **Header**: Names the file or request
2. **Language tabs**: The same code, other languages
3. **Copy button**: Copies the whole block
4. **Line numbers**: Help people refer to a line
5. **Code**: Monospace, highlighted
6. **States**: Default, focus, copied

## Variants

We sorted the code snippet designs in the Kombai gallery into five patterns.

### 1. Snippets with language tabs

The same request in cURL, JavaScript, Python or TypeScript, with tabs above the block to switch between them.

- [Voussoir](https://kombai.com/gallery/inspirations/code-snippet-web-13/) (Web)
- [Phalarope](https://kombai.com/gallery/inspirations/code-snippet-web-33/) (Web)
- [Bobbinet](https://kombai.com/gallery/inspirations/code-snippet-web-16/) (Web)

### 2. Install commands

A one-line command, like npm install or git clone, in a slim block with a copy button at the end.

- [Vitrail](https://kombai.com/gallery/inspirations/code-snippet-web-42/) (Web)
- [Sortsmith](https://kombai.com/gallery/inspirations/code-snippet-web-48/) (Web)
- [Wollaston](https://kombai.com/gallery/inspirations/code-snippet-web-44/) (Web)

### 3. Embed codes

An iframe or script tag to paste into a website, often with options above it that change the code.

- [Junewood](https://kombai.com/gallery/inspirations/code-snippet-web-26/) (Web)
- [Zaltana](https://kombai.com/gallery/inspirations/code-snippet-web-46/) (Web)
- [Embed Events](https://kombai.com/gallery/inspirations/code-snippet-web-40/) (Web)

### 4. Code in AI answers

Code blocks inside a chat reply, labeled with the language and paired with Copy and Edit buttons.

- [Spinefold](https://kombai.com/gallery/inspirations/code-snippet-web-49/) (Web)
- [Pratincole](https://kombai.com/gallery/inspirations/code-snippet-web-34/) (Web)
- [Whirler](https://kombai.com/gallery/inspirations/code-snippet-web-43/) (Web)

### 5. Export code dialogs

A dialog that turns what people set up in a playground or console into code they can run themselves.

- [Scarba Console](https://kombai.com/gallery/inspirations/code-snippet-web-2/) (Web)
- [Easting](https://kombai.com/gallery/inspirations/code-snippet-web-21/) (Web)
- [Strawboard](https://kombai.com/gallery/inspirations/code-snippet-web-50/) (Web)

## Where code snippets show up

### Developer docs

Usage examples between paragraphs of a guide, with a file name above each block.

- [Mizzen](https://kombai.com/gallery/inspirations/code-snippet-web-29/) (Web)
- [Orogen](https://kombai.com/gallery/inspirations/code-snippet-web-32/) (Web)
- [Creel](https://kombai.com/gallery/inspirations/code-snippet-web-20/) (Web)

### API onboarding

A first request shown right after people create a key, so they can make a call in a minute.

- [Whimbrel Platform](https://kombai.com/gallery/inspirations/code-snippet-web-12/) (Web)
- [Foreland](https://kombai.com/gallery/inspirations/code-snippet-web-23/) (Web)
- [Saltmarsh](https://kombai.com/gallery/inspirations/code-snippet-web-35/) (Web)

### Deploy and setup commands

Terminal commands for deploying or running a project, sometimes with tabs for Bash, Zsh and Fish.

- [Prehnite](https://kombai.com/gallery/inspirations/code-snippet-web-6/) (Web)
- [Platen](https://kombai.com/gallery/inspirations/code-snippet-web-9/) (Web)
- [Gallwood Console](https://kombai.com/gallery/inspirations/code-snippet-web-24/) (Web)

## Code snippet vs similar components

| | [Code snippet](https://kombai.com/glossary/code-snippet/) | [Text area](https://kombai.com/glossary/text-area/) | [Text field](https://kombai.com/glossary/text-field/) |
|---|---|---|---|
| Holds | Read-only code | Editable text over many lines | One editable line |
| People | Read and copy it | Type and change it | Type a short value |
| Best for | Commands, examples and embeds | Messages, notes and raw markup | Names, keys and links |

## Build notes

- Put code in <pre><code>, so spacing and line breaks survive and the markup says it is code.
- Let long lines scroll sideways, and give the scrolling <pre> tabindex="0" so keyboard users can scroll it.
- Make the copy button a real <button> with a label like "Copy code", and announce "Copied" in a live region.
- Copy with navigator.clipboard.writeText, and copy the code only, without line numbers or prompts.
- Build language tabs as a tablist, so the arrow keys switch languages, and remember the choice across the page.
- Keep highlight colors at 4.5:1 contrast against the block background, in both light and dark themes.

## FAQ

### Should code snippets have line numbers?

Use them for longer blocks that the text refers to, like "see line 12". Skip them for one-line commands. Either way, keep them out of the copied text and out of the text selection.

### Should long lines wrap or scroll?

Scroll, for most code. Wrapping can make a line look like two and breaks the indentation that shows structure. Wrap only prose-like content, like a long URL in a short command, and make it obvious.

### Dark or light code blocks?

Either works. A dark block on a light page makes code easy to spot, while a block that matches the page feels calmer in long docs. Whatever you pick, check the highlight colors for contrast in both themes.

### Where should the copy button go?

In the top right corner of the block, always visible. Buttons that appear only on hover are missed on touch screens and by keyboard users. After a click, swap the icon or label to "Copied" for a moment.

## Related terms

- [Tabs](https://kombai.com/glossary/tabs/)
- [Text area](https://kombai.com/glossary/text-area/)
- [Card](https://kombai.com/glossary/card/)
- [Dialog](https://kombai.com/glossary/dialog/)

## References

- [MDN: The pre element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre)
- [MDN: The code element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code)
- [MDN: Clipboard writeText method](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText)