The fastest way to ship a website ⚡︎

Learn more about MDX and Markdown.

How MDX works with Next.js.

This is a starter template for building websites using Next.js and MDX. It provides a fast and efficient way to create content-driven websites with the power of React components and the simplicity of Markdown.

• Next.js 14 with App Router
• MDX support for content creation
• Tailwind CSS for styling
• Dark mode support with next-themes
• Typography plugin for Tailwind CSS
• Customizable components
• Ready-to-use layout components

1. Clone the repository:

git clone https://github.com/brijr/mdx-starter.git
cd mdx-starter

2. Install dependencies:

pnpm install

3. Run the development server:

pnpm dev

4. Open http://localhost:3000 in your browser to see the result.

• app/: Contains the main application code
• components/: Reusable React components
• lib/: Utility functions and helpers
• public/: Static assets
• styles/: Global styles and Tailwind CSS configuration

Create your content using MDX files in the app directory. You can use a mix of Markdown and React components in your MDX files.

Example:

import { ThemeToggle } from "@/components/theme/theme-toggle";

# Hello World!

This is the [MDX Starter Template](https://github.com/brijr/mdx-starter). It is built with [brijr/craft](https://github.com/brijr/craft) and [shadcn/ui](https://ui.shadcn.com). Below you will find an example of the markdown home page -> `/page.tsx`.

<a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fbrijr%2Fmdx-starter&project-name=mdx-starter&repository-name=mdx-starter&demo-url=https%3A%2F%2Fmdx.bridger.to">
  <img src="https://vercel.com/button" alt="Deploy with Vercel" />
</a>

The project uses next-themes for dark mode support. You can customize the theme in the tailwind.config.ts file.

The Tailwind CSS typography plugin is included for consistent and beautiful typography. Customize it in the tailwind.config.ts file.

Custom components are available in the components directory. You can use these in your MDX files or create new ones as needed.

This project is ready to be deployed on Vercel. Click the button below to deploy:

• MDX Documentation
• Markdown Guide
• Next.js Documentation
• Tailwind CSS Documentation

Contributions are welcome! Please feel free to submit a Pull Request.

This project is open source and available under the MIT License.