The CSS in JS authoring experience you love without the runtime cost

Usage no npm install needed!

<script type="module">
  import compiledCore from 'https://cdn.skypack.dev/@compiled/core';



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

Apache 2.0 @compiled/react PRs welcome

Get started now ➚


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;

See CSS extraction for more information.


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

See installation for more information.


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

See installation for more information.


Install the Babel plugin.

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

See installation for more information.


Contributions are welcomed! Please see CONTRIBUTING.md to get started.



Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.