Code Tabs | DocsKit

Install

$ pnpm dlx shadcn@latest add https://docskit.codehike.org/r/tabs

Add the CodeGroup component so that it's available in your MDX files:

@/components/docskit.tsx

+
import { CodeGroup } from "./code.tabs"

export function addDocsKit(
  components: MDXComponents,
) {
  return {
    ...components,
    DocsKitCode,
+
    CodeGroup,
  }
}

ExamplesTry them in the Playground

content.mdx

<CodeGroup flags="c">

```js !! a.js
function lorem(ipsum) {
  return ipsum
}
```

```css !! b.css
body {
  margin: 0;
}
```

</CodeGroup>

preview

function lorem(ipsum) {
  return ipsum
}

Store selected tab name in local storage (across any CodeGroup with the same key):

content.mdx

<CodeGroup storage="js-py">

```js !! node.js
function lorem(ipsum) {
  return ipsum
}
```

```py !! python
def lorem(ipsum):
  dolor = ipsum.split(" ")
  return dolor
```

preview

function lorem(ipsum) {
  return ipsum
}

...

console.log("Hello, world!")