Next.js installation

Create your project

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

Or if you're using Typescript:

Note that we're using an --experimental-app flag to use the new app directory introduced in Next 13. Using this directory adds support for global css import within node_modules, which lets Reshaped work with Next.js out-of-the-box.

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 PostCSS config

Import a PostCSS config from Reshaped and add it to postcss.config.js file in the root folder:

Start the application

Run your build process with npm run dev.

Start using Reshaped components

Import components in app/page.tsx and try them out:

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

Previous
Next