You can find examples of using Arcade with some of the popular frameworks in our community repository:

Download and install

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:

Setup CSS

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.

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.

Public API

Since we're building the package as ES Modules, package files are not merged into a single bundle. However, we're explicitly defining which imports should be used during development:

import { Button } from 'arcade' - all components and utilities should be imported from the main library entrypoint. This type of import is working with tree-shaking, so your bundle will only contain code you use in your product.

import ArcadeTheme from 'arcade/themes/*' - all pre-built themes are stored in the package and can be imported from the themes folder. There is no theme used by default, so only themes you import will get to your product bundle.

import { addTheme, addThemeFragment } from 'arcade/themes' - CLI to create custom themes for Arcade. This code won't be added to your bundle since it's used in Node.js as a part of your build process.

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.