Installation and usage#

Paragon components require React 16 or higher. To install Paragon into your project:

In terminal:

npm i --save @edx/paragon

In your React project:

import { ComponentName } from '@edx/paragon';

SCSS Foundation#

Usage with no theme:

@import "@edx/paragon/scss/core/core.scss";

Usage with a theme:

When working with a theme the order of imports is important: if you need to override Paragon's variables you must import theme's variables before Paragon core (that's because all variables in Paragon use !default flag which allows you to override them before importing, you can read more here), while to override Paragon's styles, the theme's style overrides must be imported after.

@import "@my-brand/fonts.scss";
@import "@my-brand/variables.scss";
// Import the Paragon core after setting brand-themed variables.
@import "@edx/paragon/scss/core/core.scss";
// Import brand overrides after the Paragon core.
@import "@my-brand/overrides.scss";

Note that including fonts will affect load performance. In some pages you may choose not to load the custom font.