🧩 Mirinae Design System

Mirinae Storybook

👨‍👩‍👧 Author

See our OWNERS file.

📝 License

This project is Apache 2.0 licensed.

Chart License

Mirinae design system internally uses amCharts for Dynamic Chart. Before using the design system, look carefully at amCharts' license. If you want to purchase the amCharts license that suits you and use it on your application, see the license FAQ.

https://www.amcharts.com/online-store/licenses-explained/

How to Use

1. Install

npm install @cloudforet/mirinae vue vue-router vue-fragment

You need to use vue-router plug-in in your project to use several components that have dependencies with these plug-ins.

2. Set plugin

Add following lines to main.js file.

import MirinaeDesignSystem from '@cloudforet/mirinae';

Vue.use(MirinaeDesignSystem, pluginOptions);

Plugin Options

| Option | Description | |------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | vueI18n | Whether to set your Vue I18n configs. If you use Vue I18n and want to use your Vue I18n configs, give your Vue I18n to this option. In Mirinae, some components use Vue I18n. | | installFragment | Whether to install Vue Fragment. Some components use Vue Fragment, so don't give this option if you have already installed it in your application. |

interface MirinaeDSOptions {
    vueI18n?: VueI18n;
    installFragment?: boolean;
}

3. Set components locally

Example:

import { PButtonTab, PDynamicLayout } from '@cloudforet/mirinae';

export default {
    components: {
        PButtonTab,
        PDynamicLayout,
    },
    ...
}

Components with dependencies

These components require plug-ins vue-router and vue-i18n installed in your project to function fully. If these plug-ins are not installed, it may not work as intended.

| Plug-in | Components | |------------------|---------------------------------------| | Vue Router | - PLink - PBreadcrumbs |

How to Apply Styles

Mirinae Design System is based on Tailwindcss.

Global Styles

Case 1. All styles

If your project doesn't use tailwindcss, add the code below to main.ts.

import '@cloudforet/mirinae/css/style.css';
import '@cloudforet/mirinae/dist/style.css';

Case 2. Without tailwindcss styles

If your project use tailwindcss, you don't need to import all styles. In that case, add codes below to your tailwind.config.js.

const mirinaeTailwind = require('@cloudforet/mirinae/tailwind.config.js')

module.exports = {
    theme: {
        ...mirinaeTailwind.theme,
        // your customized theme
    },
    variants: [...mirinaeTailwind.variants, 
    //your customized variants 
    ],
    plugins: [
        ...mirinaeTailwind.plugins,
        //your customized plugins 
    ]
}

Also, you need to add codes below to your main.js.

import '@cloudforet/mirinae/css/light-style.css';
import '@cloudforet/mirinae/dist/style.css';