diff --git a/components/code-groups.mdx b/components/code-groups.mdx index c1eb4d08..35e76652 100644 --- a/components/code-groups.mdx +++ b/components/code-groups.mdx @@ -1,12 +1,10 @@ --- title: "Code groups" -description: "The CodeGroup component lets you combine code blocks in a display separated by tabs" +description: "Display multiple code examples in a tabbed interface" icon: "group" --- -You will need to make [Code Blocks](/code) then add the `` component around them. Every Code Block must have a filename because we use the names for the tab buttons. - -See below for an example of the end result. +Use the `CodeGroup` component to display multiple code blocks in a tabbed interface, making it easy for users to compare implementations across different programming languages or see alternative approaches to the same task. @@ -28,9 +26,9 @@ class HelloWorld { - +To create a code group, wrap multiple code blocks with `` tags. Each code block must include a title, which becomes the tab label. -````mdx Code Group Example +````mdx ```javascript helloWorld.js @@ -51,5 +49,3 @@ class HelloWorld { ```` - -