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
cd my-reshaped-app

create-next-app CLI will guide your through multiple steps and we suggest picking all default options provided by the CLI. This approach will create a Next.js project using TypeScript and Next App directory with React server components support.

It won't setup Tailwind by default, but you can enable it if you plan to use Reshaped Tailwind integration.

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;

Enable ESM transpiling and tree-shaking by adding Reshaped to the next.config.js file:

const nextConfig = {
  transpilePackages: ["reshaped"],
  experimental: {
    optimizePackageImports: ["reshaped"],
  },
};

Since Reshaped uses a provider for its global features like theming, focus management and notifications – Reshaped provider should be rendered in a client components. To render the provider, we suggest creating an App component with the following content:

"use client";

import type { ReactNode } from "react";
import { Reshaped } from "reshaped";
import "reshaped/themes/reshaped/theme.css";

const App = ({ children }: { children: ReactNode }) => {
  return (
    <Reshaped theme="reshaped">
      {children}
    </Reshaped>
  );
};

export default App;

We're using the default reshaped theme here but you can replace it with your custom theme. You can add any other providers you're using to the same file later.

Update your root layout.tsx file setup to include the default theme settings and use the App component:

import type { Metadata } from 'next'
import App from "@/components/App";

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" data-rs-theme="reshaped" data-rs-color-mode="dark">
      <body>
        <App>{children}</App>
      </body>
    </html>
  )
}

You can start using Reshaped components now anywhere in your app. For example, you can try replacing the root page.tsx contents with the following code:

import { Button, View } from "reshaped";

export default function Home() {
  return (
    <View padding={4}>
      <Button href="https://reshaped.so">Click me</Button>
    </View>
  );
}

Run your build process with npm run dev.

npm run dev

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