The easiest way to install Morfeo is by letting the CLI do it, just run:

npx morfeo init

After running it, you'll be asked to answer some questions:

  _ _ _
 ' ) ) )        /)
  / / / __ __  // _  __
 / ' (_(_)/ (_//_</_(_)
? Where is your code? ./src/**/*.{ts,tsx,js,jsx}
? Where do you want to place the extracted CSS? ./src/styles/morfeo.css
? Where do you want to create the morfeo instance? ./src/morfeo.ts

based on your answers, the CLI will automatically create all the needed configurations:

CLI Changes

After running the command a couple of files will be added/changed:

      • morfeo.css
    • morfeo.ts
  • package.json
  • package.json

    Inside the package.json will be added the following dependencies/scripts:

      "scripts": {
    +    "dev:morfeo": "morfeo extract --watch",
    +    "build:morfeo": "morfeo extract"
      "dependencies": {
    +    "@morfeo/web": "<latest-version>"
      "devDependencies": {
    +    "@morfeo/compiler": "<latest-version>"

    In case react is detected, the CLI will automatically install @morfeo/react instead of @morfeo/web


    This file will initially look like this:

    import { createMorfeo } from '@morfeo/web'; // or `@morfeo/react`
    export const morfeo = createMorfeo({
      output: './styles/morfeo.css', // based on what your answers
      entryPoints: ['./**/*.{ts,tsx,js,jsx}'], // based on what your answers

    This file exposes the morfeo instance you'll use all around your application to style your components. Based on the options passed to createMorfeo you can customize Morfeo's behavior, for example, you can give a custom theme or a custom prefix for your class names:

    import { createMorfeo } from '@morfeo/web'; // or `@morfeo/react`
    import { myCustomTheme } from './myCustomTheme';
    export const morfeo = createMorfeo({
      theme: myCustomTheme,
      prefix: 'my-prefix-',
      output: './styles/morfeo.css',
      entryPoints: ['./**/*.{ts,tsx,js,jsx}'],


    And, finally, the .gitignore will be updated in the following way:

    + # morfeo
    + /src/morfeo.css

    Manual Changes

    Now, it's your turn: As you can see the CLI added the file morfeo.css, please import this file in the main entry point of your application:

    import './styles/morfeo.css';
    export function App() {
      // Your app
      return <></>;

    That's it, you're now ready to use morfeo.