A set of tools to manage inline styles on React elements


npm install radium

Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.

Inspired by React: CSS in JS by Christopher Chedeau.

Eliminating CSS in favor of inline styles that are computed on the fly is a powerful approach, providing a number of benefits over traditional CSS:

  • Scoped styles without selectors
  • Avoids specificity conflicts
  • Source order independence
  • Dead code elimination
  • Highly expressive

Despite that, there are some common CSS features and techniques that inline styles don't easily accommodate: media queries, browser states (:hover, :focus, :active) and modifiers (no more .btn-primary!). Radium offers a standard interface and abstractions for dealing with these problems.

When we say expressive, we mean it: math, concatenation, regex, conditionals, functions–JavaScript is at your disposal. Modern web applications demand that the display changes when data changes, and Radium is here to help.

  • Modifier styles based on component props
  • Media queries
  • Browser state styles to support :hover, :focus, and :active
  • Dynamic computed styles

Start by writing a style object with a combination of default styles, browser states, media queries, and modifiers. Pass the object to this.buildStyles() and Radium will determine the correct group of style rules to apply to your component.

<Button kind='primary'>Radium Button</Button>
var React = require('react');
var { StyleResolverMixin, BrowserStateMixin } = require('radium');
var color = require('color');
var Button = React.createClass({
  mixins: [ StyleResolverMixin, BrowserStateMixin ],
  renderfunction () {
    var styles = {
      padding: '1.5em 2em',
      border: 0,
      borderRadius: 4,
      color: '#fff',
      cursor: 'pointer',
      fontSize: 16,
      fontWeight: 700,
      states: [
        { hover: {
          background: color('#0074d9').lighten(0.2).hexString()
        { focus: {
          boxShadow: '0 0 0 3px #eee, 0 0 0 6px #0074D9',
          outline: 'none'
      modifiers: [
        { kind: {
          primary: { background: '#0074D9' },
          warning: { background: '#FF4136' }
    return (

To see local examples in action, do this:

npm install
npm run examples