Create React App installation

Setting up Reshaped package in a Create React App project.

Create your project

Start by creating your Create React App project if you don't have one already:

npx create-react-app my-project
cd my-project

Or if you're using TypeScript:

npx create-react-app my-project --template typescript
cd my-project

Install Reshaped

Install the latest version from NPM. You can track our latest releases in our changelog.

npm install reshaped

Add a PostCSS config

Create a postcss.config.js file in the root folder of your project and re-export Reshaped PostCSS config:

const { config } = require("reshaped/config/postcss");
module.exports = config;

Since Create React App doesn't support chaging their default configuration, you can use Craco to enable a custom PostCSS config.

npm install -D @craco/craco

Then replace the default Create React App scripts with craco:

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

And add a craco.config.js file:

module.exports = {
  style: {
    postcss: {
      mode: "file",
    },
  },
};

Start using Reshaped components

Import some of the core components in src/App.tsx and try them out:

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

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

Start the application

Run the project locally with npm run start.

npm run start

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