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
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", }, }, };
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> ); };
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.