DocsKitalpha

Installation

Set up the code component

To use any of the components, you first need to install the code component and set up the MDX integration.

Install

Prerequisites

Next.js, Tailwind CSS v4, MDX

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

Then add codehike plugins to your MDX config and the docskit component to your MDX components:

next.config.ts
import createMDX from "@next/mdx"

+
import { recmaCodeHike, remarkCodeHike } from "codehike/mdx"

+
import { chConfig } from "@/components/code.config"



const withMDX = createMDX({

  options: {

+
    remarkPlugins: [[remarkCodeHike, chConfig]],

+
    recmaPlugins: [[recmaCodeHike, chConfig]],

  },

})



export default withMDX({})
mdx-components.tsx
+
import { addDocsKit } from "@/components/docskit"



export function useMDXComponents(

  components: MDXComponents,

): MDXComponents {

-
  return {

-
    ...components,

-
  }

+
  return addDocsKit({

+
    ...components,

+
  })

}

Depending on your setup, the location of the mdx options and components might be different. For example, for fumadocs you need to update source.config.ts.

See the code component for usage examples.