Install

Cosmos is distributed as an npm package that can be added to any web project using a dependency manager of your choice.

Cosmos uses Red Bull's custom fonts to display text content inside components for different languages.

Please follow the guide for Font Faces to learn more about the different ways to provide them.

Because the Cosmos package is distributed through Red Bull's in-house npm registry, an.npmrc in the root of a project with authentication instructions required.

Add the following lines to your .npmrc file in the project's root.

@cosmos:registry=https://artifactory.redbullmediahouse.com/artifactory/api/npm/rbds-npm-local/

//artifactory.redbullmediahouse.com/artifactory/api/npm/rbds-npm-local/:_auth=cy1yYm1oLXJlYWRvbmx5LXJiZHM6QVA4bTJXZVNhN2Q5bTZYVUpIcVZmdGtTOGpR

//artifactory.redbullmediahouse.com/artifactory/api/npm/rbds-npm-local/:always-auth=true

For Yarn 4+ users:

npmRegistries:
  //artifactory.redbullmediahouse.com/artifactory/api/npm/rbds-npm-local/:
    npmAlwaysAuth: true
    npmAuthIdent: cy1yYm1oLXJlYWRvbmx5LXJiZHM6QVA4bTJXZVNhN2Q5bTZYVUpIcVZmdGtTOGpR

With an .npmrc file in the project's root, the Cosmos library can be installed as usual:

# npm

npm install @cosmos/web --save

# yarn

yarn add @cosmos/web --dev

⚠️ Caution

When building an application that will co-exist with other applications that are built with Cosmos on the same webpage, we recommend using Scoped Web Components via @cosmos/web-scoped instead of @cosmos/webto avoid version conflicts.

Read more about Scoped Web Components and how to use them.

# npm

npm install @cosmos/web-scoped --save

# yarn

yarn add @cosmos/web-scoped