Create React App installation

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

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

Start the application

Run your build process with npm run start.

npm run start

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>
);
};

Add PostCSS config

By default, Create React App doesn't allow customizing the postcss.config.js file. Since Reshaped primarily uses vanilla CSS with CSS Modules, all features provided by Reshaped components work out of the box. All advanced features like responsive component properties syntax work with the default Create React App setup.

However, if you want to use Reshaped custom media query values, you can create and apply a custom postcss.config.js file either by ejecting Create React App or using tools like Craco. That will allow you to import a PostCSS config from Reshaped and add it to the postcss.config.js file in the root folder:

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

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