React UI
Edit page
Home
Getting Started
Installation Usage
Responsive Meta Tag Fonts Foundation CSS Components Full Example CSS Helpers Browsers & Devices
Customize
Foundation
Components: UI
Components: Layouts
CSS Helpers
Readme

# Usage

##
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" />

## Fonts

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

    <link  href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap"  rel="stylesheet"/>

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

## Foundation CSS

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

- Theme: a collection of hundreds of CSS custom properties that define the look of your app. See Theming for more.
- Foundation: the 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.

Import the two global CSS layers as early as possible in your document:

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

⚠️ As of now, you will need working SASS pipeline for this to work. This is to be changed to a ready-to-use CSS in the future.

️👉️ Because of using CSS custom properties, it is technically possible to import the theme layer anywhere later in the app. But it's a nice habit to declare variables before using them.

## Components

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

    import { Button } from '@react-ui-org/react-ui';<Button label="My Button" />

## Full Example

Example HTML:

    <!doctype html><html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>React UI Example</title>    <link      href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap"      rel="stylesheet"    />  </head>  <body>    <div id="app"></div>    <script src="app.js"></script>  </body></html>

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/src/lib/theme.scss';import '@react-ui-org/react-ui/src/lib/foundation.scss';const App = () => (  <Button label="My Button" />);ReactDOM.render(<App />, document.querySelector('#app'));

## CSS Helpers

CSS helpers are tiny CSS classes that can handle details like typography, spacing, colors, etc.

To use CSS helper classes, just import them along the base CSS layers of React UI:

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

Class name notation is inspired by Bootstrap, so if you are familiar with Bootstrap, you will feel at home here.

Next: Browsers & Devices →