Home

Awesome

STATUS: DEPRECATED AND UNMAINTAINED

For details on the unmaintained status (and to help people with an automated migration to emotion), see #419.

<h1 align="center"> <img src="https://github.com/paypal/glamorous/raw/master/other/logo/full.png" alt="glamorous" title="glamorous" width="200"> <br> glamorous πŸ’„ Β <br> </h1> <p align="center" style="font-size: 1.2rem;">Maintainable CSS with React</p>

Read the intro blogpost and the v4 announcement blog post

Build Status Code Coverage version downloads MIT License

All Contributors PRs Welcome Chat Code of Conduct

gzip size size module formats: umd, cjs, and es Watch on GitHub Star on GitHub Tweet

Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> <!-- END doctoc generated TOC please keep comment here to allow auto update -->

Installation

You will find instructions to install glamorous here.

Usage

You will find a getting started guide here.

Documentation

You will find tutorials, examples, API documentation, and more at the glamorous website:

<h3 align="center"> <a href="https://glamorous.rocks">glamorous.rocks</a> </h3>

Related projects

Using glamorous with react-sketchapp

<p align="center"> <img src="https://i.gyazo.com/f599a760dbe18aaefbeecc40f9146dd8.png"> </p>

With the release of glamorous-primitives, now you can use glamorous with react-sketchapp to manage design systems and use React components for designs.

You can find documentation and related examples here.

Usage with Stylus

You can use glamorous-stylus for styling React components with Stylus. Find detailed documentation here.

Users

Who uses glamorous? See other/USERS.md and add yourself if you use glamorous!

Inspiration

This package was inspired by the work from people's work on the following projects:

Other Solutions

There are actually quite a few solutions to the general problem of styling in React. This isn't the place for a full-on comparison of features, but I'm unaware of any which supports all of the features which this library supports.

Support

If you need help, please fork this CodeSandbox and bring it up in the chat

Got Questions?

Check out the FAQ.

Swag πŸ‘•

A community member created this awesome t-shirt, and they're now available on Amazon! For every shirt purchased, GSM Studio will donate $1 to Girls Who Code to support the next generation of programmers. The shirts come in various colors and sizes. In addition you can check out other clever t-shirts by GSM Studio.

<a href="https://www.amazon.com/dp/B0714JQW67" title="link to glamorous shirt listing on amazon"> <img src="https://github.com/paypal/glamorous/raw/master/other/swag/shirt-light.png" alt="glamorous Logo T-Shirt (light)" title="glamorous Logo T-Shirt (light)" width="200" /> </a> <a href="https://www.amazon.com/dp/B072LV68S2" title="link to glamorous shirt listing on amazon"> <img src="https://github.com/paypal/glamorous/raw/master/other/swag/shirt-dark.png" alt="glamorous Logo T-Shirt (dark)" title="glamorous Logo T-Shirt (dark)" width="200" /> </a>

Contributors

