Code Groups

The Code Group component organizes multiple code blocks into a tabbed interface. The title from each block's metastring becomes the tab label.

Quick Start

Two package manager options.

npm install next react react-dom

pnpm add next react react-dom

Adding Options

Three options for a common task.

npm install next react react-dom

yarn add next react react-dom

pnpm add next react react-dom

Advanced

Show the same logic in different languages.

const greeting = 'Hello, World!'
console.log(greeting)

greeting = 'Hello, World!'
print(greeting)

package main
 
import "fmt"
 
func main() {
    fmt.Println("Hello, World!")
}

Options

The tab label comes from each child code block, resolved in this order:

1. title (recommended)
2. language
3. aria-label (with the " code block" suffix stripped)
4. "Tab N" fallback