Gatsby installation

Create your project

Start by creating your Gatsby project if you don't have one already. Using Gatsby init should speed up this process:

npm init gatsby

Install Reshaped

Download the latest Reshaped release from the Releases page and save the .tgz file into your project. Then install the package using the file path. For example, if you save the package as ./vendor/reshaped.tgz in the project root folder, you can run:

// npm
npm install ./vendor/reshaped.tgz
// yarn
yarn add ./vendor/reshaped.tgz

Add PostCSS config

Install gatsby-plugin-postcss and add a PostCSS config from Reshaped through its options:

import postcss from "reshaped/postcss";
const config = {
...
plugins: [
{
resolve: "gatsby-plugin-postcss",
options: {
postCssPlugins: postcss.config.plugins,
},
},
],
};
export default config;

Start the application

Run your build process with npm run develop.

npm run develop

Start using Reshaped components

Import some of the core components from reshaped/bundle along with reshaped/bundle.css:

import { Button, Container, Reshaped } from "reshaped/bundle";
import "reshaped/bundle.css";
import reshapedTheme from "reshaped/themes/reshaped/theme.css";
const App = () => {
return (
<Reshaped theme="reshaped">
<Container width="652px">
<Button href="/">Get started</Button>
</Container>
</Reshaped>
);
};

You can find more details in our gatsby-starter example on Github. If you want to learn more about components - search for the relevant components documentation in the sidebar.