Installation

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

Download and install

Log in and download the latest package release from the Releases page. Then, move the downloaded package to your project and install it with yarn or npm.

For instance, if you move it to the ./vendor/reshaped-v1.0.0.tgz, you can then install it like any other package:

# Yarn
yarn add ./vendor/reshaped-v1.0.0.tgz
# NPM
npm install ./vendor/reshaped-v1.0.0.tgz

Setup CSS

Create a postcss.config.js file in your project root and importing a PostCSS config from Reshaped. Our config enables custom media queries provided by Reshaped, autoprefixer and cssnano for build optimizations. This config can be extended with your own plugins.

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

Reshaped relies on CSS Modules and PostCSS to keep our styles isolated and support missing browser features. Additionally, we're keeping CSS imports in our JS files to ensure CSS tree-shaking is working as expected. This way, you will get CSS only for components you're using in the product instead of importing CSS for the whole library.

Start using Reshaped

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 ESM build. So only the components that you're using in your code will stay in your product bundle. It also means that we keep ES imports and exports in our code, and you have to compile it further with Babel in your project.

Server-side rendering

To avoid style differences between server and browser rendering, add the default dir value for RTL/LTR and the data-rs-theme attribute on the body element.

// RTL with light mode
<body dir="rtl" data-rs-theme="reshaped-light">
// LTR with dark mode
<body data-rs-theme="reshaped-dark">

System dark mode

Reshaped doesn't automatically update the color mode of your product based on the selected user preference in their operating system since it's not always the expected behavior. Instead you might pick one of the following approaches:

  • In case your application is client-only, you can use media queries matching inside Rect.useLayoutEffect which will be triggered before the first application DOM rendering. Note that this logic shouldn't be called on the same level as Reshaped provider but deeper inside your application. Otherwise, this code won't have access to the Reshaped context.
import { useTheme } from "reshaped";
const Component = () => {
const { setColorMode } = useTheme();
React.useLayoutEffect(() => {
const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
if (!mq.matches) return;
setColorMode(mq.matches ? "dark" : "light");
}, [setColorMode]);
};
  • If you're working with SSR, your code won't have access to the media query API on the server, which means you won't be able to set the color mode at that point. This issue will be solved in browsers with user-preference-media-features-hint. Meanwhile an option that a lot of products use, when they need full support of the system color mode, including for the JSX support, is applying visibility: hidden to the product before it got mounted. We use the same approach on this landing and documentation when we're fetching the color mode from the local storage.
import { useTheme } from "reshaped";
const Component = (props) => {
const [mounted, setMounted] = React.useState(false);
const { setColorMode } = useTheme();
React.useLayoutEffect(() => {
const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
if (!mq.matches) return;
setColorMode(mq.matches ? "dark" : "light");
setMounted(true);
}, [setColorMode]);
return (
<div style={{ visibility: mounted ? "visible" : "hidden" }}>
{props.children}
</div>
);
};

Using as a pre-built bundle

For the cases when you can't use our ESM build, we also provide a pre-built Webpack JS and CSS bundles. In order 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 with Typescript, make sure to change moduleResolution to nodenext or node16 to make type definitions for the bundle work correctly.

Source code

Reshaped can be used as a starting point for the teams building their own design systems to skip the implementation of the core features. Since most design systems have so much in common, this is a huge time saver for companies who don't want to waste time discovering the best practices and learning about pitfalls.

When you get the Pro license, you get the system's code in precisely the same state as we develop it. It means that you get access to uncompiled code of the components, their Storybook examples which you can run locally, and an extensive test suite. As you keep changing the source code of the components, you may also easily adjust the tests and examples you need.

Installation

Download the latest source code archive and unpack it in your local file system. After navigating into the package folder, run yarn && yarn lib:start to start the Storybook examples for the components.

Testing

You can find tests next to the components and utilities code. To run the existing test suite, run yarn lib:test.

With the pro license purchased, you will be receiving lifetime updates. So even after you start changing the original code, you will be able to look into the latest changes and learn their implementation details. It should help you stay productive with your system development and will help you adopt new components added to Reshaped.