We are adding support for Nextjs. Get in touch on Twitter to learn more.

Add a block

Using blocks in Reflex allows you to extract and group components into smaller re-usable chunks.

To move the hero we created into a block, start by adding a new block under /content/blocks/hero.mdx and move the hero there.

content/blocks/hero.mdx

<Section p="4">
  <Container>
    <Grid col="1fr 250px" gap="8" alignItems="center">
      <Div>
        <H1 my="0" fontSize="4xl">
          Welcome to my site
        </H1>
        <P mt="4">This is the a short description for the page</P>
      </Div>
      <Image src="placeholder.jpg" />
    </Grid>
  </Container>
</Section>

You can now use the new block on the about.mdx page using the Block component.

content/pages/about.mdx

---
title: Welcome to Reflex
excerpt: Description for this page. This is mostly used for the description meta tag.
---
<Block src="hero" />

When adding a block to a page, you can omit the /content/blocks path prefix. Reflex will automatically resolve the block using the block name.

Blocks can also be nested in sub-directories and used as follows:

<Block src="about/contact" /> will display the block found at /content/blocks/about/contact.

site
  └── content
      └── blocks
          └── about
              └── contact.mdx

Style the hero Dynamic Blocks