NMS Creative UI - Empowering Your UI with Style

Welcome to NMS Creative UI, a tailored library that utilizes React UI components from Material UI, implementing Google's Material Design guidelines.

Requirements

• Node.js v16.14+.
• React 18+.
• Do not delete any files in (package-lock.json / yarn.lock) in the folder.

Demo

https://design.nmscreative.com/ui

Installation

Run one of the following commands to add NMS Creative UI to your project:

npm install nms-creative-ui

Solar Icon Set

NMS Creative UI uses the Solar Icon Set. Add it to your project via npm.

npm install solar-icon-set

Lato Font

NMS Creative UI employs the Lato font as the default choice. Integrate it into your project using Fontsource or through the Google Fonts CDN. If the Lato font is not working, please follow one of these steps.

Add it to your project via Fontsource:

npm install @fontsource/lato

Then you can import it in your entry point like this:

import '@fontsource/lato/100.css';
import '@fontsource/lato/300.css';
import '@fontsource/lato/400.css';
import '@fontsource/lato/700.css';
import '@fontsource/lato/900.css';

Or using Google Web Fonts CDN:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">

Usage/Examples

import React from "react";
import { Button } from "nms-creative-ui";

const ButtonUsage = () => {
  return <Button>Hello world</Button>;
};

export default ButtonUsage;
}

Tech Stack

Vite - A build tool that aims to provide a faster and leaner development experience for modern web projects.

Material UI - The React UI library for faster and easier web development.

MUI X - A collection of advanced React UI components for complex use cases.

React Router - A lightweight, fully-featured routing library for the React JavaScript library.

React Dropzone - An open source library that provides drag & drop file uploads with image previews.

React Quill - A free, open source WYSIWYG editor built for the modern web.

React Copy To Clipboard - A React component that allows you to copy text to your clipboard.

Formik - Formik is the world's most popular open source form library for React and React Native.

Yup - A schema builder for runtime value parsing and validation.

Apex Charts - A modern charting library that helps developers to create beautiful and interactive visualizations for web pages.

React Syntax Highlighter - A syntax highlighter written in JavaScript.