https://github.com/morfeojs/morfeo

Morfeo is a build-time CSS-in-TS solution for the next level theming, with the minimum amount of shipped CSS.
https://github.com/morfeojs/morfeo

build-time css css-in-js design-system framework-agnostic javascript morfeo morfeo-js react typescript

Last synced: 20 days ago
JSON representation

Morfeo is a build-time CSS-in-TS solution for the next level theming, with the minimum amount of shipped CSS.

• Host: GitHub
• URL: https://github.com/morfeojs/morfeo
• Owner: morfeojs
• License: mit
• Created: 2021-05-21T16:43:46.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2025-03-31T19:37:05.000Z (29 days ago)
• Last Synced: 2025-03-31T20:33:58.981Z (29 days ago)
• Topics: build-time, css, css-in-js, design-system, framework-agnostic, javascript, morfeo, morfeo-js, react, typescript
• Language: TypeScript
• Homepage: https://morfeo.dev
• Size: 21.5 MB
• Stars: 36
• Watchers: 3
• Forks: 4
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
![X Banner](https://github.com/morfeojs/morfeo/assets/13780027/a7d3d5ae-fe23-4fa4-92be-167cbf76868d)

Morfeo is a build-time CSS-in-TS solution for the next level theming, with the minimum amount of shipped CSS.

---

[![Made with Morfeo](https://img.shields.io/badge/made%20with%20morfeo-0066ff?logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIxOTAuMjIyIDE3OS4xMjkgNTAgNTAuMDA0IiB3aWR0aD0iNTAiIGhlaWdodD0iNTAuMDA0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik0yNy41NzIsNDcuOTIxbDAsMGwxOC40NSwtMTguNDExYzAuMDQ3LC0wLjA1MSAwLjA5NywtMC4xMDEgMC4xNDgsLTAuMTQ4bDAsMGwwLDBjMC40NjMsLTAuNDI2IDEuMDgxLC0wLjY4NyAxLjc1OSwtMC42ODdjMS40MzQsMCAyLjU5OCwxLjE2NSAyLjU5OCwyLjU5OGwwLDE2LjEzMWMwLDEuNDM0IC0xLjE2NCwyLjU5OCAtMi41OTgsMi41OThsLTQ0LjgwNCwwYy0xLjQzNCwwIC0yLjU5OCwtMS4xNjQgLTIuNTk4LC0yLjU5OGwwLDBjMCwwIDAsLTE2LjEzMSAwLC0xNi4xMzFjMCwtMS40MzMgMS4xNjQsLTIuNTk4IDIuNTk4LC0yLjU5OGMwLjc1MSwwIDEuNDI5LDAuMzIgMS45MDMsMC44M2wwLDBsMTguNDUxLDE4LjQxNmMwLjM0MSwwLjM1NiAxLjIxNiwwLjk5NyAyLjA0NywwLjk5N2MwLjgzLDAgMS41MjMsLTAuNDkgMi4wNDYsLTAuOTk3WiIgc3R5bGU9ImZpbGw6IHJnYigyNTUsIDI1NSwgMjU1KTsiIHRyYW5zZm9ybT0ibWF0cml4KDEsIDAsIDAsIDEsIDE4OS42OTUxNzUsIDE3OS4xMzA1NTQpIi8+CiAgPHBhdGggZD0iTTQ3LjI0NCwwLjAwMmMwLjA1NCwtMC4wMDIgMC4xMDgsLTAuMDA0IDAuMTYyLC0wLjAwNGMwLjA1NCwwIDAuMTA4LDAuMDAyIDAuMTYxLDAuMDA0bDAuMDAxLDBjMS41OTksMC4wODUgMi44NzEsMS40MSAyLjg3MSwzLjAyOWMwLDAuOTE3IC0wLjQwOCwxLjczOSAtMS4wNTEsMi4yOTVsMCwwbC0yMS43OSwyMS43OWMtMC41NDIsMC41MDYgLTEuMjc2LDAuODE1IC0yLjA3NCwwLjgxNWMtMC45MDcsMCAtMS43MzEsLTAuNCAtMi4yODcsLTEuMDMxbC0yMS42NTksLTIxLjY3MWwwLDBjLTAuNTgxLC0wLjU1MiAtMC45NDQsLTEuMzMzIC0wLjk0NCwtMi4xOThjMCwtMS42NzQgMS4zNTksLTMuMDMzIDMuMDMzLC0zLjAzM2MwLjA1NSwwIDAuMTA5LDAuMDAyIDAuMTYyLDAuMDA0bDAsMGw0My40MTUsMFoiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDI1NSk7IiB0cmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCAxODkuNjk1MTc1LCAxNzkuMTMwNTU0KSIvPgo8L3N2Zz4=)](https://morfeo.dev)

[![codecov](https://codecov.io/gh/morfeojs/morfeo/branch/main/graph/badge.svg?token=CZBHY8J802)](https://codecov.io/gh/morfeojs/morfeo)

[![GitHub license](https://img.shields.io/github/license/morfeojs/morfeo)](https://github.com/morfeojs/morfeo/blob/main/LICENSE)

[![Contributing](https://img.shields.io/badge/PRs-welcome-brightgreen)](https://github.com/morfeojs/morfeo/blob/main/CONTRIBUTING.md)

[![DeepScan grade](https://deepscan.io/api/teams/15451/projects/18608/branches/460695/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=15451&pid=18608&bid=460695)

---

[Documentation](https://morfeo.dev) | [API](https://github.com/morfeojs/morfeo) | [Contributing](https://github.com/morfeojs/morfeo/blob/main/CONTRIBUTING.md) | [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.gg/5hbsKMBRBh)

---

# ⚠️ Morfeo V1.0.0 COMING SOON ⚠️

Hello, I'm working to finalize version 1.0.0 of Morfeo, it will include many nice features such as static extraction of `CSS`, optimization of the extracted `CSS`, minimal runtime overhead, and a beautiful `DX`.

Until the v1, Morfeo is NOT PRODUCTION READY since its API can change drastically - but if you're interested in what we're doing have a look to the new [docs](https://morfeo-docs.vercel.app/) or contact us through [Discord](https://badgen.net/badge/icon/discord?icon=discord&label) or open an issue and we'll be glad to answer.

---

Morfeo is a build-time CSS-in-JS solution for the next level theming, with the minimum amount of shipped CSS.

## Show your support

If this project helped you, please ⭐️ this repository!

In case you used Morfeo in your project and you want to show it to the world, you can use one of these badges in your `README` or your website:

[![Made with Morfeo](https://img.shields.io/badge/made%20with%20morfeo-0066ff?logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIxOTAuMjIyIDE3OS4xMjkgNTAgNTAuMDA0IiB3aWR0aD0iNTAiIGhlaWdodD0iNTAuMDA0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik0yNy41NzIsNDcuOTIxbDAsMGwxOC40NSwtMTguNDExYzAuMDQ3LC0wLjA1MSAwLjA5NywtMC4xMDEgMC4xNDgsLTAuMTQ4bDAsMGwwLDBjMC40NjMsLTAuNDI2IDEuMDgxLC0wLjY4NyAxLjc1OSwtMC42ODdjMS40MzQsMCAyLjU5OCwxLjE2NSAyLjU5OCwyLjU5OGwwLDE2LjEzMWMwLDEuNDM0IC0xLjE2NCwyLjU5OCAtMi41OTgsMi41OThsLTQ0LjgwNCwwYy0xLjQzNCwwIC0yLjU5OCwtMS4xNjQgLTIuNTk4LC0yLjU5OGwwLDBjMCwwIDAsLTE2LjEzMSAwLC0xNi4xMzFjMCwtMS40MzMgMS4xNjQsLTIuNTk4IDIuNTk4LC0yLjU5OGMwLjc1MSwwIDEuNDI5LDAuMzIgMS45MDMsMC44M2wwLDBsMTguNDUxLDE4LjQxNmMwLjM0MSwwLjM1NiAxLjIxNiwwLjk5NyAyLjA0NywwLjk5N2MwLjgzLDAgMS41MjMsLTAuNDkgMi4wNDYsLTAuOTk3WiIgc3R5bGU9ImZpbGw6IHJnYigyNTUsIDI1NSwgMjU1KTsiIHRyYW5zZm9ybT0ibWF0cml4KDEsIDAsIDAsIDEsIDE4OS42OTUxNzUsIDE3OS4xMzA1NTQpIi8+CiAgPHBhdGggZD0iTTQ3LjI0NCwwLjAwMmMwLjA1NCwtMC4wMDIgMC4xMDgsLTAuMDA0IDAuMTYyLC0wLjAwNGMwLjA1NCwwIDAuMTA4LDAuMDAyIDAuMTYxLDAuMDA0bDAuMDAxLDBjMS41OTksMC4wODUgMi44NzEsMS40MSAyLjg3MSwzLjAyOWMwLDAuOTE3IC0wLjQwOCwxLjczOSAtMS4wNTEsMi4yOTVsMCwwbC0yMS43OSwyMS43OWMtMC41NDIsMC41MDYgLTEuMjc2LDAuODE1IC0yLjA3NCwwLjgxNWMtMC45MDcsMCAtMS43MzEsLTAuNCAtMi4yODcsLTEuMDMxbC0yMS42NTksLTIxLjY3MWwwLDBjLTAuNTgxLC0wLjU1MiAtMC45NDQsLTEuMzMzIC0wLjk0NCwtMi4xOThjMCwtMS42NzQgMS4zNTksLTMuMDMzIDMuMDMzLC0zLjAzM2MwLjA1NSwwIDAuMTA5LDAuMDAyIDAuMTYyLDAuMDA0bDAsMGw0My40MTUsMFoiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDI1NSk7IiB0cmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCAxODkuNjk1MTc1LCAxNzkuMTMwNTU0KSIvPgo8L3N2Zz4=)](https://morfeo.dev)

[![Made with Morfeo](https://img.shields.io/badge/made%20with-%20morfeo-0066ff?logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1MSA1MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48cmVjdCBpZD0iXzUwLWZ1bGwiIHNlcmlmOmlkPSI1MC1mdWxsIiB4PSIwLjUyNyIgeT0iMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBzdHlsZT0iZmlsbDpub25lOyIvPjxjbGlwUGF0aCBpZD0iX2NsaXAxIj48cmVjdCB4PSIwLjUyNyIgeT0iMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjX2NsaXAxKSI+PGc+PHBhdGggZD0iTTI3LjU3Miw0Ny45MjFsMCwwbDE4LjQ1LC0xOC40MTFjMC4wNDcsLTAuMDUxIDAuMDk3LC0wLjEwMSAwLjE0OCwtMC4xNDhsMCwwbDAsMGMwLjQ2MywtMC40MjYgMS4wODEsLTAuNjg3IDEuNzU5LC0wLjY4N2MxLjQzNCwwIDIuNTk4LDEuMTY1IDIuNTk4LDIuNTk4bDAsMTYuMTMxYzAsMS40MzQgLTEuMTY0LDIuNTk4IC0yLjU5OCwyLjU5OGwtNDQuODA0LDBjLTEuNDM0LDAgLTIuNTk4LC0xLjE2NCAtMi41OTgsLTIuNTk4bDAsMGMwLDAgMCwtMTYuMTMxIDAsLTE2LjEzMWMwLC0xLjQzMyAxLjE2NCwtMi41OTggMi41OTgsLTIuNTk4YzAuNzUxLDAgMS40MjksMC4zMiAxLjkwMywwLjgzbDAsMGwxOC40NTEsMTguNDE2YzAuMzQxLDAuMzU2IDEuMjE2LDAuOTk3IDIuMDQ3LDAuOTk3YzAuODMsMCAxLjUyMywtMC40OSAyLjA0NiwtMC45OTdaIiBzdHlsZT0iZmlsbDojMDZmOyIvPjxwYXRoIGQ9Ik00Ny4yNDQsMC4wMDJjMC4wNTQsLTAuMDAyIDAuMTA4LC0wLjAwNCAwLjE2MiwtMC4wMDRjMC4wNTQsMCAwLjEwOCwwLjAwMiAwLjE2MSwwLjAwNGwwLjAwMSwwYzEuNTk5LDAuMDg1IDIuODcxLDEuNDEgMi44NzEsMy4wMjljMCwwLjkxNyAtMC40MDgsMS43MzkgLTEuMDUxLDIuMjk1bDAsMGwtMjEuNzksMjEuNzljLTAuNTQyLDAuNTA2IC0xLjI3NiwwLjgxNSAtMi4wNzQsMC44MTVjLTAuOTA3LDAgLTEuNzMxLC0wLjQgLTIuMjg3LC0xLjAzMWwtMjEuNjU5LC0yMS42NzFsMCwwYy0wLjU4MSwtMC41NTIgLTAuOTQ0LC0xLjMzMyAtMC45NDQsLTIuMTk4YzAsLTEuNjc0IDEuMzU5LC0zLjAzMyAzLjAzMywtMy4wMzNjMC4wNTUsMCAwLjEwOSwwLjAwMiAwLjE2MiwwLjAwNGwwLDBsNDMuNDE1LDBaIiBzdHlsZT0iZmlsbDojMDZmOyIvPjwvZz48L2c+PC9zdmc+)](https://morfeo.dev)

> To see the markdown code just check the raw version of this README [here](https://raw.githubusercontent.com/morfeojs/morfeo/main/README.md).

## Sponsors

### 🥇 Gold Sponsors



  


    

      

    

  

  

  



### 🥈 Silver Sponsors



  

  



### 🥉 Bronze Sponsors



  

  



## Contributors



  



Made with [contrib.rocks](https://contrib.rocks)