Installation

This guide walks through how to install the Arc Design System in your application.

#Configuring the npm client

All Arc Design System packages are published on the Github package registry. In order to install these packages, you'll need to authenticate with the Github registry.

#Configuring Node.js

To use the latest packages from the Arc Design System, install Node.js version 13.0 or newer.

#Beta Packages

Beta packages are available for installation by using the beta tag like the examples below. With beta package releases, users have access to design system updates as soon as they are coded, tested, and deployed, rather than waiting for the monthly release.

npm install @wpmedia/ads-button@beta

yarn add @wpmedia/ads-button@beta

#React components

For the most part, components live in their own packages. See the documentation for each component on import and usage information. Components that have yet to be developed will display a notice like the one below.

🚧 Under construction

#Bootstrap theme

The Arc Design System provides a custom bootstrap theme to help unify the design of Bootstrap, Reactstrap and non-design system components. If your project does not use Bootstrap, you do not need to use the theme.

#Installation

The Bootstrap theme lives in the @wpmedia/ads-theme package. You'll need to add that as a dependency to get the custom theme. See "Configuration" for how to correctly setup the theme.

npm i --save @wpmedia/ads-theme

#CSS usage

@import '[node_modules path]/@wpmedia/ads-theme/sass/arc-bootstrap.scss';

#JavaScript usage

import '@wpmedia/ads-theme/scss/arc-bootstrap.scss'