# Getting started with our UI Library

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

Welcome! This UI library is designed to help you build beautiful, consistent, and maintainable user interfaces with minimal effort. Here’s how you can make the most of it:

## Getting started with our UI Library

## Use atomic CSS classes for styling

- Consistency By using our predefined classes, your UI will have a common look and feel across all components
- Maintainability When design updates occur, changes to the utility classes automatically propagate across the entire project, making updates easy and seamless
- No custom styles needed Avoid the overhead of writing custom CSS. Use the tools we’ve already created to keep your codebase lean and manageable.

For example, instead of writing custom CSS for a flex container:

```css
.my-container {
display: flex;
justify-content: center;
}
```

.my-container

{

display

:

;

justify-content

:

;

}

Simply apply the atomic classes:

```html
<div class="display-flex justify-content-center">...</div>
```

<div class="display-flex justify-content-center">

</div>

## Use React components for structure

Our library also includes a range of React components that serve as building blocks for your application. These components are designed to work seamlessly with the CSS classes, allowing you to:

- Quickly build UIs using pre-built components like the buttons, selects, and dialogs
- Combine React components with CSS classes to create complex layouts with minimal custom code
- Extend your layouts by composing React components while using utility classes to tweak the design where necessary

## Why stick to our CSS classes and components?

- Efficiency Our library is optimized to reduce the need for custom styling and component creation. You’ll spend less time on UI design and more time on functionality.
- Design flexibility When design changes occur, updating the UIKIT, a single CSS class or React component ensures that your entire project is updated without manual intervention
- Better collaboration By sticking to the predefined patterns, your team will maintain consistency across projects, making it easier for multiple developers to collaborate without the risk of style mismatches

EfficiencyOur library is optimized to reduce the need for custom styling and component creation. You’ll spend less time on UI design and more time on functionality.

Design flexibilityWhen design changes occur, updating the UIKIT, a single CSS class or React component ensures that your entire project is updated without manual intervention

Better collaborationBy sticking to the predefined patterns, your team will maintain consistency across projects, making it easier for multiple developers to collaborate without the risk of style mismatches

By combining atomic CSS classes and React components, you can create powerful, flexible user interfaces with ease, all while ensuring consistency and maintainability. Happy building!

What is new?ChangelogRelease notes for each version of the UIKIT.How can I use it?How to use itInstructions on how to integrate it.Questions about the UIKIT?#rio-uikitPlease post your question on Slack.

We welcome any feedback to improve the UIKIT further. Please send it to uxui@rio.cloud

The RIO UIKIT is licensed under the Apache 2.0 license by TB Digital Services GmbH | version 2.4.0