When to use
- Display code samples, configuration snippets, or query examples in documentation and product UI.
- Show generated or copyable technical content where syntax highlighting improves readability.
- Present short, self-contained examples that users may copy into their own workflows.
When to use something else
- For editable multi-line text entry, use Textarea.
- For single-line values such as IDs or tokens, use Input.
- For file upload of source files, use File upload.
Dos and don’ts
- Do provide a clear language or context label when the syntax isn’t obvious from surrounding copy.
- Do keep examples focused on the task the user is completing.
- Don’t dump entire files when a short, relevant excerpt is enough.
- Don’t rely on color alone to convey meaning in highlighted code — keep structure and indentation clear.
Behavior
- Prefer a copy control for short snippets; announce success with a brief status message or Sonner rather than relying on visual change alone.
- When content overflows the viewport, pair with Scroll so keyboard and pointer users can reach the full snippet.
Often used with
Card, Dialog, Scroll, and copy actions via Button.Accessibility
- Expose language: Include a visible or programmatically associated language label when highlighting is used so screen reader users understand the code context.
- Name copy actions: Give copy Buttons an explicit accessible name (for example,
aria-label="Copy code snippet"). - Don’t rely on color alone: Keep indentation and structure clear; syntax colors are supplemental.