Skip to content
Theme UI
GitHub

gatsby-theme-ui-blog

Minimal Gatsby MDX blog theme built with Theme UI. Use this as a starting point for building custom blog themes with Theme UI.

npm i gatsby-theme-ui-blog
// gatsby-config.js
module.exports = {
plugins: [
'gatsby-theme-ui-blog',
]
}

Shadowing

Shadow the following components to customize styles and page layout:

ComponentDescriptionProps
src/gatsby-theme-ui-blog/posts.jsIndex page for all blog posts{ posts }
src/gatsby-theme-ui-blog/post.jsFull blog post article page{ title, date, children, keywords, tags }
src/gatsby-theme-ui-blog/layout.jsWrapping layout component for the Post and Posts components

Theming

Use gatsby-plugin-theme-ui to override or customize the theme.

npm i gatsby-plugin-theme-ui
// gatsby-config.js
module.exports = {
plugins: [
'gatsby-theme-ui-blog',
'gatsby-plugin-theme-ui',
]
}
// shadow src/gatsby-plugin-theme-ui/index.js
import base from 'gatsby-theme-ui-blog/src/gatsby-plugin-theme-ui'
export default {
...base,
colors: {
text: 'white',
background: 'black',
primary: 'cyan',
secondary: 'magenta',
}
}

Options

This theme is based off of gatsby-theme-blog-core and uses all the same options.

KeyDefault valueDescription
basePath/Root url for all blog posts
contentPathcontent/postsLocation of blog posts
assetPathcontent/assetsLocation of assets
mdxtrueConfigure gatsby-plugin-mdx (if your website already is using the plugin pass false to turn this off)
Edit the page on GitHub
Previous:
gatsby-theme-style-guide
Next:
Typography.js