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

---

---

Documentation | API | Contributing |

---

⚠️ 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 or contact us through Discord 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:

To see the markdown code just check the raw version of this README here.

Sponsors

🥇 Gold Sponsors

<div style="display: flex; flex-wrap: wrap;"> <div style="display: flex; flex-direction: column; align-items: center; margin: 0 20px"> <a href="https://vlkstudio.com" title="vlkstudio"> <img src="https://vlkstudio.com/assets/logo.svg" height="128px" width="128px" title="VLK Studio" /> </a> </div> <!-- Add more Gold sponsors here by using this template --> <!-- <div style="display: flex; flex-direction: column; align-items: center; margin: 0 20px"> <a href="{WEBSITE_URL}" title="{NAME}"> <img src="{LOGO_URL}" height="128px" width="128px" title="{NAME}" /> </a> </div> --> </div>

🥈 Silver Sponsors

<div style="display: flex; flex-wrap: wrap"> <!-- Add more Silver sponsors here by using this template --> <!-- <div style="display: flex; flex-direction: column; align-items: center; margin: 0 20px"> <a href="{WEBSITE_URL}" title="{NAME}"> <img src="{LOGO_URL}" height="64px" width="64px" title="{NAME}" /> </a> </div> --> </div>

🥉 Bronze Sponsors

<div style="display: flex; flex-wrap: wrap"> <!-- Add more Bronze sponsors here by using this template --> <!-- <div style="display: flex; flex-direction: column; align-items: center; margin: 0 20px"> <a href="{WEBSITE_URL}" title="{NAME}"> <img src="{LOGO_URL}" height="48px" width="48px" title="{NAME}" /> </a> </div> --> </div>

Contributors

<a href="https://github.com/morfeojs/morfeo/graphs/contributors"> <img src="https://contrib.rocks/image?repo=morfeojs/morfeo" /> </a>

Made with contrib.rocks