Remix installation

Create your project

Start by creating your Remix project if you don't have one already. Using Create Remix command should speed up this process:

We're using indie-stack template in this example but feel free to pick any other Remix template.

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:

Add Reshaped to the root file

Remix application wrapper is stored in the app/root.tsx file. To make Reshaped styles and context available for all routes, we should make some changes there.

Import Reshaped provider and CSS files. Note that we're importing component from the reshaped/bundle to use an already compiled version of the library.

Add styles to the exported Remix links array:

Wrap the application with the provider:

Start using Reshaped components

You can start using Reshaped components anywhere in your application. Make sure to import them from reshaped/bundle to use an already compiled version of the library.

Start the application

Run your build process with npm run dev.

Add PostCSS config

All our components work without PostCSS but in case you need to use our custom media queries available in CSS you'll need a PostCSS setup available in your project. In that case, check Remix documentation on how to make it work with PostCSS.

After you're done with the setup, import a PostCSS config from Reshaped and add it to postcss.config.js file in the root folder:

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