Next.js installation

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

npx create-next-app@latest my-reshaped-app --experimental-app
cd my-reshaped-app

Or if you're using TypeScript:

npx create-next-app@latest my-reshaped-app --typescript --experimental-app
cd my-reshaped-app

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

npm install reshaped

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

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

Run your build process with npm run dev.

npm run dev

Import components in app/page.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>
  );
};

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