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.