Skip to content
forked from morfeojs/morfeo

Morfeo is a tool to build design systems based on a theme. It helps you to follow a design language and write consistent UIs, whatever it is the framework of your choice. It's easy to use and, with the browser extension, your theme and your components are automatically documented.

License

Notifications You must be signed in to change notification settings

VLK-STUDIO/morfeo

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Morfeo logo

morfeo is a framework-agnostic set of tools that will help you to build your next design system based on a single source of truth: the theme.


Made with Morfeo codecov GitHub license Contributing Netlify Status DeepScan grade


Documentation | API | Contributing | Discord


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 the theme (you can create your own 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 '@morfeo/preset-default';
  • 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

Web Extension

Click the image to watch the video on youtube!

Morfeo Web Extension


Show your support

If this project helped you, please ⭐️ this repository!

If you really enjoyed Morfeo and you want to help us to make it grow, or you just want to show your love, become a sponsor!

Buy Me A Coffee

In case you used Morfeo in your project and you want to show it to the world, please, use one of these badges in your README:

Made with Morfeo

Made with Morfeo

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

Sponsors

πŸ₯‡ Gold Sponsors

πŸ₯ˆ Silver Sponsors

πŸ₯‰ Bronze Sponsors

Contributors

Made with contrib.rocks

About

Morfeo is a tool to build design systems based on a theme. It helps you to follow a design language and write consistent UIs, whatever it is the framework of your choice. It's easy to use and, with the browser extension, your theme and your components are automatically documented.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 64.9%
  • CSS 32.4%
  • JavaScript 2.2%
  • Other 0.5%