# MatrixUI-component-library

**Repository Path**: ElyarYusuf_admin/MatrixUI-component-library

## Basic Information

- **Project Name**: MatrixUI-component-library
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-05
- **Last Updated**: 2026-05-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# [Matrix UI](https://matrix-ui.netlify.app)
The perfect UI library for styling your website


## Stack Used
HTML-5, CSS-3, Vanilla JavaScript
## Installation

To get the styles of the components, add the following line of code in the "head" tag of your html document

```bash
      <link rel="stylesheet" href="https://matrix-ui.netlify.app/styles.css">
```
To get the Font Awesome Icons, add the following line of code in the "head" tag of your html document
```bash
    <script src="https://kit.fontawesome.com/52c15eb80a.js" crossorigin="anonymous"></script>
```
## Components List
[Alerts](https://matrix-ui.netlify.app/componets/alert/alert)
- Success Alert
- Warning Alert
- Danger Alert
- Information Alert

[Avatar](https://matrix-ui.netlify.app/componets/avatar/avatar)

- Differnt Sizes Avatar (Extra Small to Extra Large )
- Avatar with circular border

[Badges](https://matrix-ui.netlify.app/componets/badge/badge)

- Simple Badges
- Pill Badges
- Badge on Icons
- Badge on Avatar

[Buttons](https://matrix-ui.netlify.app/componets/button/button)

- Simple Buttons
- Outlined Buttons
- Different sized buttons(Small & Large)
- Disabled Buttons
- Link buttons
- Icon Buttons
- Floated Action Button

[Cards](https://matrix-ui.netlify.app/componets/card/card)

- Vertical Card
- Card with Badge
- Card with Text Overlay
- Card with Dismiss
- Horizonatal Card
- Text Only card

[Chips](https://matrix-ui.netlify.app/componets/chips/chips)

- Simple Chips
- Chips with Avatar

[Drawer](https://matrix-ui.netlify.app/componets/drawer/drawer)

- Drawer slides from left

[Grids](https://matrix-ui.netlify.app/componets/grid/grid)

- Four Columns Grid
- Three Columns Grid
- Two Columns Grid
- Single Columns Grid

[Images](https://matrix-ui.netlify.app/componets/image/image)

- Full Width Responsive Image
- Round Image
- Square Image

[Forms & Inputs](https://matrix-ui.netlify.app/componets/input/input)

- Labeled Inputs
- Success & Error Inputs
- Input List
- Textarea
- Checkboxes
- Radio buttons
- Log in Form

[List](https://matrix-ui.netlify.app/componets/list/list)

- Simple List
- Notification List

[Modal](https://matrix-ui.netlify.app/componets/modal/modal)

- Modal Example
- Delete Model

[Navbar](https://matrix-ui.netlify.app/componets/navbar/navbar)

- Responsive Navbar

[Ratings](https://matrix-ui.netlify.app/componets/rating/rating)

- Large Size Ratings
- Medium Size Ratings
- Small Size Ratings

[Snackbar](https://matrix-ui.netlify.app/componets/snackbar/snackbar)

- Simple Snackbar

[Typography](https://matrix-ui.netlify.app/componets/typography/typography)

- Different Sized Headings
- Types of Paragraph Text
- Some Extra styles(Text Mark, Text Strike Through & Text Light Weight)

## Demo
![Matrix-ui-gif](https://user-images.githubusercontent.com/88648908/154843084-719c8eba-2fbe-428d-9131-60d3b6edbb5c.gif)