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

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;

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 {
} 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">
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
        <Reshaped theme="reshaped">
          <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />

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="">Click me</Button>

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.