Ripple Design System

Usage

Ripple components can be used in several different ways depending on your project needs.

Using Ripple UI components

Whilst Ripple is built to implement sites using a framework built on Vue JS and Nuxt, its modular architecture allows adopting different parts depending on your requirements.

ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites

Ripple UI libraries are usable in the following contexts:

LibraryCSS stylesVue ComponentsRipple Framework (Nuxt)Web components
Ripple UI CoresupportedsupportedsupportedPartial support
Ripple UI Formssupportedsupportedsupportednot supported

Using in an SDP website

If you are using Ripple 2 to build a site on the SDP platform, the UI libraries will be included automatically when scaffolding your project.

For documentation on using Ripple with Nuxt in SDP sites, visit the Ripple Framework documentation

Github Packages

Ripple 2 is hosted publicly on Github Packages (ghcr) under the @dpc/sdp namespace, please read these setup instructions for accessing Github Packages.


Propose a change to this page on GitHub.