Skip to main content

Framework Agnostic

The goal of morfeo is to completely separate the style of your App to its business logic, that's why it was made to be independent from any library or framework. To provide the best developer experience we already build a set of packages that will help you to easily integrate Morfeo in your application or website:

With npm
npm i @morfeo/react
With yarn
yarn add @morfeo/react

You can find more info about @morfeo/react here in the docs

Example with React

import { useStyle } from '@morfeo/react';

function Button({ children }) {
const style = useStyle({ componentName: 'Button' });
return <button style={style}>{children}</button>;
}

Example in React Native

import { Pressable } from 'react-native';
import { useStyle } from '@morfeo/native';

function Button({ children }) {
const style = useStyle({ componentName: 'Button' });
return <Pressable style={style}>{children}</Pressable>;
}

Example in Svelte

<script>
import { morfeoStyle } from "@morfeo/svelte";
</script>

<button use:morfeoStyle={{ componentName: 'Button' }}>
<slot></slot>
</button>

Example in Vanilla JS

Using JSS (useful to handle pseudos and media queries)

import { getStyles } from '@morfeo/web';

const { classes } = getStyles({
button: { componentName: 'Button' },
});

const button = document.createElement('button');

button.classList.add(classes.button);

Using core api

import { morfeo } from '@morfeo/web';

const style = morfeo.resolve({ componentName: 'Button' });

Without Javascript at all

Yes, morfeo can work even with Javascript disabled thanks to the CLI that can generate plain CSS based on one or more themes.

<html data-morfeo-theme="themeName">
<head>
<link rel="stylesheet" href="path/to/generated/styles" />
</head>
<body>
<button class="morfeo-button">No Javascript needed</button>
</body>
</html>

Checkout the documentation of @morfeo/cli here.