# 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
css-modules			0.3.0	6 years ago	6 years ago
emotion			11.0.0	3 years ago	8 years ago
glamor	3,658	73	2.20.40	7 years ago	8 years ago
glamorous	3,643	0	5.0.0	5 years ago	7 years ago
typestyle	3,047	25	2.4.0	2 years ago	8 years ago

css-modules vs emotion vs glamor vs glamorous vs typestyle

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past