Repository files navigation

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

Documentation |API |Contributing |

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

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

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

• Framework Agnostic
• Single source of truth
• Multi theming
• Web Extension
• CLI
• Extendible
• Easy to test

You can start using morfeo in 30 seconds:

• install

  # or @morfeo/(react | svelte | native | web) depending on your framework of choicenpm i @morfeo/core# or with yarnyarn add @morfeo/core

• set the theme (you can create your own or use ourpreset)

  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 amorfeo style object into a validcss-in-js object:

  import{morfeo}from'@morfeo/core';/** * { *   "paddingLeft": "40px", *   "paddingRight": "40px" *   "borderRadius": "50%" *   "background-color": "#06f" * } */conststyle=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 arun time parser but even as a static css generator thanks to ourCLI (@morfeo/cli).

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

• @morfeo/react
• @morfeo/native
• @morfeo/styled-components-web
• @morfeo/svelte
• @morfeo/jss
• And more ...

And even more are coming soon:

• @morfeo/angularcoming soon

Click the image to watch the video on youtube!

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!

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

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

Made withcontrib.rocks