Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.


MDX Blocks

A wild new way to build websites EXPERIMENTAL

build status version MIT License

npm i mdx-blocks

Import and use MDX Blocks as layout components

import { Bar } from 'mdx-blocks'

export default props =>

# Hello

- [Link](/)
- [Click](/click)
- [Beep](/beep)

Create a block for each section of a page

import { Banner } from 'mdx-blocks'
export default Banner

# Hello

This is a banner with a background image.

// Combine blocks together to create a page
import { BlocksProvider } from 'mdx-blocks'
import Header from './header.mdx'
import Banner from './banner.mdx'

export default props =>
    <Header />
    <Banner />


  • Write content in markdown and use React components inline with MDX
  • Customize the look and feel with theming
  • Create custom block layouts with minimal effort
  • Quickly swap out the layout of blocks without touching the content

Get Started

Read the docs


Code of Conduct MIT License