Design.
Without compromises.
The Build Time, CSS-in-TS Solution for Next-Level Theming with Minimal Shipped CSS.
Build your constraints. With Morfeo you have full control over your Design system and your Design Language.
Next, Remix, React, Svelte? Webpack, Vite, Esbuild? You name it, we have it! Morfeo runs everywhere.
Always wear the protection. Type-Safely styling is possible with Morfeo.
Components and Design tokens are automagically documented. For free. For real!
DX of CSS-in-JS, minimum possible CSS footprint, and no style injection at runtime. Simply Morfeo.
How it Works
Our goal is to provide the best Developer eXperience while ensuring best practices.
You can focus on your project - Under the hood we optimize your code to guarantee for your customers the best User eXperience.
Define your theme
Create your theme or use one of our presets.
Use it to style your components
Write CSS-in-JS styles based on your theme.
Morfeo will do the rest
The needed CSS will be extracted at build-time without you even notice it.
import { createMorfeo } from '@morfeo/react';
export const { morfeo } = createMorfeo({
theme: {
colors: {
primary: '#0066ff',
secondary: '#db2494',
success: '#01ce80',
warning: '#fbb03b',
accent: '#30b0c7',
error: '#ff3b30',
},
spacings: {
s: '1rem',
m: '1.5rem',
l: '2rem',
xl: '2.5rem',
},
},
});Holy f*ck,
That bundle of yours is absurd.
It's not about body bundle shaming, but we care about your shape.
Morfeo's compiler split your style into multiple, atomic CSS classes and reuses them as much as possible, resulting in a really small CSS bundle.