Compiled

Build time atomic CSS-in-JS. Baked and ready to serve.

Get started now ➚

Usage

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

// Tie styles to an element




// 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
<ClassNames>
  {({ css }) => children({ className: css({ fontSize: 12 }) })}
</ClassNames>

Installation

Install the React package.

npm install @compiled/react

Then configure your bundler of choice or use Babel directly.

Webpack

Install the Webpack loader.

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

See installation for more information.

Parcel

Note

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.

Babel

Install the Babel plugin.

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

See installation for more information.

Contributions

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

Thanks

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