# Emotion > Documentation for Emotion ## Pages - [Emotion Documentation](docs-readme.md) - [Babel Macros](docs-babel-macros.md): [Create React App recently added support for Babel Macros](https://reactjs.org/blog/2018/10/01/create-react-app-v2.ht... - [Babel Plugin](docs-babel.md): `@emotion/babel-plugin`is highly recommended. All of the options that can be provided to`@emotion/babel-plugin`are... - [Best Practices](docs-best-practices.md): Emotion is an extremely flexible library, but this can make it intimidating, especially for new users. This guide con... - [CacheProvider](docs-cache-provider.md): It can be useful to customize emotion's options - i.e. to add custom Stylis plugins, customize prefix of inserted cla... - [Class Names](docs-class-names.md): It can be useful to create a className that is not passed to a component, for example if a component accepts a`wrapp... - [Community](docs-community.md): A curated list of awesome stuff related to Emotion. - [Composition](docs-composition.md): Composition is one of the most powerful and useful patterns in Emotion. You can compose styles together by interpolat... - [The css Prop](docs-css-prop.md): The primary way to style elements with emotion is the`css`prop. It provides a concise and flexible API to style you... - [Emotion 11](docs-emotion-11.md): Emotion 11 is a slight evolution over the Emotion 10. It focuses mainly on the developer experience, TS types improve... - [eslint-plugin-react](docs-eslint-plugin-react.md): The [`react/no-unknown-property`rule](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-un... - [Extract Static](docs-extract-static.md): extractStatic is deprecated and will be removed in emotion@10. We recommend disabling extractStatic or using other li... - [For Library Authors](docs-for-library-authors.md): **If you are writing a component library, carefully consider whether your library will depend on Emotion.** A simple ... - [Global Styles](docs-globals.md): Sometimes you might want to insert global css like resets or font faces. You can use the`Global`component to do thi... - [Install](docs-install.md): There are lots of ways to use Emotion, if you're using React, the easiest way to get started is to use the [`@emotion... - [Introduction](docs-introduction.md): Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style comp... - [Keyframes](docs-keyframes.md): You can define animations using the`keyframes`helper from`@emotion/react`.`keyframes`takes in a css keyframe def... - [Labels](docs-labels.md): Emotion adds a CSS property called`label`which is appended to the generated class name to make it more readable.`@... - [Media Queries](docs-media-queries.md): Using media queries in emotion works just like using media queries in regular css except you don't have to specify a ... - [Migrating to Emotion 10](docs-migrating-to-emotion-10.md): Emotion 10 is a significant change to Emotion, so it requires some changes to your code. Some of the changes can be d... - [Nested Selectors](docs-nested.md): Sometimes it's useful to nest selectors to target elements inside the current class or React component. An example wi... - [Object Styles](docs-object-styles.md): Writing styles with objects is a powerful pattern built directly into the core of emotion. Instead of writing css pro... - [Package Summaries](docs-package-summary.md): Below is a list of most of Emotion's packages and a summary of what it's for and how it relates to other Emotion pack... - [Performance](docs-performance.md): Emotion is a highly performant library and will not be a performance bottleneck in most applications. That said, if y... - [Source Maps](docs-source-maps.md): Note: - [Server Side Rendering](docs-ssr.md): Server side rendering in Emotion 10 has two approaches, each with their own trade-offs. The default approach works wi... - [Styled Components](docs-styled.md): `styled`is a way to create React components that have styles attached to them. It's available from [@emotion/styled]... - [Snapshot Testing](docs-testing.md): Adding [snapshot tests with Jest](https://facebook.github.io/jest/docs/en/snapshot-testing.html) is a great way to he... - [Theming](docs-theming.md): Theming is included in the [`@emotion/react`](https://emotion.sh/docs/@emotion/react) package. - [TypeScript](docs-typescript.md): Emotion includes TypeScript definitions for`@emotion/react`and`@emotion/styled`. These definitions infer types for... - [Attaching Props](docs-with-props.md): Some css-in-js libraries offer APIs to attach props to components, instead of having our own API to do that, we recom... - [Emotion Documentation](main-readme.md): **Emotion 11 has been released 🚀 [See the blog post](https://emotion.sh/docs/emotion-11)**