React UI is a themeable UI library for React apps.
npm install @react-ui-org/react-ui!npm


!npm bundle size
> React components for your design system.
React UI is a themeable, performant, responsive UI library for React apps.
Use it simply with no configuration or have full control over your design by
tweaking some of the hundreds theming options available.
[Explore React UI docs β][rui-docs]
Why another UI library? Because we couldn't find any library that would meet
these requirements:
- π¨ Full control over design, from design tokens to components. Hundreds of
CSS custom properties allow you to customize the design of your app without
touching JS.
- π¦ Smart defaults, out of the box. Create rapid prototypes that look great
with no additional effort.
- π Small bundle size. Because performance matters.
> Development of React UI is largely supported by
> [RACOM]βone of the leading global players in wireless
> Critical Infrastructure.
To install React UI in your app:
1. Install react-ui with npm. Make sure you also have prop-types, react and
react-dom installed.
``bash`
npm install --save @react-ui-org/react-ui
2. Load React UI CSS in your app:
`js`
import '@react-ui-org/react-ui/dist/react-ui.css';
3. Import and use any of React UI components in your app:
`jsx
import { Button } from '@react-ui-org/react-ui';
`
Head to [the docs][rui-docs] to see how to use, customize, and extend React UI.
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:
`js`
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/react-ui.js'
: '@react-ui-org/react-ui/dist/react-ui.development.js',
'@react-ui-org/react-ui/dist/react-ui.css': modeArgument === 'production'
? '@react-ui-org/react-ui/dist/react-ui.css'
: '@react-ui-org/react-ui/dist/react-ui.development.css',
},
},
});
Then run webpack with the --mode=production or --mode=development` flag.
We appreciate any contributions you might make. π
Please check out our [Contributing Guide][gh-contributing]. It includes
contribution guidelines and information on how to run and develop the project.
All contributions should pass linting and tests before being merged.
Please follow our [Testing Guidelines][gh-testing], which describe
how to properly run all tests (linters, unit tests, visual tests)
in Docker containers to ensure consistency.
React UI uses a fully automated release process.
If you plan to release a new version,
please follow our [Releasing Guide][gh-releasing],
which explains all necessary steps, including version bumping
and changelog management.
[rui-docs]: https://react-ui.io
[RACOM]: https://www.racom.eu
[gh-contributing]: ./src/docs/contribute/general-guidelines.md
[gh-testing]: ./src/docs/contribute/testing-guidelines.md
[gh-releasing]: ./src/docs/contribute/releasing.md