Skip to main content

Getting started with Morfeo

Morfeo it's a tool to build design systems based on a theme.

It helps you to follow a design language and write consistent UIs, whatever is the framework of your choice.

It's easy to use and, with the browser extension, your theme and your components are automagically documented.

Features

How it works

You can start using morfeo in 30 seconds:

  • install

    # or @morfeo/(react | svelte | native | web) depending on your framework of choice
    npm i @morfeo/core
    # or with yarn
    yarn add @morfeo/core
  • set a theme, you can create your own (following our theme specification) or use our preset

    import { morfeo } from '@morfeo/core';
    import { darkTheme, lightTheme } from './themes';

    morfeo.setTheme('light', lightTheme);
    morfeo.setTheme('dark', darkTheme);

    or simply:

    // automatically adds two default light and dark themes.
    import { initPreset } from '@morfeo/preset-default';

    initPreset();
  • Use it everywhere to resolve a morfeo style object into a valid css-in-js object:

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

    /**
    * {
    * "paddingLeft": "40px",
    * "paddingRight": "40px"
    * "borderRadius": "50%"
    * "background-color": "#06f"
    * }
    */
    const style = morfeo.resolve({
    px: 'l',
    corner: 'round',
    bg: 'primary',
    });

Morfeo works everywhere, no matter what's the framework or library you're using, not only as a run time parser but even as a static css generator thanks to our CLI (@morfeo/cli).

Checkout all our packages and choose the one that fits better your needs:

And even more are coming soon:

  • @morfeo/angular coming soon