Ripple Design System

Getting started

Information for developers using the Ripple 2 UI libraries

This section contains information about the Ripple user interface libraries. These libraries are a collection of UI components which implement the Ripple Design System. The components are written in Vue and are split accross two packages:

  • ripple-ui-core: A collection of common UI components used in SDP sites. For example buttons, cards, icons and typography.
  • ripple-ui-forms: A collection of form inputs and support for building complex forms via Formkit

These docs are for Ripple 2

Ripple 2 is a complete rebuild. If you are looking for information about the previous version of Ripple please visit the original Ripple GitHub repo.

Are you developing a site on the SDP platform?

This section is about the Ripple UI component libraries, and there is a lot more to developing a site on the Single Digital Presence (SDP) stack that is not covered here.

For information about using Ripple in SDP sites, visit the Ripple Framework for SDP documentation

Accessing the Source code

Ripple 2 is an open source project and the source code can be found in the ripple-framework monorepo on Github.

This monorepo contains a lot more than just the UI libraries so we've provided direct links to packages below:

Viewing examples in Storybook

The Ripple Storybook has information about props and slots that each Vue component supports. View the Ripple storybook to start exploring the available components.

Most of the examples found on this documentation site link directly examples in storybook.


See the usage guide for information about getting started with the different ways of implementing Ripple.

Propose a change to this page on GitHub.