README

<div align="center"> <a href="https://www.styled-components.com"> </a> </div> <div align="center"> <strong>Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅</strong>

</div>

styled-components lets you write actual CSS in your JavaScript using tagged template literals. It removes the mapping between components and styles, making components the styling primitive.

Built-in TypeScript types (no @types package needed)
React Server Components (RSC) support via automatic runtime detection
React Native support
Compatible with React 16.8+, including React 19

Installation

npm install styled-components

pnpm add styled-components

yarn add styled-components

Example

jsx

import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

function MyUI() {
  return (
    <Wrapper>
      <Title>Hello World, this is my first styled component!</Title>
    </Wrapper>
  );
}

Style objects are also supported:

jsx

const Button = styled.button({
  color: 'grey',
});

Docs

See the documentation at styled-components.com/docs for full usage information.

Contributing

See our contributing and community guidelines and Code of Conduct.

Check out awesome-styled-components for community libraries, projects, and examples.

Contributors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! 🙏 [Become a backer]

License

See LICENSE for more information.

Acknowledgements

This project builds on a long line of earlier work by clever folks all around the world. We'd like to thank Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik who contributed ideas, code or inspiration.

Special thanks to @okonet for the fantastic logo.