# formidablelabs/radium

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/formidablelabs-radium).**

7,346 stars · 305 forks · JavaScript · MIT · archived

## Links

- GitHub: https://github.com/FormidableLabs/radium
- Homepage: http://formidable.com/open-source/radium/
- awesome-repositories: https://awesome-repositories.com/repository/formidablelabs-radium.md

## Description

Radium is a CSS-in-JS styling library that transforms static inline styles into dynamic, responsive, and animated CSS for React components. It functions as a component style toolchain and React inline style enhancer, allowing developers to define styles using plain JavaScript objects while gaining capabilities like browser state handling, vendor prefixing, and style composition.

The library extends React's inline style system by automatically resolving browser state styles for hover, focus, and active interactions without manual event handlers. It supports inline media queries that evaluate at runtime based on viewport dimensions, and provides a keyframe animation helper that generates unique animation names and injects CSS animations using JavaScript. Radium also handles cross-browser compatibility through automatic vendor prefix auto-prefixing of CSS property names and values.

For style composition, Radium merges multiple style objects in order to dynamically build styles from component props or state. The library processes styles through a plugin-based pipeline that handles prefixing, media queries, and keyframe generation in sequence, with runtime CSS keyframe injection into the document.

## Tags

### Web Development

- [React Styling Utilities](https://awesome-repositories.com/f/web-development/react-styling-utilities.md) — Writes CSS styles directly inside React components using JavaScript objects instead of separate stylesheet files.
- [Vendor Prefix Managers](https://awesome-repositories.com/f/web-development/vendor-prefix-managers.md) — Automatically adds vendor prefixes to CSS property names and values for cross-browser compatibility.

### Software Engineering & Architecture

- [Interactive State Resolvers](https://awesome-repositories.com/f/software-engineering-architecture/dynamic-state-resolution/interactive-state-resolvers.md) — Resolves dynamic styles by tracking component state for hover, focus, and active pseudo-classes.

### User Interface & Experience

- [Media Query Support](https://awesome-repositories.com/f/user-interface-experience/inline-styles/media-query-support.md) — Includes @media query rules directly inside style objects and resolves them based on the current viewport. ([source](https://cdn.jsdelivr.net/gh/formidablelabs/radium@master/README.md))
- [Merging Engines](https://awesome-repositories.com/f/user-interface-experience/inline-styles/merging-engines.md) — Provides a merging engine that combines multiple style objects into a single inline style for dynamic composition.
- [React Enhancers](https://awesome-repositories.com/f/user-interface-experience/inline-styles/react-enhancers.md) — Extends React's inline style system with browser state handling, vendor prefixing, and style merging.
- [Style Composition Engines](https://awesome-repositories.com/f/user-interface-experience/style-composition-engines.md) — Merges multiple style objects together to compose dynamic styles from component props or state.
- [CSS-in-JS Implementations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/css-in-js-implementations.md) — Lets React components define inline styles with media queries, pseudo-classes, and keyframe animations using JavaScript objects.
- [Keyframe Injection](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/dynamic-styling-systems/dynamic-style-injection/keyframe-injection.md) — Generates unique animation names and injects @keyframes rules into the document at runtime.
- [Inline Style Toolchains](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/inline-style-toolchains.md) — Transforms static inline styles into dynamic, responsive, and animated CSS for React components.
- [Style Object Interpolations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/runtime-style-updates/style-object-interpolations.md) — Accepts an array of style objects and merges them in order to compose styles dynamically from props or state. ([source](https://cdn.jsdelivr.net/gh/formidablelabs/radium@master/README.md))
- [Pseudo-Class Resolvers](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/state-driven-style-bindings/pseudo-class-resolvers.md) — Automatically applies hover, focus, and active styles to React components without manual event handlers.
- [Runtime Evaluators](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/conditional-style-queries/document-media-queries/media-query-observers/runtime-evaluators.md) — Evaluates @media query rules inside style objects at runtime based on viewport dimensions.
- [Inline Style Media Queries](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/conditional-style-queries/document-media-queries/media-query-polyfills/inline-style-media-queries.md) — Includes responsive breakpoints directly inside JavaScript style objects for viewport-aware rendering.
- [State-Based Style Application](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/conditional-style-queries/state-based-style-application.md) — Adds hover, focus, and active styles to inline styles by managing event handlers and state automatically. ([source](https://cdn.jsdelivr.net/gh/formidablelabs/radium@master/README.md))
- [Style Processing Pipelines](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-base-styles/plugin-based-base-styles/style-processing-pipelines.md) — Processes style objects through a plugin-based pipeline for prefixing, media queries, and keyframe generation.
- [CSS Animations](https://awesome-repositories.com/f/user-interface-experience/keyframe-animation-engines/css-animations.md) — Creates and applies CSS animations with unique names using JavaScript helpers inside React components.
- [JavaScript Helpers](https://awesome-repositories.com/f/user-interface-experience/keyframe-animation-engines/css-animations/javascript-helpers.md) — Generates unique animation names and applies CSS keyframe animations using a JavaScript helper. ([source](https://cdn.jsdelivr.net/gh/formidablelabs/radium@master/README.md))