Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Blocks are re-usable pieces of content that can be embedded on pages.


npm i @reflexjs/gatsby-theme-block


// gatsby-config.js

module.exports = {
  plugins: [`@reflexjs/gatsby-theme-block`],


// gatsby-config.js

module.exports = {
  plugins: [
      resolve: `@reflexjs/gatsby-theme-block`,
      options: {
        contentPath: "content/blocks",

Data models


type Block implements Node @dontInfer {
  id: ID!
  src: String
  body: String


Place your blocks inside content/blocks as follows:

  └── content
    └── blocks
      └── card.mdx

Then build your block using MDX:

// content/blocks/card.mdx

<Div borderWidth="1px" rounded="5px">
  <Image src="placeholder.jpg" />
  <Div p="6">
    <H4 my="0">Heading</H4>
    <P mb="0">This is some text.</P>

Use the block on a page

To place a block, you use the Block component and the block name.

<Block src="card" />

Dynamic blocks

Blocks can accept props and this makes blocks really powerful.

Wrap the block in a named export.

// content/blocks/card.mdx

export const Card = ({ heading, text, image }) => (
  <Div borderWidth="1px" rounded="5px">
    <Image src={image} />
    <Div p="6">
      <H4 my="0">{heading}</H4>
      <P mb="0">{text}</P>

Using props with blocks

<Grid col="2" gap="4">
  <Block src="card" heading="Heading One" text="This is the card one." />
  <Block src="card" heading="Heading One" text="This is the card two." />

Check out the Blocks library for pre-built blocks you can copy and drop into your site.


Read the docs at https://reflexjs.org/docs/blocks.

© 2023 Gatsby, Inc.