The simplest way to use rettangoli-ui is import directly from CDN. For example:

<script src="https://cdn.jsdelivr.net/npm/@rettangoli/[email protected]/dist/rettangoli-iife-ui.min.js"></script>

This will setup all the web components.

In addition to the JavaScript file, you must add two CSS files in this order:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/[email protected]/dist/themes/base.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/[email protected]/dist/themes/theme-rtgl-slate.css">

base.css is required for base HTML normalization. Then choose one theme file.

For more information on available themes and customization options, see our CSS Variables guide.

The ESM approach provides more customization options.

First, install the package:

npm install @rettangoli/ui

Then you can import the components and define custom elements on your own. This method allows for more flexibility if you need customizations

For example

import { RettangoliButton } from '@rettangoli/ui'
customElements.define("rtgl-button", RettangoliButton({}));