Page Builder Blocks for Gatsby
Combine the power of Gatsby, MDX and Theme UI to build blazing fast websites.

About
Flex is a Gatsby theme that ships with pre-built blocks that you can use in your Markdown pages. Then use Theme UI to customize the look and feel of your site.
Features
- Customizable - All blocks can be extended and customized.
- Extendable - Build and add your own custom blocks.
- Accessible - All blocks are tested for accessiblity.
- Dark mode - Support for multiple color modes.
- SEO - SEO + Open Graph out of the box.
- Code Highlighting - Code highlighting with Prism.
Quick Start
Create a new Flex site:
gatsby new site arshad/gatsby-starter-flex
Start the development server
cd sitegatsby develop
You should now be able to view your site at http://localhost:8000
.
Add a page
Create a page at content/pages/home/index.mdx
and add the following to it:
---title: Homeexcerpt: Welcome to the home pageis_front: TRUE---
This will create a new page and set it as the front page. If you head to http://localhost:8000
, you should see Home displayed as the page title.
Add a block
Let's add a hero to the home page. Add the following to content/pages/home/index.mdx
---title: Homeexcerpt: Welcome to the home pageis_front: TRUE--- <Heroheading="Expedita Aperiam"lead="Sint quaerat et occaecati voluptate illum tenetur."imageUrl="https://via.placeholder.com/800x450"style={{ bg: "muted" }}/>
It's that easy.
Available Blocks
Flex comes with a lot of pre-built blocks that you can use to build your site.
Cta
, Div
, Faqs
, Feature
, Hero
, Logos
, PageHeader
, Section
, Button
, Card
, Faq
, Lead
, Link
, Logo
, Image
, Testimonial
and many more.
Theming
Flex makes use of Theme UI under the hood. This makes it very easy to customize and re-use your theme across pages.
Customize the theme
Create a new file at src/gatsby-theme-flex/theme.js
and add your custom theme values in there.
Let's change the default primary color.
// src/gatsby-theme-flex/theme.js colors: primary: `#ee00ff`
Stop and restart the development server: gatsby develop
.
FAQs
We're still working on the documentation. But here's some quick answers to get you started.
How to customize a block
Use Component Shadowing. Example, to override the Hero
block, create the following file src/gatsby-theme-flex/blocks/hero.js
and create your custom Hero
block.
To customize the Header
, create the following src/gatsby-theme-flex/layout/header.js
.
How to add new props to a block
Shadow the block and add your new props. For example, the following code adds a foo
prop to the card block:
// src/gatsby-theme-flex/components/card.js/** @jsx jsx */ { ... foo ...}
You can now use foo
in your pages as follows:
<Card heading="This is the heading" foo="bar" />
How to add your own block
Shadow the src/gatsby-theme-flex/blocks.js
component and add the following code:
// src/gatsby-theme-flex/blocks.js
// src/my-component.js/** @jsx jsx */ <div>foo</div>
You can now use MyComponent
in your pages:
<MyComponent foo="bar" />
Support
Need help? Create an issue on the main repo @arshad/gatsby-themes or ask me @arshadcn.