A familiar and performant compile time CSS-in-JS library for React.


import { styled, ClassNames } from '@compiled/react';

// Tie styles to an element
<div css={{ color: 'purple' }} />

// Create a component that ties styles to an element
const StyledButton = styled.button`
  color: ${(props) => props.color};

// Use a component where styles are not necessarily tied to an element
  {({ css }) => children({ className: css({ fontSize: 12 }) })}

Extract styles

Turn on extraction and all components styled in your app and sourced through NPM will have their runtime stripped and styles extracted to an atomic style sheet.

-import { CC, CS } from '@compiled/react/runtime';
-const _2 = '._syaz1q9v{color: hotpink}';
-const _ = '._1wybfyhu{font-size: 48px}';
export const LargeHotPinkText = () => (
-  <CC>
-   <CS>{[_, _2]}</CS>
    <span className="_syaz1q9v _1wybfyhu">Hello world</span>
-  </CC>
._1wybfyhu {
  font-size: 48px;
._syaz1q9v {
  color: hotpink;


Install the React package.

npm install @compiled/react

Then configure your bundler of choice or use Babel directly.


Install the Webpack loader.

npm install @compiled/webpack-loader --save-dev


Parcel v2 is currently in pre-release which makes this transformer experimental, it may break when updating Parcel. Use with caution.

Install the Parcel v2 transformer.

npm install @compiled/parcel-transformer --save-dev


Install the Babel plugin.

npm install @compiled/babel-plugin --save-dev