Design Tokens

Utilities

Accordion

Actionable

Container

Hooks

useResponsiveClientValue

Next.js installation

Setting up Reshaped package in a Next.js project.

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:

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

The create-next-app CLI will guide you 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 the Next App directory with React server components support.

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

Install Reshaped

Install the latest version from NPM. You can track our latest releases in our changelog.

npm install reshaped

Add a PostCSS config

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;

Update the Next config

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

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

Create an App component

Since Reshaped uses a provider for its global features like theming, focus management, and notifications, the Reshaped provider should be rendered in 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 the root layout

Update your root layout.tsx file setup to include the default theme settings and use the App component. We're using an Inter font here with a next/font integration which you can replace with a custom font from your theme.

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import App from "@/components/App";

const inter = Inter({
  subsets: ["latin"],
});

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>
  );
}

Add Reshaped components

You can start using Reshaped components anywhere in your app. For example, you can replace the root page.tsx contents with the following code as a starting point.

import { Button, View } from "reshaped";

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

Start the application

Run the project locally 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.