Compiled

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

/** @jsxImportSource @compiled/react */

import { css } from '@compiled/react';

const buttonStyles = css({
  border: 'none',
  borderRadius: '3px',
  padding: '8px 10px',
  backgroundColor: '#6554C0',
  color: '#fff',
  fontWeight: 400,
  fontFamily: 'Arial',
  fontSize: '14px',

  '&:hover': {
    backgroundColor: '#8777D9',
  },

  '&:active': {
    backgroundColor: '#5243AA',
  },
});

export const Button = ({ children }) => {
  return (
    <button type="button" css={buttonStyles}>
      {children}
    </button>
  );
};
/* css-prop-button.tsx generated by @compiled/babel-plugin v0.32.2 */
import { ax, ix, CC, CS } from '@compiled/react/runtime';
const _13 = '._1di6vctu:active{background-color:#5243aa}';
const _12 = '._irr3mlcl:hover{background-color:#8777d9}';
const _11 = '._1wybdlk8{font-size:14px}';
const _10 = '._ect41ttw{font-family:Arial}';
const _9 = '._k48p1nn1{font-weight:400}';
const _8 = '._syazu67f{color:#fff}';
const _7 = '._bfhk1mzw{background-color:#6554c0}';
const _6 = '._19bv19bv{padding-left:10px}';
const _5 = '._n3tdftgi{padding-bottom:8px}';
const _4 = '._u5f319bv{padding-right:10px}';
const _3 = '._ca0qftgi{padding-top:8px}';
const _2 = '._2rko1l7b{border-radius:3px}';
const _ = '._19itglyw{border:none}';
const buttonStyles = null;
export const Button = ({ children }) => {
  return (
    <CC>
      <CS>{[_, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13]}</CS>
      {
        <button
          type="button"
          className={ax([
            '_19itglyw _2rko1l7b _ca0qftgi _u5f319bv _n3tdftgi _19bv19bv _bfhk1mzw _syazu67f _k48p1nn1 _ect41ttw _1wybdlk8 _irr3mlcl _1di6vctu',
          ])}>
          {children}
        </button>
      }
    </CC>
  );
};
<Button>Button</Button>

Performant, comfortable CSS-in-JS

Using APIs and behavior you may already be familiar with, write your styles in JavaScript with the full power of CSS — leveraging the language to create expressive and dynamic experiences.

This requires some installation to work, head over to the documentation to get started.

For a peek under the hood, see how it works.

  1. Basic usage:
/** @jsxImportSource @compiled/react */
import { css } from '@compiled/react';

const largeTextStyles = css({ fontSize: '48px', padding: '8px', background: '#eee' });
const invertedStyles = css({ background: '#333', color: '#fff' });

export const LargeText = ({ inverted, children }) => {
  return <span css={[largeTextStyles, inverted && invertedStyles]}>{children}</span>;
};
<LargeText>Hello</LargeText>
<LargeText inverted>world</LargeText>
  1. Would render as:
Helloworld
Getting started
Installation