MDX Blocks

A wild new way to build websites EXPERIMENTAL

https://mdx-blocks.netlify.com

npm i mdx-blocks

Import and use MDX Blocks as layout components

import { Bar } from 'mdx-blocks'

export default props =>
  <Bar
    {...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.

![](kitten.png)

// 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 =>
  <BlocksProvider>
    <Header />
    <Banner />
  </BlocksProvider>

Features

• 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

---

Related

• MDX
• Emotion
• Styled System

Code of Conduct MIT License