Create React App installation

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

npm install reshaped

Run your build process with npm run start.

npm run start

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

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 { config } = require("reshaped/config/postcss");
module.exports = config;

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.