React UI
Edit page
Home
Getting Started
Customize
Foundation
Components: UI
Components: Layouts
CSS Helpers
Readme
Key Concepts Quick Start Guide Package Linking Contributing

# React UI

> React UI is a themeable and performant UI library for React apps.

Make your UI look like Bootstrap, Material Design or almost any other design just with a few lines of CSS!

Explore React UI docs →

##
Key Concepts

Why another UI library? Because we couldn't find any library that would meet these requirements:

- 🎨 Full control over design. Hundreds of CSS custom properties allow you to customize the design of your app without touching any JS.

- 📦 Smart defaults, out of the box. Create rapid prototypes that look great with no additional effort.

- 🚀 Small bundle size. Because performance matters.

## Quick Start Guide

To install React UI in your app:

1. Install
   `react-ui` with npm. Make sure you also have `react` and `react-dom` installed.

       npm install --save @react-ui-org/react-ui

2. Load the Titillium Web font:

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

3. Load the default theme and the CSS foundation layer:

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

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

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

Head to the docs to see how to use, customize, and extend React UI.

### Development Mode

It is possible to run React UI in your app in development mode. This is useful because:

- In production mode React UI uses non-human-readable class names.
- Runtime check (i.e. PropTypes) are suppressed in production mode.

To enable development mode, add the following code to the `webpack.config.js` file in your app:

    module.exports = (env, argv) => ({  resolve: {    alias: {      // Allow to run react-ui in development mode for easier development.      '@react-ui-org/react-ui$': argv.mode === 'production'        ? '@react-ui-org/react-ui/dist/lib.js'        : '@react-ui-org/react-ui/dist/lib.development.js',    },  },});

## Package Linking

The best way for development of React UI is to link `react-ui` into your application with `npm link` so you can see it in action.

1. In React UI repository, run `npm link`
2. In your application, run `npm link @react-ui-org/react-ui`

To prevent Invalid Hook Call Warning when React UI is linked, add the following code to your app's Webpack config:

    const path = require('path');module.exports = {  resolve: {    alias: {      react: path.resolve('./node_modules/react'),      'react-dom': path.resolve('./node_modules/react-dom'),    },  },};

Then run webpack with the `--mode=production` or `--mode=development` flag.

## Contributing

To build the project:

1. Install local npm packages: `npm install`
2. Run the build: `npm run build`

To run the dev server:

1. Install local npm packages: `npm install`
2. Run the dev server (usually on `http://localhost:3000`): `npm start`

To publish the new version:

1. Update version in `package.json` and `package-lock.json` files
2. Commit changes: `git commit -m "Bump version to X.Y.Z"`
3. Create new tag: `git tag -a vX.Y.Z -m "vX.Y.Z"`
4. Push new tag: `git push --tags`
5. Publish new version on npm: `npm publish --access public`

### Documenting

We use Docz (powered by Gatsby) as the documentation platform. The documentation itself is written in MDX format — a human-readable blend of the popular Markdown and JSX syntax.

Run `npm start` to run the docs in development mode, and open `http://localhost:3000` in your browser to see the docs in live-reload mode.

A few things to note:

- In order to get component props parsed and rendered by Docz, it's crucial to import the component into an MDX file right from its source file — parsing a re-exported component (typically via `index.js`) isn't currently supported.

- If you don't want Gatsby to collect anonymous statistics, you may want to disable Gatsby telemetry by running `npx gatsby telemetry --disable`.

- If you see the Not found page after having changed the configuration of Docz or Gatsby in the live-reload mode, you may either restart the Docz development server (`ctrl + c` and `npm start`), or try to edit an MDX file which makes the Docz rebuild, too.

- To make your authoring experience better, we recommend to make sure your IDE understands the MDX syntax and is able to help you wrap lines in MD and MDX files automatically (Jetbrains IDE's and VSCode support both features out-of-the-box or through a plugin).