Stitches

https://stitches.dev/

An alternative to StyledComponents for styling React apps.

I’m intrigued by this, especially the variants feature. I found the process of making components with several different variants in StyledComponents cumbersome. This seems like a great solution.

const Button = styled('button', {
  borderRadius: '9999px',
  fontSize: '15px',
  lineHeight: '1',
  fontWeight: 500,
  height: '35px',
  paddingLeft: '15px',
  paddingRight: '15px',
  border: '0',

  variants: {
    color: {
      violet: {
        backgroundColor: 'blueviolet',
        color: 'white',
        ':hover': {
          backgroundColor: 'darkviolet',
        },
      },
      gray: {
        backgroundColor: 'gainsboro',
        ':hover': {
          backgroundColor: 'lightgray',
        },
      },
    },
  },
});

render(
  <div style={{ display: 'flex', gap: '20px' }}>
    <Button color="violet">Button</Button>
    <Button color="gray">Button</Button>
  </div>
);