--- title: "Getting started" description: "Add docs to a Next.js project that uses shadcn/ui, with one shadcn CLI command." url: https://docscn.dev/docs/getting-started lastModified: 2026-10-09T09:13:37.000Z --- # Getting started (/docs/getting-started) > Add docs to a Next.js project that uses shadcn/ui, with one shadcn CLI command. docscn supports Next.js projects that use shadcn/ui with [Base UI](https://base-ui.com) (the `base-*` styles). ## Create a project [#create-a-project] If you don't have a project yet, create one with shadcn/ui and Base UI: npm pnpm yarn bun ```bash npx shadcn@latest init --template=next --base=base ``` ```bash pnpm dlx shadcn@latest init --template=next --base=base ``` ```bash yarn dlx shadcn@latest init --template=next --base=base ``` ```bash bun x shadcn@latest init --template=next --base=base ``` ## Install the docs block [#install-the-docs-block] docscn is listed in the [shadcn/ui registry index](https://ui.shadcn.com/docs/registry/registry-index), so the CLI finds `@docscn` items without any setup. The `docs` block installs every docscn component, plus everything a docs site needs: * `lib/source.ts`: loads `content/docs` with [Fumadocs MDX](https://fumadocs.dev/docs/mdx) * `lib/layout.shared.tsx`: shared layout options (title, links, GitHub URL) * `components/mdx.tsx`: the MDX components * `app/docs/layout.tsx` and `app/docs/[[...slug]]/page.tsx`: the docs routes * `app/api/search/route.ts`: the search API * `content/docs/index.mdx` and `meta.json`: a first page npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/docs ``` ```bash pnpm dlx shadcn@latest add @docscn/docs ``` ```bash yarn dlx shadcn@latest add @docscn/docs ``` ```bash bun x shadcn@latest add @docscn/docs ``` Fumadocs MDX depends on esbuild, and pnpm 11 won't install a package with an install script until you decide whether it may run. If the install stops with `ERR_PNPM_IGNORED_BUILDS`, pnpm has added a placeholder line, `esbuild: set this to true or false`, under `allowBuilds` in `pnpm-workspace.yaml`. Change it to `esbuild: false` (esbuild works without its script) and run the command again. ## Finish the setup [#finish-the-setup] Two files need small edits the CLI can't make for you. Wrap your app in `RootProvider`. It includes [next-themes](https://github.com/pacocoursey/next-themes), so it replaces the `ThemeProvider` from shadcn/ui's template or dark mode guide: ```tsx title="app/layout.tsx" import { RootProvider } from "@/components/docs/provider/next"; // [!code ++] export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} {/* [!code ++] */} ); } ``` Compile MDX with Fumadocs MDX: ```ts title="next.config.ts" import { createMDX } from "fumadocs-mdx/next"; // [!code ++] import type { NextConfig } from "next"; const nextConfig: NextConfig = {}; export default createMDX()(nextConfig); // [!code ++] ``` ## Run it [#run-it] Start the dev server and open [localhost:3000/docs](http://localhost:3000/docs): npm pnpm yarn bun ```bash npm run dev ``` ```bash pnpm run dev ``` ```bash yarn dev ``` ```bash bun run dev ``` Write pages as `.mdx` files in `content/docs`, and order them with `meta.json`. See the [Fumadocs docs](https://fumadocs.dev/docs) for the page and `meta.json` conventions. ## Install components one by one [#install-components-one-by-one] You can also install components individually, for example: npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/docs-layout @docscn/docs-page @docscn/mdx ``` ```bash pnpm dlx shadcn@latest add @docscn/docs-layout @docscn/docs-page @docscn/mdx ``` ```bash yarn dlx shadcn@latest add @docscn/docs-layout @docscn/docs-page @docscn/mdx ``` ```bash bun x shadcn@latest add @docscn/docs-layout @docscn/docs-page @docscn/mdx ``` Each component lists the shadcn/ui primitives and other docscn components it needs, and the CLI installs them too. See the component pages for what each one does. ## Monorepos [#monorepos] In a [shadcn/ui monorepo](https://ui.shadcn.com/docs/monorepo), run the commands on this page in your app's directory (for example `apps/web`). docscn's components install into the app, and the shadcn/ui primitives they use into the shared `packages/ui`. Two extra steps work around bugs in the shadcn CLI. Before you install docscn, add the sidebar from `packages/ui`. Installed from the app, the CLI puts the sidebar's `use-mobile` hook in the app, where the sidebar can't import it ([shadcn-ui/ui#12212](https://github.com/shadcn-ui/ui/issues/12212)): npm pnpm yarn bun ```bash npx shadcn@latest add sidebar ``` ```bash pnpm dlx shadcn@latest add sidebar ``` ```bash yarn dlx shadcn@latest add sidebar ``` ```bash bun x shadcn@latest add sidebar ``` After you install docscn, add its dependencies to your app. The CLI adds them to `packages/ui/package.json` only, so the app can't import them ([shadcn-ui/ui#12213](https://github.com/shadcn-ui/ui/issues/12213)). Run these in your app's directory: npm pnpm yarn bun ```bash npm install @base-ui/react @fuma-translate/react@^1.0.2 class-variance-authority cn fumadocs-core@^16.16.2 fumadocs-mdx@^15.4.6 lucide-react next-themes react-medium-image-zoom rehype-raw scroll-into-view-if-needed shiki@^4.5.0 unified unist-util-visit ``` ```bash pnpm add @base-ui/react @fuma-translate/react@^1.0.2 class-variance-authority cn fumadocs-core@^16.16.2 fumadocs-mdx@^15.4.6 lucide-react next-themes react-medium-image-zoom rehype-raw scroll-into-view-if-needed shiki@^4.5.0 unified unist-util-visit ``` ```bash yarn add @base-ui/react @fuma-translate/react@^1.0.2 class-variance-authority cn fumadocs-core@^16.16.2 fumadocs-mdx@^15.4.6 lucide-react next-themes react-medium-image-zoom rehype-raw scroll-into-view-if-needed shiki@^4.5.0 unified unist-util-visit ``` ```bash bun add @base-ui/react @fuma-translate/react@^1.0.2 class-variance-authority cn fumadocs-core@^16.16.2 fumadocs-mdx@^15.4.6 lucide-react next-themes react-medium-image-zoom rehype-raw scroll-into-view-if-needed shiki@^4.5.0 unified unist-util-visit ``` npm pnpm yarn bun ```bash npm install -D @types/hast @types/mdx ``` ```bash pnpm add -D @types/hast @types/mdx ``` ```bash yarn add --dev @types/hast @types/mdx ``` ```bash bun add --dev @types/hast @types/mdx ``` These are the packages the `docs` block needs. The [AI chat](/docs/components/ai-chat) needs these too: npm pnpm yarn bun ```bash npm install @ai-sdk/react@^4.0.0 ai@^7.0.0 @openrouter/ai-sdk-provider@^3.1.0 flexsearch@^0.8.212 hast-util-to-jsx-runtime@^2.3.6 remark@^15.0.1 remark-gfm@^4.0.1 remark-rehype@^11.1.2 remend@^1.4.0 zod@^4.0.0 ``` ```bash pnpm add @ai-sdk/react@^4.0.0 ai@^7.0.0 @openrouter/ai-sdk-provider@^3.1.0 flexsearch@^0.8.212 hast-util-to-jsx-runtime@^2.3.6 remark@^15.0.1 remark-gfm@^4.0.1 remark-rehype@^11.1.2 remend@^1.4.0 zod@^4.0.0 ``` ```bash yarn add @ai-sdk/react@^4.0.0 ai@^7.0.0 @openrouter/ai-sdk-provider@^3.1.0 flexsearch@^0.8.212 hast-util-to-jsx-runtime@^2.3.6 remark@^15.0.1 remark-gfm@^4.0.1 remark-rehype@^11.1.2 remend@^1.4.0 zod@^4.0.0 ``` ```bash bun add @ai-sdk/react@^4.0.0 ai@^7.0.0 @openrouter/ai-sdk-provider@^3.1.0 flexsearch@^0.8.212 hast-util-to-jsx-runtime@^2.3.6 remark@^15.0.1 remark-gfm@^4.0.1 remark-rehype@^11.1.2 remend@^1.4.0 zod@^4.0.0 ``` If you install components one by one, add the packages the CLI added to `packages/ui/package.json` instead. You can also delete the unused `hooks/use-mobile.ts` the CLI adds to your app.