@stitches/react

What is @stitches/react?

@stitches/react is a CSS-in-JS library for React that allows developers to write CSS with JavaScript. It provides a powerful and flexible API for styling components, theming, and responsive design.

What are @stitches/react's main functionalities?

Styling Components

This feature allows you to create styled components using the `styled` function. You can define styles directly in your JavaScript code and apply them to your React components.

const { styled } = require('@stitches/react');

const Button = styled('button', {
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  '&:hover': {
    backgroundColor: 'darkblue'
  }
});

// Usage in a React component
// <Button>Click me</Button>

Theming

Theming allows you to define a set of design tokens (e.g., colors, fonts) that can be used throughout your application. This makes it easy to maintain a consistent design and update styles globally.

const { createStitches } = require('@stitches/react');

const { styled, theme } = createStitches({
  theme: {
    colors: {
      primary: 'blue',
      secondary: 'green'
    }
  }
});

const Button = styled('button', {
  backgroundColor: '$primary',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px'
});

// Usage in a React component
// <Button>Click me</Button>

Responsive Design

This feature allows you to define responsive styles using media queries. You can specify different styles for different screen sizes, making it easy to create responsive designs.

const { styled } = require('@stitches/react');

const Box = styled('div', {
  width: '100%',
  padding: '20px',
  backgroundColor: 'lightgray',
  '@media (min-width: 600px)': {
    backgroundColor: 'gray'
  },
  '@media (min-width: 900px)': {
    backgroundColor: 'darkgray'
  }
});

// Usage in a React component
// <Box>Responsive Box</Box>

Other packages similar to @stitches/react

styled-components

styled-components is another popular CSS-in-JS library for React. It allows you to write actual CSS code to style your components. It offers similar functionality to @stitches/react, such as theming and responsive design, but with a different API and syntax.

emotion

Emotion is a performant and flexible CSS-in-JS library. It provides both a styled API and a css API for writing styles. Emotion is known for its high performance and flexibility, making it a strong alternative to @stitches/react.

twin.macro

twin.macro is a library that combines the benefits of Tailwind CSS with the power of CSS-in-JS. It allows you to use Tailwind's utility classes within styled-components or Emotion. This makes it a unique alternative to @stitches/react for those who prefer utility-first CSS.

README

@stitches/react

@stitches/react is a react implementation of stitches, a CSS-in-JS library with a best-in-class developer experience.

# with npm
npm install @stitches/react

# with yarn
yarn add @stitches/react

<script type="module">

import { styled } from 'https://cdn.skypack.dev/@stitches/react'

</script>

<script src="https://unpkg.com/@stitches/react/dist/index.global.js"></script>
<script>

const { styled } = stitches

</script>

Documentation

For full documentation, visit stitches.dev.

Contributing

Please follow our contributing guidelines.

Authors

• Pedro Duarte (@peduarte)
• Jonathan Neal (@jon_neal)
• Abdulhadi Alhallak (@hadi_hlk) - WorkOS

License

Licensed under the MIT License, Copyright © 2022-present WorkOS.

See LICENSE for more information.