Magnificent UI Component Library

- by Puneet Patel

---

Full Documentation

Live Demo Link: https://magnificentui.netlify.app

---

WEBSITE VIDEO DEMO

Magnificent.UI.mp4

---

Quick Start

Installing Magnificent UI is very easy!
There are two ways in which you could do so.

1. Import using HTML TAG

---

<link
	rel="stylesheet"
	href="https://magnificentui.netlify.app/src/magnificent.css"
/>

2. Import using CSS Import

---

@import url("https://magnificentui.netlify.app/src/magnificent.css");

Magnificent UI contains the following Components

---

1. Typography

2. Alerts

3. Buttons

4. Avatar

5. Badge

6. Cards

7. Image

8. Input

9. Snackbar

10. Lists

11. Modal

12. Rating

13. Grid

14. Navigation

14. Slider

15. Darkmode

---

Typography

Use Typography to format the text of your website.

You will find the following types of Typography on https://magnificentui.netlify.app/src/components/typography/typography.html

Headings

Font and its CDN

---

Alert

An alert displays a short and important message in a way that attracts the user's attention without interrupting the user's task.

You will find the following types of Alert on https://magnificentui.netlify.app/src/components/alert/alert.html

Basic and Descriptive Alert

• Info Alert
• Success Alert
• Warning Alert
• Error Alert
• Dissmissable Alert

---

Button

Buttons allow users to take action and make choices with a single press.

You will find the following types of Button on https://magnificentui.netlify.app/src/components/button/button.html

Standard Button

• Primary Button
• Secondary Button
• Success Button
• Warning Button

Outlined Buttons

• Primary Outline Button
• Secondary Outline Button
• Success Outline Button
• Warning Outline Button

Icon and Icon with Label Button

Floating Action Icon and Link Button

---

Avatar

Avatar can be used to show a user's profile picture on the profile information page, on the navigation bar, and in blogs grid items.

You will find the following types of Avatar on https://magnificentui.netlify.app/src/components/avatar/avatar.html

Standard Round Avatars

Round Avatars with Status

Text Avatars

---

Badge

Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.

You will find the following types of Badge on https://magnificentui.netlify.app/src/components/badge/badge.html

Badge with Text

Badge with Button

Badge with Icon

---

Card

Cards are used to display content and action on a particular topic. It provides a flexible and extensible content container with multiple variants and options.

You will find the following types of Card on https://magnificentui.netlify.app/src/components/card/card.html

Vertical Cards

Horizontal Cards

Cards with badges

Cards with dismiss button

Cards with text overlay

Text only cards

Shopping Cards Vertical

Shopping Cards Horizontal

Shopping Cards Variant: Cart

---

Image

Image components are used when you need to display pictures.

You will find the following types of Image on https://magnificentui.netlify.app/src/components/image/image.html

Responsive Image

Responsive Round Image

---

Input

The Input HTML element is used to create interactive controls for web-based forms in order to accept data from the user.

You will find the following types of Input on https://magnificentui.netlify.app/src/components/input/input.html

• Text Input
• Email Input (required field)
• Password Input (required field)
• Number Input
• Date Input (dd/mm/yyyy)
• File Upload Input
• Telephone Number Input
• Slider Input
• Radio Input
• Checkbox Input

---

Snackbar

Snackbar provides brief messages about app processes at the bottom of the screen.

You will find it on https://magnificentui.netlify.app/src/components/snackbar/snackbar.html

---

Lists

Lists are used to display content in an ordered manner.

You will find it on https://magnificentui.netlify.app/src/components/lists/lists.html

Menu List

Stacked List

---

Modal

The modal component provides a solid foundation for creating dialogs. popovers, lightboxes, or whatever else.

You will find it on https://magnificentui.netlify.app/src/components/modal/modal.html

---

Rating

Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own.

You will find it on https://magnificentui.netlify.app/src/components/rating/rating.html

---

Grid

Grid helps users to better understand the information as it's shown in a more structured and logical way.

You will find the following types of Grid on https://magnificentui.netlify.app/src/components/grid/grid.html

2 Item Grid

3 Item Grid

---

Navigation

Navigation bar is used to navigate through the web apps or websites.

You will find it on https://magnificentui.netlify.app/src/components/navigation/navigation.html

---

Slider

Slider allows user to make a selection of a value from a range of values.

You will find it on https://magnificentui.netlify.app/src/components/slider/slider.html

---

Darkmode

• Theme can be toggled between light mode and dark mode by clicking the toggle located at the top-right corner of every page.

• Theme will remain persistent between different browser sessions. (Implemented local storage to store theme memory)

Running the Component Library Locally

1. First: Clone the repository by running the command in your terminal.

git clone [email protected]:PuneetP16/Magnificent-UI.git

2. A directory named "Magnificent-UI" will be created on your machine.

3. Go to the index.html and use the live server to run the project.

👨‍💻 Lets connect !