Code Groups

CodeGroup displays code blocks in tabs with language icons.

Stable

Introduced: v0.1.3
Supported through: Latest

src/main.tsx

// code here

src/index/html

<!-- Code here -->

<CodeGroup>
  ```tsx title="src/main.tsx"
  // code here
  ```
  ```html title="src/index/html"
  <!-- Code here -->
  ```
</CodeGroup>

Tab labels use the code block's title, falling back to its language. Icons are selected automatically from the language, such as TypeScript for tsx and HTML5 for html.

CodeGroup Props3 properties

Property	Type	Default	Description
`children`	`React.ReactNode`	`-`	Fenced code blocks to display as tabs.
`defaultIndex`	`number`	`0`	Initially selected tab index.
`className`	`string`	`-`	Additional classes for the group.