NextJS w/ Markdoc & shadcn/ui is an MIT-licensed boilerplate that scaffolds a Next.js 13 application using the App Directory, with Markdoc for Markdown-based content and shadcn/ui for component styles. It takes a standard Next.js project structure and provides preconfigured routing, Tailwind CSS, and a component setup, producing a website that can render Markdoc pages with accessible Radix UI primitives. The project builds on the nextjs13-starter-markdoc starter by dylanmeivis.
What is NextJS w/ Markdoc & shadcn/ui?
This boilerplate is a starting point for building content-driven websites on Next.js 13. It wires up the App Router for file-based routing, Markdoc for parsing Markdown with custom components, and shadcn/ui for a set of accessible UI components. The template runs on Node.js and requires no backend, making it suitable for static or server-rendered sites.
Key Features
- Next.js 13 App Directory — Uses the modern App Router with file-based routes and layouts.
- shadcn/ui component library — Provides a set of copy-pasteable React components built on Radix UI primitives.
- Radix UI Primitives — Unstyled, accessible component primitives for building custom UI.
- Tailwind CSS — Utility-first styling with class sorting, merging, and linting already configured.
- Markdoc — A Markdown format supporting custom components and schema validation for flexible content.
- Lucide icons — Includes the Lucide icon set for consistent icons.
- Dark mode — Supports theme toggling via next-themes.
Who is it for?
Developers starting a documentation site or content-rich application who want Markdoc and shadcn/ui wired up. It's also for teams using Next.js 13 who want a working base with Tailwind and Radix UI without manual setup.
What can you do with it?
- Documentation authors: Write Markdown files with Markdoc custom tags and render them with React components.
- UI developers: Use the preconfigured shadcn/ui and Tailwind setup to build and test component designs.
- Bloggers: Combine Markdoc content with dark mode and Lucide icons for a styled reading experience.
FAQ
Is this template free to use?
Yes, the template is released under the MIT license, so it is free for personal and commercial use.
What are the main technologies used?
The stack includes Next.js 13 App Router, Tailwind CSS, Radix UI primitives, shadcn/ui, Markdoc, Lucide icons, and next-themes for dark mode.
Does it include a blog or docs layout?
The README does not specify built-in pages, but the inclusion of Markdoc and App Router makes it suitable for documentation sites.
