Table of Content

For Developers

For a full installation of all design system features, follow this quick start guide.

Installation

Before moving further, please make sure you have Node.js installed on your machine. You can install the latest version through their website.

Install the package:

npm install --save-dev @riverty/web-components @riverty/css-framework

Install CSS Framework:

@import "@riverty/css-framework/lib/riverty.css";

Import and apply the Web components loader in your global JavaScript:

import { defineCustomElements } from '@riverty/web-components/loader';
defineCustomElements();

Usage

After that, you a ready to use any component as needed. To verify that everything is set up correctly, you can try adding the development helper component like this:

<r-design-system-devtools design-tokens></r-design-system-devtools>

The element should render with a few text blocks in the Riverty colors. For more advanced usage, you can pick and choose from the different packages.

Ready

You’re all set! Be sure to explore both the documentation and the resources below.

Code packages

Code packages are published via the public NPM registry, under the @riverty scope. Packages follow the Semantic Versioning (note that this still means that breaking changes can occur while on 0.* versions).

Packages always include a README file that explains how to use it, and a CHANGELOG that documents changes for each version. These are also presented right here on the website:

Hosted resources

cdn.riverty.design hosts a growing set of resources, available for direct integration in production environments. CDN documentation.

Reference articles

Event handling with Riverty Web Components.

Sample projects

We are starting to keep some example projects to show design system integration in different tech. All Riverty developers should have access to these: