MyDecisive Core UI System

This repository and package are where our UI components live! Our UI core is primarily based on the @material/web web components library.

Components

| Component | mdai Web Component | React component | material-web base component | Demo | Stability | | --------- | -------------------- | ----------------- | --------------------------- | ---- | --------- | | Button | mdai-button | MdaiReactButton | md-*-button | ✅ | Preview | | Chips | 🔜 | 🔜 | md-chipset, md-*-chip | ✅ | | | Headings | Styles only | N/A | N/A | ✅ | Preview | | Icon | 🔜 | 🔜 | md-icon | ✅ | | | Menu | 🔜 | 🔜 | md-menu, md-menu-item | ✅ | | | Select | 🔜 | 🔜 | md-*-select | | | | Switch | 🔜 | 🔜 | md-switch | ✅ | | | Tabs | 🔜 | 🔜 | md-tabs, md-*-tab | | |

Getting Started

Installation

npm i --save @mydecisiveai/core-ui

Usage

Import the JS package and code into your app with:

// importing this file will import all web components. You do not need to import individual components where they are used in your application.
import "@mydecisiveai/core-ui";

// import styles. Vite-based projects should be able to accept these imports and work like 🪄 magic 🪄. Webpack projects may need a CSS loader.
import "@mydecisiveai/core-ui/mdai-base.css";
// import a color theme
import "@mydecisiveai/core-ui/mdai-theme-console.css";
// or
import "@mydecisiveai/core-ui/mdai-theme-website.css";

Development

Run the demo app locally

npm run dev

Build the library

npm run build

Build a hostable copy of the demo app

npm run build -- --mode demo