The easiest way to get started is to use one of the templates. All templates are configured correctly: they include PostCSS setup , ColorSchemeScript and other essential features. Some templates also include additional features like Jest , Storybook and oxlint.
If you are not familiar with GitHub, you can find detailed instructions on how to bootstrap a project from a template on this page .
Gatsby template with basic setup
Follow the Gatsby quick start guide to create a new Gatsby application:
When asked "Would you like to install a styling system?", select PostCSS .
Choose packages that you will use in your application:
Hooks for state and UI management
Core components library: inputs, buttons, overlays, etc.
Form management library
Date inputs, calendars
Recharts based charts library
Notifications system
Code highlight with your theme colors and styles
Rich text editor based on Tiptap
Capture files with drag and drop
Embla based carousel component
Full-screen media lightbox with carousel navigation
Overlay command center
Centralized modals manager
Install dependencies:
Install PostCSS plugins and postcss-preset-mantine :
Create a postcss.config.cjs file at the root of your application with the following content:
Create a src/theme.ts file with your theme override:
Create a gatsby-ssr.tsx file with the following content:
Create a gatsby-browser.tsx file with the following content:
All set! Start the development server:
By default, Gatsby has different syntax for importing CSS modules:
Usage with React Router