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 --template remix-run/indie-stack my-reshaped-app
cd my-reshaped-app

We're using indie-stack template in this example but feel free to pick any other Remix template. If you don't need the whole setup, you can also use Remix basic example project as a starter.

Download the latest Reshaped release from the Releases page and save the .tgz file into your project. Then install the package using the file path. For example, if you save the package as ./vendor/reshaped.tgz in the project root folder, you can run:

// npm
npm install ./vendor/reshaped.tgz

// yarn
yarn add ./vendor/reshaped.tgz

CSS Modules is currently supported in Remix with configuration flags since v1.11. To enable automatic CSS imports for the components, start by installing the package:

# NPM
npm install @remix-run/css-bundle

# Yarn
yarn add @remix-run/css-bundle

In app/root.tsx file – add cssBundleHref from Remix and Reshaped theme styles:

import { cssBundleHref } from "@remix-run/css-bundle";
import theme from "reshaped/themes/reshaped/theme.css";

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

To finally enable the CSS support, add flags to the remix.config.js and enable ESM transpiling for the reshaped package:

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ["**/.*"],
  serverDependenciesToBundle: ["reshaped"],
  future: {
    unstable_cssModules: true,
    unstable_cssSideEffectImports: true,
    unstable_postcss: true,
  },
};

Import PostCSS config from Reshaped and add it to postcss.config.js file in the root folder:

const postcss = require("reshaped/postcss");
module.exports = postcss.config;

In the same app/root.tsx file, import Reshaped provider and wrap the application with it.

import { Reshaped } from "reshaped";

function Layout({ children }: React.PropsWithChildren<{}>) {
  return <Reshaped theme="reshaped">{children}</Reshaped>;
}

You can start using Reshaped components anywhere in your application.

import { Button, Container, Reshaped } from "reshaped";

const App = () => {
  return (
    <Container width="652px">
      <Button href="/">Get started</Button>
    </Container>
  );
};

Run your build process with npm run dev.

npm run dev

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