Setup

Welcome to the Ringobook design system! This guide walks you through integrating Ringover styles and Web Components into your project.

Packages

The design system is split into two npm packages from the design-system-factory monorepo:

Package	Role
@ringover/styles	Design tokens, reset, atoms, molecules, utilities, and product themes (CSS/SCSS)
@ringover/web-components	Framework-agnostic Web Components (`ro-tabs`, `ro-pagination`, `ro-notification-banner`, …)

You can load styles and scripts from the CDN (no build step) or install the packages with npm (bundler-friendly, tree-shakeable layers).

Quick Start: CDN

The fastest way to get started is by linking to pre-built CSS and JavaScript files from the Ringover CDN. Replace lts with a pinned version (for example 3.26.0) when you need a fixed release.

1. Add CSS (@ringover/styles)

Place the following <link> tags in the <head> of your HTML file. This includes product themes, the full stylesheet bundle, and the icon font.

<head>
<!-- Product themes (@ringover/styles) -->
<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/all.css">

<!-- Icons -->
<link rel="stylesheet" href="https://webcdn.ringover.com/app/img/icons/lts/ro-icons-regular.css">
<link rel="stylesheet" href="https://webcdn.ringover.com/app/img/icons/lts/ro-icons-solid.css">

<!-- Full stylesheet bundle (@ringover/styles) -->
<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/design-system.css">
</head>

Set the active theme and optional color mode on the root element:

<html data-ro-theme="webapp" data-ro-mode="light">

2. Add JavaScript (@ringover/web-components)

You can choose between loading the full Global Bundle or specific Standalone Components. The method you choose affects how you register the components.

Option A: Global Bundle (Recommended)

Include the design-system.js file. This gives you access to all components under the RingoUI global namespace.

<body>
<script src="https://webcdn.ringover.com/app/download/design-system/lts/design-system.js"></script>

<script>
  // Access components via the 'RingoUI' namespace
  customElements.define('ro-notification-banner', RingoUI.RoNotificationBanner);
  customElements.define('ro-pagination', RingoUI.RoPagination);
  customElements.define('ro-tabs', RingoUI.RoTabs);
</script>
</body>

Option B: Standalone Components

For optimized loading, you can include only the scripts for the components you are using. Each component script exposes a specific global namespace (e.g., RoTabs, RoPagination).

<body>
<script src="https://webcdn.ringover.com/app/download/design-system/lts/tabs.js"></script>
<script src="https://webcdn.ringover.com/app/download/design-system/lts/pagination.js"></script>

<script>
  // Note the namespace matches the component name (e.g., RoTabs.RoTabs)
  customElements.define('ro-tabs', RoTabs.RoTabs);
  customElements.define('ro-pagination', RoPagination.RoPagination);
</script>
</body>

npm: @ringover/styles

Install the styles package when you use a bundler (Vite, Webpack, Nuxt, etc.) and want modular imports or SCSS sources.

npm install @ringover/styles

Full bundle

Loads tokens, reset, atoms, molecules, and utilities in one file.

import '@ringover/styles';

Modular CSS layers

Instead of the full bundle, import specific layers to keep your CSS payload smaller. Load them in this order:

import '@ringover/styles/tokens';
import '@ringover/styles/reset';
import '@ringover/styles/atoms';
import '@ringover/styles/molecules';
import '@ringover/styles/utilities';

SCSS

When your toolchain resolves the package sass export condition, you can import theme sources directly:

@use '@ringover/styles/themes/webapp' as *;
// or: dashboard, empower, meet-us, themes/all

Equivalent side-effect imports in JavaScript (for example in a Vite or Nuxt css array):

import '@ringover/styles/themes/webapp';
// or: dashboard, empower, meet-us, themes/all

Themes

Product themes ship as compiled CSS under @ringover/styles/themes/*. Apply a theme with data-ro-theme on the root or a container element. Optionally set data-ro-mode for light or dark mode.

<html data-ro-theme="webapp" data-ro-mode="light">

Available themes:

Theme	npm import	`data-ro-theme` value	CDN stylesheet
Webapp	`@ringover/styles/themes/webapp`	`webapp`	`webapp.css`
Dashboard	`@ringover/styles/themes/dashboard`	`dashboard`	`dashboard.css`
Empower	`@ringover/styles/themes/empower`	`empower`	`empower.css`
Meet Us	`@ringover/styles/themes/meet-us`	`meet-us`	`meet.css`
All themes	`@ringover/styles/themes/all`	—	`all.css`

Dark mode:

<html data-ro-theme="webapp" data-ro-mode="dark">

Advanced CDN usage

For more granular control over file size and styles, you can load individual CSS layers or specific themes from the CDN.

Modular CSS layers

Instead of loading design-system.css (which includes everything), you can load specific layers. The layers should be loaded in the following order:

<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/tokens.css">
<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/reset.css">

<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/atoms.css">
<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/molecules.css">
<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/utilities.css">

Individual theme stylesheets

<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/dashboard.css">

<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/webapp.css">

<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/meet.css">

<link rel="stylesheet" href="https://webcdn.ringover.com/app/download/design-system/lts/empower.css">