Gatsby installation

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 the latest version from NPM. You can track our latest releases in our changelog.

npm install reshaped

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

import { config } from "reshaped/config/postcss";

const config = {
  ...
  plugins: [
    {
      resolve: "gatsby-plugin-postcss",
      options: {
        postCssPlugins: config.plugins,
      },
    },
  ],
};

export default config;

Run your build process with npm run develop.

npm run develop

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

import { Button, Container, Reshaped } from "reshaped/bundle";
import "reshaped/themes/reshaped/theme.css";
import "reshaped/bundle.css";

const App = () => {
  return (
    <Reshaped theme="reshaped">
      <Container width="652px">
        <Button href="/">Get started</Button>
      </Container>
    </Reshaped>
  );
};

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