# STATUS: DEPRECATED AND UNMAINTAINED **For details on the unmaintained status (and to help people with an automated migration to [emotion](https://emotion.sh)), see [#419](https://github.com/paypal/glamorous/issues/419).**

glamorous 💄

Maintainable CSS with React

> Read [the intro blogpost][intro-blogpost] and [the v4 announcement blog post][v4-announcement-blogpost] [![Build Status][build-badge]][build] [![Code Coverage][coverage-badge]][coverage] [![version][version-badge]][package] [![downloads][downloads-badge]][npmcharts] [![MIT License][license-badge]][license] [![All Contributors](https://img.shields.io/badge/all_contributors-67-orange.svg?style=flat-square)](#contributors) [![PRs Welcome][prs-badge]][prs] [![Chat][chat-badge]][chat] [![Code of Conduct][coc-badge]][coc] [![gzip size][gzip-badge]][unpkg-dist] [![size][size-badge]][unpkg-dist] [![module formats: umd, cjs, and es][module-formats-badge]][unpkg-dist] [![Watch on GitHub][github-watch-badge]][github-watch] [![Star on GitHub][github-star-badge]][github-star] [![Tweet][twitter-badge]][twitter] ## Table of Contents - [ glamorous.rocks ](#glamorousrocks) - [Installation](#installation) - [Usage](#usage) - [Documentation](#documentation) - [Related projects](#related-projects) - [Using glamorous with react-sketchapp](#using-glamorous-with-react-sketchapp) - [Usage with Stylus](#usage-with-stylus) - [Users](#users) - [Inspiration](#inspiration) - [Other Solutions](#other-solutions) - [Support](#support) - [Got Questions?](#got-questions) - [Swag 👕](#swag-) - [Contributors](#contributors) - [LICENSE](#license) ## Installation You will find instructions to install glamorous [here](https://glamorous.rocks/basics/#installation). ## Usage You will find a getting started guide [here](https://glamorous.rocks/getting-started/). ## Documentation You will find [tutorials](https://glamorous.rocks/getting-started/), [examples](https://glamorous.rocks/examples/), [API documentation](https://glamorous.rocks/api), and more at the glamorous website:

glamorous.rocks

## Related projects - [`jest-glamor-react`](https://github.com/kentcdodds/jest-glamor-react): Jest utilities for Glamor and React - [`glamorous-native`](https://github.com/robinpowered/glamorous-native): React Native component styling solved 💄 - [`glamorous-primitives`](https://github.com/nitin42/glamorous-primitives): style primitive interfaces with glamorous 💄 - [`babel-plugin-glamorous-displayname`](https://github.com/bernard-lin/babel-plugin-glamorous-displayname): Automatically adds a `displayName` to your glamorous components for a better debugging experience. - [`styled-system`](https://github.com/jxnblk/styled-system): Design system utilities for styled-components, glamorous, and other css-in-js libraries - [`glamorous-pseudo`](https://github.com/tkh44/glamorous-pseudo): Pseudo component to extend built-in GlamorousComponents - [`preact-glam`](https://github.com/vesparny/preact-glam): A tiny glamorous version for preact - [`glamorous-jsxstyle`](https://github.com/paulmolluzzo/glamorous-jsxstyle): jsxstyle components generated with glamorous - [`vscode-glamorous`](https://github.com/nitin42/vscode-glamorous): A vscode extension for `glamorous`, `glamorous-native` and `glamorous-primitives`. - [`glam-atom`](https://github.com/nitin42/glam-atom): Atom editor extension for `glamorous`, `glamorous-native` and `glamorous-primitives`. - [`css-in-js`](https://atom.io/packages/css-in-js): Atom editor extension making it easy to convert normal CSS format to CSS in JS format. - [Convert CSS-in-JS](https://marketplace.visualstudio.com/items?itemName=paulmolluzzo.convert-css-in-js): VSCode extension making it easy to convert normal CSS format to CSS in JS format. - [`glamorous-redocx`](https://github.com/nitin42/glamorous-redocx): style [redocx](https://github.com/nitin42/redocx) components with glamorous 💄 - [`stylelint-processor-glamorous`](https://github.com/zabute/stylelint-processor-glamorous): Lint glamorous and related css-in-js with [stylelint](https://github.com/stylelint/stylelint). ## Using glamorous with react-sketchapp

With the release of [`glamorous-primitives`](https://github.com/nitin42/glamorous-primitives), now you can use glamorous with [react-sketchapp](https://github.com/airbnb/react-sketchapp) to manage design systems and use React components for designs. You can find documentation and related examples [here](https://github.com/airbnb/react-sketchapp/tree/master/examples/glamorous). ## Usage with Stylus You can use [glamorous-stylus](https://github.com/nitin42/glamorous-stylus) for styling React components with Stylus. Find detailed documentation [here](https://github.com/nitin42/glamorous-stylus#api-reference). ## Users Who uses `glamorous`? See [other/USERS.md](https://github.com/paypal/glamorous/blob/master/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: - [styled-components](https://github.com/styled-components/styled-components) - [jsxstyle](https://github.com/smyte/jsxstyle) ## 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][help-sandbox] and bring it up in [the chat][chat] ## Got Questions? Check out the [FAQ](other/FAQ.md). ## 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][gwc] 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](http://amzn.to/2rxvB1T).

## Contributors Thanks goes to these people ([emoji key][emojis]): | [

_{Kent C. Dodds}](https://kentcdodds.com)
[💻](https://github.com/paypal/glamorous/commits?author=kentcdodds "Code") [📖](https://github.com/paypal/glamorous/commits?author=kentcdodds "Documentation") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/paypal/glamorous/commits?author=kentcdodds "Tests") [👀](#review-kentcdodds "Reviewed Pull Requests") | [

_{Ives van Hoorne}](http://ivesvh.com)
[💡](#example-CompuIves "Examples") | [

_{Gerardo Nardelli}](https://gnardelli.com)
[📖](https://github.com/paypal/glamorous/commits?author=patitonar "Documentation") | [

_{Chandan Rai}](https://github.com/crowchirp)
[📖](https://github.com/paypal/glamorous/commits?author=crowchirp "Documentation") | [

_{BinHong Lee}](https://binhonglee.github.io)
[📖](https://github.com/paypal/glamorous/commits?author=binhonglee "Documentation") | [

_{Paul Molluzzo}](https://paul.molluzzo.com)
[📖](https://github.com/paypal/glamorous/commits?author=paulmolluzzo "Documentation") [💡](#example-paulmolluzzo "Examples") | [

_{Sriram Thiagarajan}](http://tsriram.in)
[💻](https://github.com/paypal/glamorous/commits?author=tsriram "Code") | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | | [

_{Pavithra Kodmad}](https://github.com/pksjce)
[💡](#example-pksjce "Examples") | [

_{Alessandro Arnodo}](http://alessandro.arnodo.net)
[💻](https://github.com/paypal/glamorous/commits?author=vesparny "Code") [📖](https://github.com/paypal/glamorous/commits?author=vesparny "Documentation") [⚠️](https://github.com/paypal/glamorous/commits?author=vesparny "Tests") | [

_{Jason Miller}](https://jasonformat.com)
[👀](#review-developit "Reviewed Pull Requests") | [

_{Kyle Welch}](http://www.krwelch.com)
[👀](#review-kwelch "Reviewed Pull Requests") [💡](#example-kwelch "Examples") | [

_{Javi Velasco}](http://javivelasco.com)
[👀](#review-javivelasco "Reviewed Pull Requests") | [

_{Brandon Dail}](https://twitter.com/aweary)
[👀](#review-aweary "Reviewed Pull Requests") | [

_{Jason Brown}](http://browniefed.com)
[👀](#review-browniefed "Reviewed Pull Requests") | | [

_jackyho112](https://github.com/jackyho112)
[💻](https://github.com/paypal/glamorous/commits?author=jackyho112 "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=jackyho112 "Tests") | [

_{Kurtis Kemple}](https://twitter.com/kurtiskemple)
[💻](https://github.com/paypal/glamorous/commits?author=kkemple "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=kkemple "Tests") [📖](https://github.com/paypal/glamorous/commits?author=kkemple "Documentation") | [

_{Bernardo Raposo}](http://bernardoraposo.com)
[📖](https://github.com/paypal/glamorous/commits?author=braposo "Documentation") [💡](#example-braposo "Examples") | [

_{Ryan Delaney}](http://rdel.io)
[💻](https://github.com/paypal/glamorous/commits?author=rrdelaney "Code") | [

_{Anthony Ng}](http://anthonyng.me)
[📖](https://github.com/paypal/glamorous/commits?author=newyork-anthonyng "Documentation") | [

_{Matthew Crutchfield}](http://cnn.com)
[💡](#example-mtcrutch "Examples") | [

_{Kye Hohenberger}](https://github.com/tkh44)
[💻](https://github.com/paypal/glamorous/commits?author=tkh44 "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=tkh44 "Tests") [📖](https://github.com/paypal/glamorous/commits?author=tkh44 "Documentation") | | [

_{Bernard Lin}](https://github.com/bernard-lin)
[📖](https://github.com/paypal/glamorous/commits?author=bernard-lin "Documentation") [🔌](#plugin-bernard-lin "Plugin/utility libraries") | [

_{Miguel Correa}](http://miguelc1221.github.io/)
[💻](https://github.com/paypal/glamorous/commits?author=miguelc1221 "Code") | [

_{Brian Hough}](http://rallypoint.gg)
[💡](#example-bhough "Examples") | [

_{Erik Cupal}](https://github.com/ErikCupal)
[💻](https://github.com/paypal/glamorous/commits?author=ErikCupal "Code") | [

_{Kok J Sam}](https://github.com/sammkj)
[💻](https://github.com/paypal/glamorous/commits?author=sammkj "Code") | [

_{Oleg Proskurin}](http://twitter.com/#!/usulpro)
[📖](https://github.com/paypal/glamorous/commits?author=UsulPro "Documentation") | [

_{Luke John}](https://github.com/luke-john)
[💻](https://github.com/paypal/glamorous/commits?author=luke-john "Code") | | [

_FredericH](http://fr.linkedin.com/in/fredericheem)
[💡](#example-FredericHeem "Examples") | [

_{Atticus White}](https://atticuswhite.com)
[📖](https://github.com/paypal/glamorous/commits?author=ajwhite "Documentation") [🔌](#plugin-ajwhite "Plugin/utility libraries") | [

_marzelin](https://github.com/marzelin)
[💻](https://github.com/paypal/glamorous/commits?author=marzelin "Code") | [

_iwantmyname](https://iwantmyname.com/)
[🚇](#infra-iwantmyname "Infrastructure (Hosting, Build-Tools, etc)") | [

_{Ethan Godt}](http://ethangodt.com)
| [

_{Zill Ding}](https://github.com/zillding)
[💻](https://github.com/paypal/glamorous/commits?author=zillding "Code") | [

_{Dan Bradley}](https://github.com/debradley)
[💻](https://github.com/paypal/glamorous/commits?author=debradley "Code") | | [

_{Lufty Wiranda}](http://instagram.com/luftywiranda13)
[💻](https://github.com/paypal/glamorous/commits?author=luftywiranda13 "Code") | [

_{Ansuman Shah}](https://github.com/ansumanshah)
[💻](https://github.com/paypal/glamorous/commits?author=ansumanshah "Code") [📖](https://github.com/paypal/glamorous/commits?author=ansumanshah "Documentation") | [

_{Travis LaDuke}](http://-)
[💡](#example-laduke "Examples") | [

_{Aydın Çağrı Dumlu}](https://github.com/acgrdumlu)
[🐛](https://github.com/paypal/glamorous/issues?q=author%3Aacgrdumlu "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=acgrdumlu "Code") | [

_{Maja Wichrowska}](https://github.com/majapw)
[🐛](https://github.com/paypal/glamorous/issues?q=author%3Amajapw "Bug reports") | [

_{Tom Liu}](https://github.com/gt3240)
[📖](https://github.com/paypal/glamorous/commits?author=gt3240 "Documentation") | [

_{Siddharth Kshetrapal}](https://github.com/siddharthkp)
[⚠️](https://github.com/paypal/glamorous/commits?author=siddharthkp "Tests") [🔧](#tool-siddharthkp "Tools") | | [

_WillowHQ](https://github.com/WillowHQ)
[📖](https://github.com/paypal/glamorous/commits?author=WillowHQ "Documentation") | [

_{Mohammad Rajabifard}](https://tarino.ir)
[🐛](https://github.com/paypal/glamorous/issues?q=author%3Amorajabi "Bug reports") [📖](https://github.com/paypal/glamorous/commits?author=morajabi "Documentation") | [

_{Omar Albacha}](https://github.com/Oalbacha)
[💻](https://github.com/paypal/glamorous/commits?author=Oalbacha "Code") [📖](https://github.com/paypal/glamorous/commits?author=Oalbacha "Documentation") | [

_tdeschryver](https://github.com/tdeschryver)
[💻](https://github.com/paypal/glamorous/commits?author=tdeschryver "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=tdeschryver "Tests") | [

_{Dylan Mozlowski}](https://github.com/DylanMoz)
[💻](https://github.com/paypal/glamorous/commits?author=DylanMoz "Code") | [

_{andretshurotshka}](https://github.com/goodmind)
[💻](https://github.com/paypal/glamorous/commits?author=goodmind "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=goodmind "Tests") | [

_Danila](https://github.com/O4epegb)
[⚠️](https://github.com/paypal/glamorous/commits?author=O4epegb "Tests") | | [

_{Junyoung Clare Jang}](http://ailrun.github.io/)
[💻](https://github.com/paypal/glamorous/commits?author=Ailrun "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=Ailrun "Tests") | [

_{Björn Ricks}](https://twitter.com/bjoernricks)
[🐛](https://github.com/paypal/glamorous/issues?q=author%3Abjoernricks "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=bjoernricks "Code") [📖](https://github.com/paypal/glamorous/commits?author=bjoernricks "Documentation") [⚠️](https://github.com/paypal/glamorous/commits?author=bjoernricks "Tests") | [

_{Tyler Deitz}](http://tylerdeitz.com)
[💻](https://github.com/paypal/glamorous/commits?author=tvler "Code") | [

_{Shovan Chatterjee}](https://twitter.com/shovan_ch)
[📖](https://github.com/paypal/glamorous/commits?author=shovanch "Documentation") | [

_{johnjessewood}](https://github.com/johnjesse)
[💻](https://github.com/paypal/glamorous/commits?author=johnjesse "Code") | [

_Daniel](https://www.danielberndt.net)
[💻](https://github.com/paypal/glamorous/commits?author=danielberndt "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=danielberndt "Tests") | [

_{Ken Powers}](https://knpw.rs)
[🤔](#ideas-knpwrs "Ideas, Planning, & Feedback") [💡](#example-knpwrs "Examples") | | [

_{John Grishin}](http://johngrish.in)
[🐛](https://github.com/paypal/glamorous/issues?q=author%3Aexah "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=exah "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=exah "Tests") | [

_{Mordy Tikotzky}](https://github.com/tikotzky)
[🐛](https://github.com/paypal/glamorous/issues?q=author%3Atikotzky "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=tikotzky "Code") | [

_{Alasdair McLeay}](https://github.com/penx)
[💡](#example-penx "Examples") | [

_{Ardamis Yeshak}](https://github.com/zabute)
[🔧](#tool-zabute "Tools") | [

_{Matthew Armstrong}](https://github.com/raingerber)
[⚠️](https://github.com/paypal/glamorous/commits?author=raingerber "Tests") | [

_{Wu Haotian}](https://github.com/whtsky)
[💻](https://github.com/paypal/glamorous/commits?author=whtsky "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=whtsky "Tests") | [

_{Viktor Ivarsson}](https://github.com/viktorivarsson)
[💻](https://github.com/paypal/glamorous/commits?author=viktorivarsson "Code") | | [

_{Mitchell Hamilton}](https://hamil.town)
[💻](https://github.com/paypal/glamorous/commits?author=mitchellhamilton "Code") | [

_{Aaron Jensen}](https://twitter.com/aaronjensen)
[💻](https://github.com/paypal/glamorous/commits?author=aaronjensen "Code") | [

_{Colin Howeth}](http://colinhoweth.com)
[💻](https://github.com/paypal/glamorous/commits?author=cbhoweth "Code") [📖](https://github.com/paypal/glamorous/commits?author=cbhoweth "Documentation") | [

_{Royston Shufflebotham}](https://github.com/roystons)
[📖](https://github.com/paypal/glamorous/commits?author=roystons "Documentation") | This project follows the [all-contributors][all-contributors] specification. Contributions of any kind welcome! ## LICENSE MIT [npm]: https://www.npmjs.com/ [node]: https://nodejs.org [build-badge]: https://img.shields.io/travis/paypal/glamorous.svg?style=flat-square [build]: https://travis-ci.org/paypal/glamorous [coverage-badge]: https://img.shields.io/codecov/c/github/paypal/glamorous.svg?style=flat-square [coverage]: https://codecov.io/github/paypal/glamorous [version-badge]: https://img.shields.io/npm/v/glamorous.svg?style=flat-square [package]: https://www.npmjs.com/package/glamorous [downloads-badge]: https://img.shields.io/npm/dm/glamorous.svg?style=flat-square [npmcharts]: https://npmcharts.com/compare/glamorous [license-badge]: https://img.shields.io/npm/l/glamorous.svg?style=flat-square [license]: https://github.com/paypal/glamorous/blob/master/LICENSE [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square [prs]: http://makeapullrequest.com [chat]: https://gitter.im/paypal/glamorous [chat-badge]: https://img.shields.io/gitter/room/paypal/glamorous.svg?style=flat-square [coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square [coc]: https://github.com/paypal/glamorous/blob/master/CODE_OF_CONDUCT.md [github-watch-badge]: https://img.shields.io/github/watchers/paypal/glamorous.svg?style=social [github-watch]: https://github.com/paypal/glamorous/watchers [github-star-badge]: https://img.shields.io/github/stars/paypal/glamorous.svg?style=social [github-star]: https://github.com/paypal/glamorous/stargazers [twitter]: https://twitter.com/intent/tweet?text=Check%20out%20glamorous!%20https://github.com/paypal/glamorous%20%F0%9F%91%8D [twitter-badge]: https://img.shields.io/twitter/url/https/github.com/paypal/glamorous.svg?style=social [emojis]: https://github.com/kentcdodds/all-contributors#emoji-key [all-contributors]: https://github.com/kentcdodds/all-contributors [gzip-badge]: http://img.badgesize.io/https://unpkg.com/glamorous/dist/glamorous.umd.min.js?compression=gzip&label=gzip%20size&style=flat-square [size-badge]: http://img.badgesize.io/https://unpkg.com/glamorous/dist/glamorous.umd.min.js?label=size&style=flat-square [unpkg-dist]: https://unpkg.com/glamorous/dist/ [module-formats-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20es-green.svg?style=flat-square [intro-blogpost]: https://medium.com/p/fb3c9f4ed20e [help-sandbox]: http://kcd.im/glamorous-help [gwc]: https://girlswhocode.com/ [stickers]: https://www.unixstickers.com/tag/glamorous [v4-announcement-blogpost]: https://blog.kentcdodds.com/glamorous-v4-is-here-c678fe02a39a

	Stars	Issues	Version	Updated	Created
emotion			11.0.0	3 years ago	7 years ago
glamorous	3,656	0	5.0.0	4 years ago	6 years ago
jss	6,952	210	10.10.0	4 months ago	12 years ago
radium	7,430	83	0.26.2	a year ago	10 years ago
styletron	3,320	38	3.0.4	5 years ago	7 years ago

emotion vs glamorous vs jss vs radium vs styletron

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past