How code groups work
Wrap multiple code blocks in<CodeGroup /> tags. Each code block must have a filename or title, which becomes the label for that option.
Example of a code group
Tab sync and naming consistency
Code group tabs sync with other code groups and tab components on the page. If a user selectsPython in one code group or tab, all other components with a Python tab switch automatically.
This only works if labels match exactly. For example, if one component uses Python and another uses Python 3, they do not sync. Establish a naming convention and use it everywhere:
When to use the dropdown option
For pages with many language options, the default tab row can get crowded. Add thedropdown property to collapse the language selector into a dropdown menu:
Next up: Conditional content — How to show different prose and components based on context that’s already established on a page.