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.

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

npm install reshaped

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 install @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 { config } = require("reshaped/config/postcss");
module.exports = 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 starter-remix example on Github. If you want to learn more about components - search for the relevant components documentation in the sidebar.