Components

Code Group

Display multiple code blocks in a tabbed interface

Code groups allow you to display multiple code examples in a tabbed interface, making it easy to show the same functionality in different languages.

Basic Usage

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

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

package main

import "fmt"

func main() {
    greeting := "Hello, World!"
    fmt.Println(greeting)
}

<CodeGroup client:load titles={["JavaScript", "Python", "Go"]}>

\`\`\`javascript
const greeting = "Hello, World!";
console.log(greeting);
\`\`\`

\`\`\`python
greeting = "Hello, World!"
print(greeting)
\`\`\`

\`\`\`go
package main
import "fmt"
func main() {
    greeting := "Hello, World!"
    fmt.Println(greeting)
}
\`\`\`

</CodeGroup>

Package Manager Example

npm install @barodoc/core

pnpm add @barodoc/core

yarn add @barodoc/core

bun add @barodoc/core

Props