Create a postcss.config.js file in the root folder of your project and re-export Reshaped PostCSS config. Not that we're using ESM imports here since Remix is using type: "module" in the project's package.json file.

import { config } from "reshaped/config/postcss.js";
export default config;

Add Reshaped provider

In the app/root.tsx file, import Reshaped provider and wrap the application Outlet with it. Import the theme you want to use and add theming attributes to the <html> element to handle SSR. In the following example, we're using our default theme but you can replace it with your own theme.

import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction } from "@remix-run/node";
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
import { Reshaped } from "reshaped";
import "reshaped/themes/reshaped/theme.css";

export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];

export default function App() {
  return (
    <html lang="en" data-rs-theme="reshaped" data-rs-color-mode="light">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Reshaped theme="reshaped">
          <Outlet />
        </Reshaped>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

Add Reshaped components

You can start using Reshaped components now anywhere in your app.

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-remix example on Github. If you want to learn more about components - search for the relevant components documentation in the sidebar.

Remix starter

External resource

Adding Tailwind

Contents

Create your project
Install Reshaped
Add a PostCSS config
Add Reshaped provider
Add Reshaped components
Start the application

Remix installation

Create your project

Install Reshaped

Add a PostCSS config

Add Reshaped provider

Add Reshaped components

Start the application