Code groups#

Code groups are a great way to group multiple codeblocks together, for example when you need to showcase multiple files. It's also a great way to show previews of code.

General usage#

To make a code group, simply add a <CodeGroup> component, with any number of <CodeGroup.Code> inside it.

The <CodeGroup.Code> will need a title and should only contain codeblocks or <Frame> components. Only put in one codeblock or <Frame> inside at a time.

<CodeGroup>
  <CodeGroup.Code title="test.ts">
    ```ts
    export function hello() {
      return "world";
    }
    ```
  </CodeGroup.Code>
  <CodeGroup.Code title="main.ts">
    ```ts
    import { hello } from "./test";
 
    console.log(hello());
    ```
  </CodeGroup.Code>
</CodeGroup>

export function hello() {
  return "world";
}

import { hello } from "./test";
 
console.log(hello());

Combining with Frames#

Codegroup children can also contain <Frame> components. See the example below.

<CodeGroup>
  <CodeGroup.Code title="Code">
    ```tsx
    <Button>Hello world</Button>
    ```
  </CodeGroup.Code>
  <CodeGroup.Code title="Preview">
    <Frame>
      <Button>Hello world</Button>
    </Frame>
  </CodeGroup.Code>
</CodeGroup>

<Button>Hello world</Button>

Component API - <CodeGroup />#

The base component, has no props other than children

Component API - <CodeGroup.Code />#

The CodeGroup item, can only be a child of a <CodeGroup />.