Arwes LogotypeArwes Logotext


Theming and styling tools with focus in Emotion in React.

The design tools are heavily inspired by Material UI.


All the tools are bundled and can be installed with the following NPM package:

npm install @arwes/design

The design management tooling requires polished v4 as a peer-dependency.

npm install polished@4


Any application can have a design definition managed by a theme. A theme is a set of visual configurations and utilities. Application components can make use of it to create their styles and animations.

A theme with default settings can be created like:

import { createTheme } from '@arwes/design';
const theme = createTheme();

The following features can be configured:

But any extra settings can be setup as needed.

Then the theme can be used in any CSS-in-JS library theme provider or referenced directly by components to generate dynamic styles.

Theme Extension

A new theme can be created by extending a previously created one.

const theme1 = createTheme({ ... });
const theme2 = createTheme({ ... }, theme1);

The second theme will extend the first theme.

You can see and play with more examples in the playground.