Snippets are pieces of reusable code - used as building blocks that can be copied and added to projects to assist engineers and customers with development.



import { Snippet } from "@twilio-labs/match/components";
const Component = () => (
<Snippet langauge="javascript">{`console.log("Ahoy, world!");`}</Snippet>

Snippet Props

variant?SnippetVariant'dark''dark', 'light'
languageSnippetLanguagenull'go', 'javascript', 'csharp', 'php', 'ruby', 'python', 'java', 'json', 'c', 'bash', 'shell-session', 'groovy'
label?stringnullFilename or snippet name.
githubLink?stringnullLink to full GitHub or Gist source code.
showLineNumbers?booleantrueInclude line numbers in code block.
wrapLines?booleanfalseWraps long lines of code.
maxLines?numbernullConstrains the height of code block to a set number of lines.

SnippetGroup Props

variant?SnippetVariant'dark''dark', 'light'
label?stringnullFile name or snippet name.
compact?booleanfalseForce mobile optimized layout for all breakpoints.


About Snippets

The Snippet component improves readability of embedded code samples with syntax highlighting and automatic line numbering. All provided languages support both a light and dark theme.

Multiple Snippets may be combined with the SnippetGroup component. A common use case for SnippetGroups is providing a code sample in multiple languages.


Both Snippet and SnippetGroup are fully keyboard accessible. Here are some tips to ensure a positive user experience for all users:

  • Provide a descriptive label such as the current filename or step in a process to clarify the purpose of the Snippet.
  • Enable long line wrapping whenever possible for a better reading experience.


Single Line

Single line Snippets exclude the label bar and line numbers. It is automatically detected but will default to the multi line layout if line wrapping is enabled.

Multi Line

A multi line snippet displays a label and line numbers by default. If no label is provided the snippet language will be used as a fallback.


Snippets can be grouped to provide multiple languages for a code example. The label supplied to each Snippet will be used as the tab name for navigation. If no label is provided the language will be used as a fallback.


When placing snippet groups in a tight space, the compact property may be used to force a mobile optimized layout for all breakpoints.