If you're planning to use Reshaped with any of the listed frameworks, check their setup documentation or visit the community repository with starter projects.

Next.js

Remix

TailwindCSS

Vite

Webpack

Create React App

Installation

Install the latest version from NPM. Track our latest releases in the changelog.

npm install reshaped

Create a postcss.config.js file in your project root and import the PostCSS config from Reshaped. Our config includes custom media queries from Reshaped, autoprefixer, and cssnano for build optimizations. You can extend this config with your own plugins.

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

If you're generating a theme that modifies the default viewport breakpoints, pass the path to the generated media.css file to the PostCSS config. We provide an alternative getConfig function to handle this behavior.

const path = require("path");
const { getConfig } = require("reshaped/config/postcss");

module.exports = getConfig({
  themeMediaCSSPath: path.resolve(__dirname, "src/themes/my-theme/media.css"),
});

Reshaped relies on CSS Modules and PostCSS to keep styles isolated and support missing browser features. We keep CSS imports in our JS files to ensure CSS tree-shaking works as expected. This way, you'll get CSS only for the components you're using instead of importing CSS for the entire library.

Import some of the components along with the Reshaped provider and try them out:

import { Button, Container, Reshaped } from "reshaped";
import "reshaped/themes/reshaped/theme.css";

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

We're aiming for the best modern solution, so Reshaped is shipped as an ESM build. Only the components you're using in your code will stay in your product bundle. This means we keep ES imports and exports in our code, and you need to compile it further in your project. Most modern frameworks and build tools support ESM builds out of the box.

Server-side rendering

To avoid flash of unstyled content (FOUC) or other style differences between server and browser rendering:

add the default dir value for RTL/LTR to the <html> element
add data-rs-theme and data-rs-color-mode attributes for picking the default theme on the <html> element

// RTL with light mode
<html dir="rtl" data-rs-theme="reshaped" data-rs-color-mode="light">

// LTR with dark mode
<html data-rs-theme="reshaped" data-rs-color-mode="dark">

System dark mode

Reshaped doesn't automatically update the color mode based on the user's operating system preference since it's not always expected behavior.

During the server-side rendering, your code won’t have access to the media query API, so you can’t set the color mode at that point. This issue will be solved in browsers with user-preference-media-features-hint.

Meanwhile, you can use an inline script that accesses the browser APIs and executes before HTML is rendered. Here is an example we use on this website, which works with local storage and automatically applies the system color mode if it wasn’t selected before.

<script
  dangerouslySetInnerHTML={{
    __html: `
      const matcher = window.matchMedia("(prefers-color-scheme: dark)");
      const systemColorMode = matcher.matches ? "dark" : "light";
      const storedColorMode = localStorage.getItem("__reshaped-mode");

      document.documentElement.setAttribute("data-rs-color-mode", storedColorMode || systemColorMode);
      matcher.addEventListener("change", () => {
        document.documentElement.setAttribute("data-rs-color-mode", systemColorMode);
      });
  `,
  }}
/>

Installing fonts

We're using Inter as the main font in our default theme to ensure a cross-platform experience for designers and developers. However, we don't fetch it automatically since there are multiple ways to do that depending on the framework you use.

Inter is publicly available, so you can install it from various resources. If you don't want to install it, Reshaped will fall back to system fonts. Alternatively, you can change the font tokens in your product theme definition in both React and Figma.

Inter font family

External resource

Inter on Google Fonts

External resource

Installing icons

Reshaped can be used with any iconset, only using a few icons built into the components. For all our examples and documentation, we're using Feather icons.

We recommend using the react-feather npm package to avoid copying the SVG source code manually into your project. However you case use it with other icon sets too.

npm install react-feather

import { Home } from "react-feather";
import { Icon, Button } from "reshaped";

const Component = () => {
  return (
    <>
      <Icon svg={Home} />
      <Button icon={Home}>Homepage</Button>
    </>
  );
};

Using as a pre-built bundle

For cases when you can't use our ESM build, we also provide pre-built Webpack JS and CSS bundles. To use them, import Reshaped components from reshaped/bundle and import the CSS from reshaped/bundle.css once in your root application file.

import { Button, Container, Reshaped } from "reshaped/bundle";
import "reshaped/bundle.css";
import "reshaped/themes/reshaped/theme.css";

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

When using TypeScript, set moduleResolution to nodenext or node16 to make type definitions for the bundle work correctly.

Contents

Installation
Server-side rendering
System dark mode
Installing fonts
Installing icons
Using as a pre-built bundle