Thanks goes to these people (emoji key):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore -->
<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub><br />πŸ’» πŸ“– πŸš‡ ⚠️ πŸ‘€<img src="https://avatars0.githubusercontent.com/u/587016?v=3" width="100px;"/><br /><sub><b>Ives van Hoorne</b></sub><br />πŸ’‘<img src="https://avatars3.githubusercontent.com/u/4614574?v=3" width="100px;"/><br /><sub><b>Gerardo Nardelli</b></sub><br />πŸ“–<img src="https://avatars0.githubusercontent.com/u/14236753?v=3" width="100px;"/><br /><sub><b>Chandan Rai</b></sub><br />πŸ“–<img src="https://avatars3.githubusercontent.com/u/16726210?v=3" width="100px;"/><br /><sub><b>BinHong Lee</b></sub><br />πŸ“–<img src="https://avatars2.githubusercontent.com/u/737065?v=3" width="100px;"/><br /><sub><b>Paul Molluzzo</b></sub><br />πŸ“– πŸ’‘<img src="https://avatars0.githubusercontent.com/u/450559?v=3" width="100px;"/><br /><sub><b>Sriram Thiagarajan</b></sub><br />πŸ’»
<img src="https://avatars1.githubusercontent.com/u/417268?v=3" width="100px;"/><br /><sub><b>Pavithra Kodmad</b></sub><br />πŸ’‘<img src="https://avatars0.githubusercontent.com/u/82070?v=3" width="100px;"/><br /><sub><b>Alessandro Arnodo</b></sub><br />πŸ’» πŸ“– ⚠️<img src="https://avatars1.githubusercontent.com/u/105127?v=3" width="100px;"/><br /><sub><b>Jason Miller</b></sub><br />πŸ‘€<img src="https://avatars0.githubusercontent.com/u/1295580?v=3" width="100px;"/><br /><sub><b>Kyle Welch</b></sub><br />πŸ‘€ πŸ’‘<img src="https://avatars0.githubusercontent.com/u/1634922?v=3" width="100px;"/><br /><sub><b>Javi Velasco</b></sub><br />πŸ‘€<img src="https://avatars1.githubusercontent.com/u/6886061?v=3" width="100px;"/><br /><sub><b>Brandon Dail</b></sub><br />πŸ‘€<img src="https://avatars2.githubusercontent.com/u/1714673?v=3" width="100px;"/><br /><sub><b>Jason Brown</b></sub><br />πŸ‘€
<img src="https://avatars3.githubusercontent.com/u/25375401?v=3" width="100px;"/><br /><sub><b>jackyho112</b></sub><br />πŸ’» ⚠️<img src="https://avatars0.githubusercontent.com/u/3629876?v=3" width="100px;"/><br /><sub><b>Kurtis Kemple</b></sub><br />πŸ’» ⚠️ πŸ“–<img src="https://avatars1.githubusercontent.com/u/38172?v=3" width="100px;"/><br /><sub><b>Bernardo Raposo</b></sub><br />πŸ“– πŸ’‘<img src="https://avatars2.githubusercontent.com/u/6325382?v=3" width="100px;"/><br /><sub><b>Ryan Delaney</b></sub><br />πŸ’»<img src="https://avatars2.githubusercontent.com/u/14035529?v=3" width="100px;"/><br /><sub><b>Anthony Ng</b></sub><br />πŸ“–<img src="https://avatars1.githubusercontent.com/u/37633?v=3" width="100px;"/><br /><sub><b>Matthew Crutchfield</b></sub><br />πŸ’‘<img src="https://avatars1.githubusercontent.com/u/662750?v=3" width="100px;"/><br /><sub><b>Kye Hohenberger</b></sub><br />πŸ’» ⚠️ πŸ“–
<img src="https://avatars3.githubusercontent.com/u/16327281?v=3" width="100px;"/><br /><sub><b>Bernard Lin</b></sub><br />πŸ“– πŸ”Œ<img src="https://avatars2.githubusercontent.com/u/11799597?v=3" width="100px;"/><br /><sub><b>Miguel Correa</b></sub><br />πŸ’»<img src="https://avatars2.githubusercontent.com/u/769339?v=3" width="100px;"/><br /><sub><b>Brian Hough</b></sub><br />πŸ’‘<img src="https://avatars3.githubusercontent.com/u/4950425?v=3" width="100px;"/><br /><sub><b>Erik Cupal</b></sub><br />πŸ’»<img src="https://avatars1.githubusercontent.com/u/9153498?v=3" width="100px;"/><br /><sub><b>Kok J Sam</b></sub><br />πŸ’»<img src="https://avatars2.githubusercontent.com/u/14885189?v=3" width="100px;"/><br /><sub><b>Oleg Proskurin</b></sub><br />πŸ“–<img src="https://avatars0.githubusercontent.com/u/848525?v=3" width="100px;"/><br /><sub><b>Luke John</b></sub><br />πŸ’»
<img src="https://avatars2.githubusercontent.com/u/4118089?v=3" width="100px;"/><br /><sub><b>FredericH</b></sub><br />πŸ’‘<img src="https://avatars3.githubusercontent.com/u/656630?v=3" width="100px;"/><br /><sub><b>Atticus White</b></sub><br />πŸ“– πŸ”Œ<img src="https://avatars0.githubusercontent.com/u/13483453?v=3" width="100px;"/><br /><sub><b>marzelin</b></sub><br />πŸ’»<img src="https://avatars2.githubusercontent.com/u/4074973?v=3" width="100px;"/><br /><sub><b>iwantmyname</b></sub><br />πŸš‡<img src="https://avatars1.githubusercontent.com/u/11809142?v=3" width="100px;"/><br /><sub><b>Ethan Godt</b></sub><br /><img src="https://avatars3.githubusercontent.com/u/2175447?v=3" width="100px;"/><br /><sub><b>Zill Ding</b></sub><br />πŸ’»<img src="https://avatars3.githubusercontent.com/u/411643?v=3" width="100px;"/><br /><sub><b>Dan Bradley</b></sub><br />πŸ’»
<img src="https://avatars3.githubusercontent.com/u/22868432?v=3" width="100px;"/><br /><sub><b>Lufty Wiranda</b></sub><br />πŸ’»<img src="https://avatars3.githubusercontent.com/u/3208863?v=3" width="100px;"/><br /><sub><b>Ansuman Shah</b></sub><br />πŸ’» πŸ“–<img src="https://avatars2.githubusercontent.com/u/11598?v=3" width="100px;"/><br /><sub><b>Travis LaDuke</b></sub><br />πŸ’‘<img src="https://avatars2.githubusercontent.com/u/11290953?v=3" width="100px;"/><br /><sub><b>AydΔ±n Γ‡ağrΔ± Dumlu</b></sub><br />πŸ› πŸ’»<img src="https://avatars2.githubusercontent.com/u/1383861?v=3" width="100px;"/><br /><sub><b>Maja Wichrowska</b></sub><br />πŸ›<img src="https://avatars3.githubusercontent.com/u/6845263?v=3" width="100px;"/><br /><sub><b>Tom Liu</b></sub><br />πŸ“–<img src="https://avatars3.githubusercontent.com/u/1863771?v=3" width="100px;"/><br /><sub><b>Siddharth Kshetrapal</b></sub><br />⚠️ πŸ”§
<img src="https://avatars2.githubusercontent.com/u/5257243?v=3" width="100px;"/><br /><sub><b>WillowHQ</b></sub><br />πŸ“–<img src="https://avatars3.githubusercontent.com/u/12202757?v=4" width="100px;"/><br /><sub><b>Mohammad Rajabifard</b></sub><br />πŸ› πŸ“–<img src="https://avatars3.githubusercontent.com/u/17005317?v=3" width="100px;"/><br /><sub><b>Omar Albacha</b></sub><br />πŸ’» πŸ“–<img src="https://avatars2.githubusercontent.com/u/28659384?v=3" width="100px;"/><br /><sub><b>tdeschryver</b></sub><br />πŸ’» ⚠️<img src="https://avatars0.githubusercontent.com/u/4955191?v=4" width="100px;"/><br /><sub><b>Dylan Mozlowski</b></sub><br />πŸ’»<img src="https://avatars2.githubusercontent.com/u/3275424?v=4" width="100px;"/><br /><sub><b>andretshurotshka</b></sub><br />πŸ’» ⚠️<img src="https://avatars3.githubusercontent.com/u/12836237?v=4" width="100px;"/><br /><sub><b>Danila</b></sub><br />⚠️
<img src="https://avatars3.githubusercontent.com/u/12473268?v=4" width="100px;"/><br /><sub><b>Junyoung Clare Jang</b></sub><br />πŸ’» ⚠️<img src="https://avatars2.githubusercontent.com/u/897575?v=4" width="100px;"/><br /><sub><b>BjΓΆrn Ricks</b></sub><br />πŸ› πŸ’» πŸ“– ⚠️<img src="https://avatars0.githubusercontent.com/u/4934193?v=4" width="100px;"/><br /><sub><b>Tyler Deitz</b></sub><br />πŸ’»<img src="https://avatars2.githubusercontent.com/u/16104985?v=4" width="100px;"/><br /><sub><b>Shovan Chatterjee</b></sub><br />πŸ“–<img src="https://avatars1.githubusercontent.com/u/6839660?v=4" width="100px;"/><br /><sub><b>johnjessewood</b></sub><br />πŸ’»<img src="https://avatars3.githubusercontent.com/u/856386?v=4" width="100px;"/><br /><sub><b>Daniel</b></sub><br />πŸ’» ⚠️<img src="https://avatars0.githubusercontent.com/u/174864?v=4" width="100px;"/><br /><sub><b>Ken Powers</b></sub><br />πŸ€” πŸ’‘
<img src="https://avatars1.githubusercontent.com/u/442932?v=4" width="100px;"/><br /><sub><b>John Grishin</b></sub><br />πŸ› πŸ’» ⚠️<img src="https://avatars3.githubusercontent.com/u/200528?v=4" width="100px;"/><br /><sub><b>Mordy Tikotzky</b></sub><br />πŸ› πŸ’»<img src="https://avatars3.githubusercontent.com/u/1027024?v=4" width="100px;"/><br /><sub><b>Alasdair McLeay</b></sub><br />πŸ’‘<img src="https://avatars1.githubusercontent.com/u/4171528?v=4" width="100px;"/><br /><sub><b>Ardamis Yeshak</b></sub><br />πŸ”§<img src="https://avatars2.githubusercontent.com/u/3729628?v=4" width="100px;"/><br /><sub><b>Matthew Armstrong</b></sub><br />⚠️<img src="https://avatars3.githubusercontent.com/u/876694?v=4" width="100px;"/><br /><sub><b>Wu Haotian</b></sub><br />πŸ’» ⚠️<img src="https://avatars1.githubusercontent.com/u/7829175?v=4" width="100px;"/><br /><sub><b>Viktor Ivarsson</b></sub><br />πŸ’»
<img src="https://avatars1.githubusercontent.com/u/11481355?v=4" width="100px;"/><br /><sub><b>Mitchell Hamilton</b></sub><br />πŸ’»<img src="https://avatars3.githubusercontent.com/u/8588?v=4" width="100px;"/><br /><sub><b>Aaron Jensen</b></sub><br />πŸ’»<img src="https://avatars2.githubusercontent.com/u/2104197?v=4" width="100px;"/><br /><sub><b>Colin Howeth</b></sub><br />πŸ’» πŸ“–<img src="https://avatars0.githubusercontent.com/u/19773?s=460&v=4" width="100px;"/><br /><sub><b>Royston Shufflebotham</b></sub><br />πŸ“–
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT