You can find installation examples in our Github:

Step 1. Download and install Arcade

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

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

Note: Our license explicitly mentions that Arcade source code shouldn't be publicly available so currently the best approach for public repositories would be to add Arcade package to .gitignore.

Step 2. Setup CSS build.

Arcade is relying on CSS Modules and PostCSS to keep our styles isolated and support custom media queries. Additionally, we're keeping css imports in our JS files to keep css tree-shakeable. This way you will get CSS only for components you're using in the product instead of importing CSS for the whole library.

Start by creating a postcss.config.js file in your project root and importing a postcss config from Arcade:

We recommend using config.full by default which enables custom media queries provided by Arcade, auto RTL styles generation, autoprefixer and cssnano for build optimizations. This config can be extended by your additional plugins.

In case you want to handle everything manually, we also provide config.minimal that only exposes custom media queries setup.

Continue by adding the required changes to your bundler. For instance, with webpack, you'll have to add css related loaders:

Note, that just by including these loaders, you will get CSS modules and PostCSS working with no additional setup required.

Step 3. Start using Arcade.

We're aiming for the best modern solution - so Arcade is shipped as ESM build. Only the components that you're using in your code will stay in your product bundle. This also means that we have syntax like import in our code, and you have to compile it further with Babel in your project.

Server side rendering

To get UI synced between server and browser rendering, make sure to add default values for RTL/LTR and theme used for the body element.