👋 Welcome

Morfeo is a set of tools to build your Design System and Style your application, with nearly zero runtime.

Understand Morfeo

To deeply understand what Morfeo is, and why you should use it in your workflow, you can think about Morfeo as a combination of 3 main parts:

Theming system

That makes you build your own theme (Design Language) or use the default one.

CSS-in-TS library

To safely style your application based on your theme.

Ahead of Time CSS extraction

Morfeo will look at your code to collect all the css-in-ts you've written and then extract only the needed CSS.

Ready to start?

Write your component

Button.tsx

import { morfeo } from '../morfeo';
 
const classes = morfeo.css({
  button: {
    bg: 'primary',
  },
});
 
function Button() {
  return <button className={classes('button')}>Hello, world</button>;
}

Morfeo will figure out the right classes

Button.tsx

function Button() {
  return <button className="bg-primary">Hello, world</button>;
}

And generate only the needed CSS

morfeo.css

:root {
  --colors-primary: #0066ff;
}
 
.bg-primary {
  background-color: var(--colors-primary);
}

The process that happens at build time is properly described here in this article.

Before you go

All the examples you'll find in the documentation are made using React, but Morfeo can be used everywhere. We are working to provide you with code snippets, examples, and even entire simple applications (opens in a new tab) written in the most popular frameworks and libraries.

💡

In other words:

If you're using React (or Next / Remix), you're ready to go. If you're instead using Svelte, Vue, Solid, Angular, Vanilla JS / HTMX (same thing) we don't think you'll struggle to understand how to adapt the snippets to your framework of choice, but anyway, we will cover you up soon.

Motivations