Modern, flat React UI component library
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.ci Migrate to docker-executor node Jan 3, 2018
sample Upgrade webpack dependencies Dec 2, 2018
src Set flex-shrink on RadioGroup button to avoid horizontal compression Dec 1, 2018
test TextArea uses TextField, with textarea HTML element May 21, 2018
.babelrc Sample project has dedicated build process Dec 25, 2017
.eslintignore Sample project build script Dec 26, 2017
.eslintrc Remove Modal Radium dependency Jan 8, 2018
.gitignore Build process exports Babel-transpiled lib rather than minified Webpa… Sep 2, 2017
.npmignore Label component Dec 25, 2017
.travis.yml bundlesize on CI Jan 25, 2018
LICENSE Update license year Jan 29, 2018 README logo Apr 10, 2018
jest.config.js RadioButton test Apr 7, 2018
package.json 1.2.0 Jul 8, 2018


npm version Build Status Coverage Status Dependencies

React Elemental is a modern, flat UI library built for React. It is built for maximum development velocity: there is no CSS to import and no additional parameters to add to your Webpack configuration. React Elemental has first-class support for ES6/JSX and works effortlessly with SSR.

See the official documentation site for demos, examples, and detailed documentation for each available UI component.

React Elemental


$ npm install --save react-elemental

Note that the Elemental fonts are not bundled directly with the component library. This cuts down the size of react-elemental and allows you to inject fonts of your choosing into the library. To use the standard Elemental fonts, see the installation instructions of react-elemental-fonts.


React Elemental exports UI components that you can use directly in your render function. However, you must first bootstrap (initialize) the library in order to set configuration globals. You can do this either declaratively using the provided Elemental React component (recommended) or imperatively by invoking the exported bootstrap function.

Using the Elemental component

At the top level of your application, instantiate an Elemental component and pass the rest of your application as its children. Configuration parameters are specified as props (available options are defined below).

import React from 'react';
import { Elemental } from 'react-elemental';

const App = () => (
  <Elemental {...configOpts}>
    application children

export default App;

Using bootstrap directly

As early as possible in your client-side rendering path, invoke the bootstrapping function (available options are defined below).

import React from 'react';
import { bootstrap } from 'react-elemental';


const App = () => {

export default App;

Using exported Elemental UI components

import React from 'react';
import { Button, Spacing, Text } from 'react-elemental';

const MyComponent = ({ onClick }) => (
  <Spacing bottom>
    <Text size="epsilon" bold>
      Hello world!
      text="Click me"

export default MyComponent;


To optionally specify overrides for global constants, you can pass props to the Elemental top-level component, or invoke the bootstrapping function with parameters:

import React from 'react';
import { bootstrap } from 'react-elemental';

// Declarative
<Elemental fontOpts={fontOpts} colorOpts={colorOpts}>

// Imperative
bootstrap(fontOpts, colorOpts);

All respected override options are as follows:


Key Value Example
primary.regular URL to the primary regular font. 'url(data:application/x-font-ttf;base64,...)'
primary.bold URL to the primary bold font. 'url(data:application/x-font-ttf;base64,...)'
secondary.regular URL to the secondary regular font. 'url(data:application/x-font-ttf;base64,...)'
secondary.regular URL to the secondary bold font. 'url(data:application/x-font-ttf;base64,...)'


Key Value Example
primary Hex color code string for the desired primary color. '#3eb8f0'
primaryLight Hex color code string for the desired primary light color. '#d6ecf5'
primaryDark Hex color code string for the desired primary dark color. '#036996'

Babel plugin

You may optionally include babel-plugin-react-elemental with your project to automatically transform imports so that only the components used by your application are bundled. This reduces the final application bundle size by reducing the library footprint.


It is easiest to symbolically link the sample project's react-elemental dependency to the root project. Then, auto-transpile on source changes and auto-rebuild the sample project on dependency changes.

$ npm install
$ npm run build:watch &
$ cd sample
$ npm install
$ rm -rf node_modules/react-elemental
$ ln -s ../.. node_modules/react-elemental
$ npm run start