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,

+
  })

}

See the code component for usage examples.