👩‍🎤 CSS-in-JS library designed for high performance style composition (by emotion-js)

Emotion Alternatives

Similar projects and alternatives to emotion

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a better emotion alternative or higher similarity.

emotion reviews and mentions

Posts with mentions or reviews of emotion. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-08-23.
  • Stylemapper - A Better Way To Style React Applications
    4 projects | dev.to | 23 Aug 2022
    There are plenty of ways to style React applications. From CSS-in-JS libraries like Emotion, Styled Components or Stitches to writing CSS (or SCSS / SASS) and then leverage build tooling to bring everything together. They all can be a great fit, but I was never 100% satisfied with the approaches. Some lead to repetitive code, while others make it more difficult to use native CSS features. Sometimes the styles are hard to reuse, and other times they are hard to customize.
  • Blockchain Lottery
    9 projects | reddit.com/r/typescript | 21 Jul 2022
    About the stack: - Typescript - Nextjs - TailwindCSS - Styled Components - Emotion - Twin.Macro (combining Styled Components with TailwindCSS) - NextI18Next integrated (wrong translationkeys result in compilation errors) - Web3React - Ethers - Redux Toolkit + Redux Observables (with hydration example) - Ramda among others
  • Is tailwind used in real world when working at companies?What do you use to style your website
    6 projects | reddit.com/r/Frontend | 21 Jun 2022
  • Create own default plugin to NX workspace
    8 projects | dev.to | 27 May 2022
    // schema.json { "$schema": "http://json-schema.org/schema", "cli": "nx", "$id": "ReactLibrary", "title": "", "type": "object", "properties": { "name": { "type": "string", "description": "Library name", "$default": { "$source": "argv", "index": 0 }, "x-prompt": "What name would you like to use for the library?", "pattern": "^[a-zA-Z].*$" }, "directory": { "type": "string", "description": "A directory where the lib is placed.", "alias": "dir" }, "domain": { "description": "Domain where this library belongs.", "type": "string", "default": "none", "alias": "dom", "x-prompt": { "message": "Which domain this library belongs?", "type": "list", "items": [ { "value": "web", "label": "Web" }, { "value": "common", "label": "Common" } ] } }, "scope": { "type": "string", "description": "A scope for the lib.", "alias": "sc" }, "type": { "description": "Library type", "type": "string", "alias": "t", "x-prompt": { "message": "Select library type?", "type": "list", "items": [ { "value": "data", "label": "Data" }, { "value": "model", "label": "Model" }, { "value": "util", "label": "Util" }, { "value": "feature", "label": "Feature" }, { "value": "ui", "label": "Ui" } ] } }, "style": { "description": "The file extension to be used for style files.", "type": "string", "default": "none", "alias": "s", "x-prompt": { "message": "Which stylesheet format would you like to use?", "type": "list", "items": [ { "value": "css", "label": "CSS" }, { "value": "scss", "label": "SASS(.scss) [ http://sass-lang.com ]" }, { "value": "styl", "label": "Stylus(.styl) [ http://stylus-lang.com ]" }, { "value": "less", "label": "LESS [ http://lesscss.org ]" }, { "value": "styled-components", "label": "styled-components [ https://styled-components.com ]" }, { "value": "@emotion/styled", "label": "emotion [ https://emotion.sh ]" }, { "value": "styled-jsx", "label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]" }, { "value": "none", "label": "None" } ] } }, "linter": { "description": "The tool to use for running lint checks.", "type": "string", "enum": ["eslint", "tslint"], "default": "eslint" }, "unitTestRunner": { "type": "string", "enum": ["jest", "none"], "description": "Test runner to use for unit tests.", "default": "jest" }, "skipFormat": { "description": "Skip formatting files.", "type": "boolean", "default": false }, "skipTsConfig": { "type": "boolean", "default": false, "description": "Do not update `tsconfig.json` for development experience." }, "pascalCaseFiles": { "type": "boolean", "description": "Use pascal case component file name (e.g. `App.tsx`).", "alias": "P", "default": false }, "routing": { "type": "boolean", "description": "Generate library with routes." }, "appProject": { "type": "string", "description": "The application project to add the library route to.", "alias": "a" }, "publishable": { "type": "boolean", "description": "Create a publishable library." }, "buildable": { "type": "boolean", "default": false, "description": "Generate a buildable library." }, "importPath": { "type": "string", "description": "The library name used to import it, like `@myorg/my-awesome-lib`." }, "component": { "type": "boolean", "description": "Generate a default component.", "default": true }, "js": { "type": "boolean", "description": "Generate JavaScript files rather than TypeScript files.", "default": false }, "globalCss": { "type": "boolean", "description": "When `true`, the stylesheet is generated using global CSS instead of CSS modules (e.g. file is `*.css` rather than `*.module.css`).", "default": false }, "strict": { "type": "boolean", "description": "Whether to enable tsconfig strict mode or not.", "default": true }, "setParserOptionsProject": { "type": "boolean", "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.", "default": false }, "standaloneConfig": { "description": "Split the project configuration into `/project.json` rather than including it inside `workspace.json`.", "type": "boolean" }, "compiler": { "type": "string", "enum": ["babel", "swc"], "default": "swc", "description": "Which compiler to use." } }, "required": ["name", "type", "scope", "domain"] }
  • Trim the fat: tips for keeping bundle size small 🏋️
    3 projects | dev.to | 15 May 2022
    For example: I was using emotion to style components, but this was overkill for such a small project. There was no good reason why I needed to keep it, so I just scrapped it for old-fashioned CSS and let the bundler take care of it.
  • PurgeCSS & styled-components: Does It Work?
    17 projects | dev.to | 29 Apr 2022
    On the other side of our titular question is styled-components. While I'm talking about styled-components specifically, the topics and concepts here apply to any CSS-in-JS provider (e.g. emotion). There is a smaller CSS-in-JS library called astroturf that aims to give the developer the best of all worlds, so the limitations I'll discuss later on don't apply there. But be careful with smaller projects/ones that claim you can have it all! You are wading through uncharted territory :)
  • Bad Habits of Mid-Level React Developers
    5 projects | dev.to | 9 Apr 2022
    You can implement component-scoped, colocated styles with the help of Emotion, styled-components, or CSS Modules, among other similar libraries. My personal preference is Emotion with the css prop.
  • Five coding interview questions I hate
    2 projects | reddit.com/r/programming | 25 Mar 2022
    For one, CSS-in-JS. emotion has first-class babel support, while esbuild still needs some work Basically, for esbuild / swc to work for 100% app developers, all the popular tooling with a build step must support them first.
  • Ukraine calls on gaming industry to suspend business with Russia
    2 projects | reddit.com/r/worldnews | 2 Mar 2022
  • Forget about styled components. Tailwind CSS is all you need.
    3 projects | dev.to | 25 Feb 2022
    There are two ways to apply styling to HTML: the style attribute and using CSS. While the style attribute can only change the style of the element itself, CSS lets you target classes, siblings, children and has additional features like media queries. Using the style attribute is considered an anti-pattern as it allows no abstraction and re-usability. While I think it's true that we shouldn't use the style attribute, I believe the original arguments in favor of CSS - abstraction and re-usability - no longer hold. With the coming of the component era, CSS classes have lost their appeal. Even CSS-in-JS libraries like styled-component and emotion seem to take the wrong approach. But let's back up a little first.
  • A note from our sponsor - Scout APM
    scoutapm.com | 30 Sep 2022
    Scout APM is great for developers who want to find and fix performance issues in their applications. With Scout, we'll take care of the bugs so you can focus on building great things 🚀. Learn more →


Basic emotion repo stats
8 days ago

emotion-js/emotion is an open source project licensed under MIT License which is an OSI approved license.

Clean code begins in your IDE with SonarLint
Up your coding game and discover issues early. SonarLint is a free plugin that helps you find & fix bugs and security issues from the moment you start writing code. Install from your favorite IDE marketplace today.
Find remote JavaScript jobs at our new job board 99remotejobs.com. There are 2 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.