# How to use the UIKIT

*Category:* Getting started
*Section:* Welcome
*Source:* https://uikit.developers.rio.cloud/#/start/howto
*Captured:* 2026-04-27T14:57:04.246Z

Install the latest version of the UIKIT (that includes latest beta versions as well) via

## How to use the UIKIT

- Install the npm package
- Typescript
- Document <head /> key meta tags
- UIKIT CSS
- Brand themes Print styles Additional styling information Dark mode
- UIKIT Javascript packages via CDN
- Dependencies

- Typescript

- Brand themes
- Print styles
- Additional styling information
- Dark mode

## Install the npm package

Install the npm package

```javascript
npm install @rio-cloud/rio-uikit
```

-

/

-

Or install a dedicated version via

```javascript
npm install @rio-cloud/rio-uikit@2.4.0
```

-

/

-

2.4

.0

## TypeScript

TypeScript

The UIKIT is built with TypeScript and defines the types inside the components.

> Note: Do not import types from the ./types.ts file directly as this is an internal file and subject to change. Import enums, constants and types from the declaration file together with the component.

```javascript
import AutoSuggest, { type AutoSuggestSuggestion } from "@rio-cloud/rio-uikit/AutoSuggest";
import Select, { type SelectOption } from "@rio-cloud/rio-uikit/Select";
import TableViewToggles, { type TableViewTogglesViewType } from "@rio-cloud/rio-uikit/TableViewToggles";
```

import

,

{

}

from

"@rio-cloud/rio-uikit/AutoSuggest"

;

import

,

{

}

from

"@rio-cloud/rio-uikit/Select"

;

import

,

{

}

from

"@rio-cloud/rio-uikit/TableViewToggles"

;

## Document <head /> key meta tags

**Mandatory**

The utf-8 meta tag is essential for ensuring that your webpage correctly displays text in a wide range of languages and symbols. By setting the character encoding to UTF-8, this tag enables support for almost all characters, including those used in non-Latin scripts, special symbols, and emojis.

This not only guarantees proper rendering of your content but also prevents common issues such as garbled or corrupted text and icons, known as mojibake. Modern web browsers and standards expect UTF-8 encoding by default, making this tag a critical component of any HTML document. Including this tag ensures your webpage is globally accessible and aligns with current best practices in web development.

```html
<meta charset="utf-8" />
```

&lt;meta charset="utf-8" /&gt;

**Best practices**

The viewport meta tag is a cornerstone of responsive web design. It configures the viewport settings to match the device’s screen width, ensuring that your webpage adapts seamlessly to different screen sizes. Without this tag, mobile devices often display pages as a scaled-down version of their desktop layout, requiring users to zoom or scroll horizontally.

By specifying the initial scale and width, this tag guarantees that your content is displayed optimally on all devices, from smartphones to tablets to desktops. Additionally, it improves user experience, enhances accessibility, and supports SEO by meeting mobile-friendly standards, making it a crucial inclusion in any modern HTML document.

```html
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
```

&lt;meta name="viewport" content="initial-scale=1.0, width=device-width" /&gt;

## UIKIT CSS

**Managed**

> Recommended

When utilizing the ApplicationLayout component, the UIKIT automatically ensures the inclusion of the necessary CSS style tag within your index.html, providing seamless integration and enhanced functionality.

You no longer need to manually add the CSS style tag to your index.html. Feel free to remove it if you prefer to manage it yourself.

> Note: Please note that every application and every widget must be wrapped with the <ApplicationLayout />, as it executes our init function.

**Manual**

Not Recommended

Use the CSS Stylesheet as follows (specify your required version number in the URL) if you need more control on what style you want to use.

```html
<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/rio-uikit.css">
```

&lt;link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/rio-uikit.css"&gt;

> Note: Please make sure to use the same UIKIT style version as the npm package, otherwise this will lead to inconsistency and UI bugs.

## Brand themes

Brand themes

In addition to the RIO theme, the UIKIT offers other brand-specific themes.

These other themes may only be used for applications or services who don't run on the RIO platform. All platform services have to use the RIO theme to achieve a distinct look and feel for the user when switching between services and applications.

In order to use such a brand theme, modify the URL in the &lt;link&gt; tag that loads the CSS

```html
<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/vw-uikit.css">
```

&lt;link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/vw-uikit.css"&gt;

```html
<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/man-uikit.css">
```

&lt;link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/man-uikit.css"&gt;

```html
<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/scania-uikit.css">
```

&lt;link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/scania-uikit.css"&gt;

**Managed**

> Recommended

You can simply omit the &lt;link&gt; tag in your index.html altogether. The UIKIT will automatically load the correct CSS file for you.

```html
<html data-brand="vw">
```

<html data-brand="vw">

```html
<html data-brand="man">
```

<html data-brand="man">

```html
<html data-brand="scania">
```

<html data-brand="scania">

## Print styles

Print styles

The UIKIT supports simple print stylings in order to have printable content. See Print CSS

```html
<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/rio-uikit-print-utilities.css">
```

&lt;link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/rio-uikit-print-utilities.css"&gt;

## Additional styling information

Additional styling information

In some cases like using D3 you may need the color variables as .json from the UIKIT provided via CDN. You can fetch the provided file from CDN via the following URL:

```html
https://uikit.developers.rio.cloud/2.4.0/rio-uikit-colors.json
```

## Dark mode

Dark mode

The UIKIT is fully dark mode ready.

> Note: Please note that every application and every widget must be wrapped with the <ApplicationLayout /> as it executes our init function.

```jsx
<ApplicationLayout>
<ApplicationLayout.Header>
<ApplicationHeader label='RIO Service' navItems={navItems} />
</ApplicationLayout.Header>
<ApplicationLayout.Body>
<div>My application</div>
</ApplicationLayout.Body>
</ApplicationLayout>
```

<ApplicationLayout>

<ApplicationLayout.Header>

<ApplicationHeader label='RIO Service' navItems={navItems} />

</ApplicationLayout.Header>

<ApplicationLayout.Body>

<div>

My application

</div>

</ApplicationLayout.Body>

</ApplicationLayout>

```jsx
<ApplicationLayout>
<div>My widget</div>
</ApplicationLayout>
```

<ApplicationLayout>

<div>

My widget

</div>

</ApplicationLayout>

In cases where the React ApplicationLayout component cannot be used, you can import the new darkmode.js from the UIKIT CDN and add it to your index.html. This script will take care of listening to the theme switch for you.

```html
<script src="https://uikit.developers.rio.cloud/2.4.0/rio-darkmode.js"></script>
```

&lt;script src="https://uikit.developers.rio.cloud/2.4.0/rio-darkmode.js"&gt;

&lt;/script&gt;

If you want to react on the dark mode for instance to exchange some images or apply some specific utility classes, you can use the custom hook useDarkMode to do so.

To manually enable dark mode when testing your application locally, adddata-theme="dark" to the <html> tag.

## Dependencies

As of version 1.7.0 the RIO UIKIT has the following dependencies:

peerDependencies

```javascript
"react": ">=18.0.0"
"react-dom": ">=18.0.0"
```

"react"

:

">=18.0.0"

"react-dom"

:

">=18.0.0"