@react-ui-org/react-ui

    0.45.0 • Public • Published

    React UI

    npm David Build and run tests 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 →

    Key Concepts

    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.

    Quick Start Guide

    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.

      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',
        },
      },
    });

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

    Sponsors


    RACOM

    Development of React UI is largely supported by RACOM—one of the leading global players in wireless Critical Infrastructure.

    Contributing

    We appreciate any contributions you might make. 🙏

    Please check out our Contributing Guide. It includes contribution guidelines and information on how to run and develop the project.

    Install

    npm i @react-ui-org/react-ui

    Homepage

    react-ui.io

    DownloadsWeekly Downloads

    261

    Version

    0.45.0

    License

    MIT

    Unpacked Size

    3.52 MB

    Total Files

    213

    Last publish

    Collaborators

    • bedrich.schindler
    • adamkudrna
    • mbohal