Code Block

Overview

Code Block is a versatile container for displaying code, commands, and technical snippets across the interface. Its 4 layout styles cover everything from full IDE-like previews to single-line minimal embeds, with built-in syntax highlighting, copy-to-clipboard, and package manager tabs for terminal commands.

When should you use them?

Use a code block whenever you display code, a command, or a technical snippet that users might read, copy, or run, like documentation examples, install commands, or configuration. Pick the layout for the context: Full for rich examples, Terminal for commands, Minimal for inline snippets.

How should you use them?

• Use the layout for the context: Full for documentation examples, Terminal for commands, Minimal for short inline snippets.
• Set the correct language so syntax highlighting is accurate and readable.
• Use the Terminal layout with package manager tabs for install commands, so users copy the right one.
• Keep copy-to-clipboard available and confirm success so users know the snippet was captured.
• Use the Preview / Code toggle for live component examples in documentation.
• Keep syntax colors high-contrast and the code selectable, so it's readable and accessible.