[![GitHub stars](https://img.shields.io/github/stars/neomorphism/neomo)](https://github.com/neomorphism/neomo/stargazers)
[![GitHub issues](https://img.shields.io/github/issues/neomorphism/neomo)](https://github.com/neomorphism/neomo/issues)
[![GitHub forks](https://img.shields.io/github/forks/neomorphism/neomo)](https://github.com/neomorphism/neomo/network)
[![GitHub license](https://img.shields.io/github/license/neomorphism/neomo)](https://github.com/neomorphism/neomo/blob/main/LICENSE)
[![npm version](https://img.shields.io/npm/v/neomo)](https://www.npmjs.com/package/neomo)
<a href="https://www.npmjs.com/package/neomo">
<img src="https://img.shields.io/npm/dt/neomo.svg" alt="Downloads">
</a>
<a href="https://www.npmjs.com/package/neomo">
<img src="https://img.shields.io/npm/dm/neomo.svg" alt="Downloads">
</a>
[![](https://data.jsdelivr.com/v1/package/npm/neomo/badge)](https://www.jsdelivr.com/package/npm/neomo)

<div align="center">
  <a href="https://neomo-ui.com/">
    <img src="https://neomo-ui.com/mainlogo.png" alt="neomo logo" width="350" height="350">
  </a>
</div>

> Neomorphism Design Framework Open Source

# Features

- Neomorphism design is a design language that makes the distinction between objects and backgrounds only shadowed, giving them a voluminous and vivid feeling of life.
- The distinction between objects and backgrounds is distinguished only by shadows and light, not by color tea, giving a round and smooth impression. Overall, the UI is lively, and this is tactile beyond simple graphics.

# Table of content

- [Getting Started](#getting-started)
- [What's included](#whats-included)
- [Homepage (Docs)](#homepage-docs)
- [NEOMO UI Sample](#neomo-ui-sample)
- [Template](#template)

# Getting Started

## CDN via JsDelivr

- CSS

```html
<link
  href="https://cdn.jsdelivr.net/npm/neomo@2.1.0/dist/neomo.min.css"
  rel="stylesheet"
/>
```

- JS

```html
<script src="https://cdn.jsdelivr.net/npm/neomo@2.1.0/dist/neomo.min.js"></script>
```

## NPM/YARN Package

```
npm install neomo

or

yarn add neomo
```

# What's included

```text
neomo/
├── css/
│   ├── components/
│   │   ├── alert.css
│   │   ├── badge.css
│   │   ├── breadcrumb.css
│   │   ├── button.css
│   │   ├── card.css
│   │   ├── dropdown.css
│   │   ├── icon.css
│   │   ├── modal.css
│   │   ├── navbar.css
│   │   ├── navigation.css
│   │   ├── pagination.css
│   │   ├── progressbar.css
│   │   ├── select.css
│   │   ├── spinners.css
│   │   ├── tab.css
│   │   ├── toast.css
│   │   └── tooltips.css
│   │
│   ├── content/
│   │   └── table.css
│   │
│   ├── forms/
│   │   ├── checkbox.css
│   │   ├── file.css
│   │   ├── floatinglabel.css
│   │   ├── input.css
│   │   ├── radio.css
│   │   ├── range.css
│   │   └── switches.css
│   │
│   ├── helpers/
│   │   ├── coloredLinks.css
│   │   └── typography.css
│   │
│   ├── layout/
│   │   ├── columns.css
│   │   └── container.css
│   │
│   ├── color.css
│   └── neomo.css
│
├── dist/
│   ├── neomo.min.css
│   └── neomo.min.js
│
└── js/
    └── neomo.js

```

# Homepage (Docs)

- URL : https://neomo-ui.com

# NEOMO UI Sample

- URL : https://neomorphism.github.io/

## Example

<div align="center">
<img src="https://neomo-ui.com/template1.png" alt="neomo logo" width="340" height="340">
<img src="https://neomo-ui.com/template2.png" alt="neomo logo" width="340" height="340">
</div>
<div align="center">
<img src="https://neomo-ui.com/template3.png" alt="neomo logo" width="340" height="340">
<img src="https://neomo-ui.com/template4.png" alt="neomo logo" width="340" height="340">
</div>

# Template

- URL :https://neomorphism.github.io/template/

## Example

<div align="center">
<img src="https://neomorphism.github.io/template/landing.png" alt="neomo logo" width="340" height="210">
<img src="https://neomorphism.github.io/template/portfolio.png" alt="neomo logo" width="340" height="210">
</div>
<div align="center">
<img src="https://neomorphism.github.io/template/sign-in.png" alt="neomo logo" width="340" height="210">
<img src="https://neomorphism.github.io/template/shop.png" alt="neomo logo" width="340" height="210">
</div>