Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/styled-components/styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
https://github.com/styled-components/styled-components

css css-in-js react styled-components

Last synced: 1 day ago
JSON representation

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Awesome Lists containing this project

README 

          


  

    styled-components

  










  Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

  


  


  downloads: 600k/month

    

  gzip size

  module formats: umd, cjs, esm

  Code Coverage




---



**Upgrading from v5?** See the [migration guide](https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6).



Utilizing [tagged template literals](https://www.styled-components.com/docs/advanced#tagged-template-literals) (a recent addition to JavaScript) and the [power of CSS](https://www.styled-components.com/docs/api#supported-css), `styled-components` allow you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!



```jsx

const Button = styled.button`

  color: grey;

`;

```



Alternatively, you may use [style objects](https://www.styled-components.com/docs/advanced#style-objects). This allows for easy porting of CSS from inline styles, while still supporting the more advanced styled-components capabilities like component selectors and media queries.



```jsx

const Button = styled.button({

  color: 'grey',

});

```



Equivalent to:



```jsx

const Button = styled.button`

  color: grey;

`;

```



`styled-components` is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! It also supports React Server Components (RSC) through automatic runtime detection. See the [documentation about React Native](https://www.styled-components.com/docs/basics#react-native) for more information.



_Supported by [Front End Center](https://frontend.center). Thank you for making this possible!_



---



## [Docs](https://www.styled-components.com/docs)



**See the documentation at [styled-components.com/docs](https://www.styled-components.com/docs)** for more information about using `styled-components`!



Quicklinks to some of the most-visited pages:



- [**Getting started**](https://www.styled-components.com/docs/basics)

- [API Reference](https://styled-components.com/docs/api)

- [Theming](https://www.styled-components.com/docs/advanced#theming)

- [Server-side rendering](https://www.styled-components.com/docs/advanced#server-side-rendering)

- [React Server Components](https://www.styled-components.com/docs/advanced#react-server-components) (RSC support)

- [Tagged Template Literals explained](https://www.styled-components.com/docs/advanced#tagged-template-literals)



---



## Example



```jsx

import React from 'react';



import styled from 'styled-components';



// Create a  react component that renders an 
 which is

// centered, palevioletred and sized at 1.5em

const Title = styled.h1`

  font-size: 1.5em;

  text-align: center;

  color: palevioletred;

`;



// Create a  react component that renders a  with

// some padding and a papayawhip background

const Wrapper = styled.section`

  padding: 4em;

  background: papayawhip;

`;



function MyUI() {

  return (

    // Use them like any other React component – except they're styled!

    

      Hello World, this is my first styled component!

    

  );

}

```



This is what you'll see in your browser:





  

    Screenshot of the above code ran in a browser

  




---



## Looking for v5?



The `main` branch is for the most-current version of styled-components, currently v6. For changes targeting v5, please point your PRs at the `legacy-v5` branch.



---



## Built with `styled-components`



A lot of hard work goes into community libraries, projects, and guides. A lot of them make it easier to get started or help you with your next project! There are also a whole lot of interesting apps and sites that people have built using styled-components.



Make sure to head over to [awesome-styled-components](https://github.com/styled-components/awesome-styled-components) to see them all! And please contribute and add your own work to the list so others can find it.



---



## Contributing



If you want to contribute to `styled-components` please see our [contributing and community guidelines](./CONTRIBUTING.md), they'll help you get set up locally and explain the whole process.



Please also note that all repositories under the `styled-components` organization follow our [Code of Conduct](./CODE_OF_CONDUCT.md), make sure to review and follow it.



---



## Badge



Let everyone know you're using _styled-components_ → [![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)



```md

[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)

```



---



## Contributors



This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].




---



## Backers



Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/styled-components#backer)]






---



## Sponsors



Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/styled-components#sponsor)]
























---



## License



Licensed under the MIT License, Copyright © 2016-present Glen Maddern and Maximilian Stoiber.



See [LICENSE](./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](https://github.com/okonet) for the fantastic logo.