Remix installation

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

npx create-remix@latest

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. 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;

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

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

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.