Documentation Changelog Themes Blog Pricing

Getting Started

Design Tokens

Color

Typography

Utilities

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

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 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 – 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 the root layout

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

Add Reshaped components

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

Start the application

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.

Next.js 13 starter

External resource

Adding Tailwind

Contents

Create your project
Install Reshaped
Add a PostCSS config
Update the Next config
Create an App component
Update the root layout
Add Reshaped components
Start the application