Skip to content


Responsive Meta Tag

React UI is designed and developed mobile-first, a strategy in which we first write code for mobile devices, and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head> element:

<meta name="viewport" content="width=device-width, initial-scale=1" />


React UI is designed with the Titillium Web font. Add it to your project e.g. via Google Fonts in your <head> element:


Remember to include all necessary font weights (and only them — for better performance).


React UI honors ITCSS principles to make sure that its CSS code base will work and perform well even in large scale. There are three global CSS layers:

  1. Theme: a collection of hundreds of CSS custom properties that define the look of your app. See Theming for more.
  2. Foundation: mandatory ground-zero CSS for React UI components. Includes global resets and fixes rendering inconsistencies across browsers with normalize.css. (Not to be confused with the Foundation CSS framework.)
  3. CSS helpers: tiny CSS classes that can handle details like typography, spacing, colors, etc. Class name notation is inspired by Bootstrap, so if you are familiar with Bootstrap, you will feel at home here.

All layers are written in Sass and compiled to CSS. You can import them in a ready-to-use CSS bundle like this:

import '@react-ui-org/react-ui/dist/react-ui.css';


Alternatively, you can import the Sass source files directly:

import '@react-ui-org/react-ui/src/theme.scss';
import '@react-ui-org/react-ui/src/foundation.scss';
import '@react-ui-org/react-ui/src/helpers.scss';


Import and use any of React UI components in your app:

import { Button } from '@react-ui-org/react-ui';

<Button label="My Button" />

👉 Thanks to CSS modules, React UI components have their styles bundled together with the component code.

Controlled vs. Uncontrolled

While you may find out some components are working for you as uncontrolled, we currently support only controlled components.

Full Example

Example HTML:

<!doctype html>
<html lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React UI Example</title>
    <div id="app"></div>
    <script src="app.js"></script>

Example JSX:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@react-ui-org/react-ui';
import '@react-ui-org/react-ui/dist/react-ui.css';

const App = () => (
  <Button label="My Button" />

ReactDOM.render(<App />, document.querySelector('#app'));


React UI is also available on CDN:

Description URL

👉 Consider using a specific version instead of latest in production.