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][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]

[![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

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

• glamorous.rocks
• Installation
• Usage
• Documentation
• Related projects
• Using glamorous with react-sketchapp
• Usage with Stylus
• Users
• Inspiration
• Other Solutions
• Support
• Got Questions?
• Swag 👕
• Contributors
• LICENSE

<!-- 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

• jest-glamor-react: Jest utilities for Glamor and React
• glamorous-native: React Native component styling solved 💄
• glamorous-primitives: style primitive interfaces with glamorous 💄
• babel-plugin-glamorous-displayname: Automatically adds a displayName to your glamorous components for a better debugging experience.
• styled-system: Design system utilities for styled-components, glamorous, and other css-in-js libraries
• glamorous-pseudo: Pseudo component to extend built-in GlamorousComponents
• preact-glam: A tiny glamorous version for preact
• glamorous-jsxstyle: jsxstyle components generated with glamorous
• vscode-glamorous: A vscode extension for glamorous, glamorous-native and glamorous-primitives.
• glam-atom: Atom editor extension for glamorous, glamorous-native and glamorous-primitives.
• css-in-js: Atom editor extension making it easy to convert normal CSS format to CSS in JS format.
• Convert CSS-in-JS: VSCode extension making it easy to convert normal CSS format to CSS in JS format.
• glamorous-redocx: style redocx components with glamorous 💄
• stylelint-processor-glamorous: Lint glamorous and related css-in-js with stylelint.

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:

• styled-components
• 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.

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.

<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][emojis]):

<!-- 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 />_{<b>Kent C. Dodds</b>}<br />💻 📖 🚇 ⚠️ 👀 | <img src="https://avatars0.githubusercontent.com/u/587016?v=3" width="100px;"/><br />_{<b>Ives van Hoorne</b>}<br />💡 | <img src="https://avatars3.githubusercontent.com/u/4614574?v=3" width="100px;"/><br />_{<b>Gerardo Nardelli</b>}<br />📖 | <img src="https://avatars0.githubusercontent.com/u/14236753?v=3" width="100px;"/><br />_{<b>Chandan Rai</b>}<br />📖 | <img src="https://avatars3.githubusercontent.com/u/16726210?v=3" width="100px;"/><br />_{<b>BinHong Lee</b>}<br />📖 | <img src="https://avatars2.githubusercontent.com/u/737065?v=3" width="100px;"/><br />_{<b>Paul Molluzzo</b>}<br />📖 💡 | <img src="https://avatars0.githubusercontent.com/u/450559?v=3" width="100px;"/><br />_{<b>Sriram Thiagarajan</b>}<br />💻 | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | | <img src="https://avatars1.githubusercontent.com/u/417268?v=3" width="100px;"/><br />_{<b>Pavithra Kodmad</b>}<br />💡 | <img src="https://avatars0.githubusercontent.com/u/82070?v=3" width="100px;"/><br />_{<b>Alessandro Arnodo</b>}<br />💻 📖 ⚠️ | <img src="https://avatars1.githubusercontent.com/u/105127?v=3" width="100px;"/><br />_{<b>Jason Miller</b>}<br />[👀](#review-developit "Reviewed Pull Requests