Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gitsindonesia/ui-component

Morpheme UI - Free and Open-source Vue 3 Component Library based on Morpheme Design System
https://github.com/gitsindonesia/ui-component

hacktoberfest library nuxt starter tailwindcss ui-components vue vuejs

Last synced: 6 days ago
JSON representation

Morpheme UI - Free and Open-source Vue 3 Component Library based on Morpheme Design System

Host: GitHub
URL: https://github.com/gitsindonesia/ui-component
Owner: gitsindonesia
License: mit
Created: 2022-01-31T04:07:08.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2024-09-05T13:49:57.000Z (4 months ago)
Last Synced: 2024-12-25T22:03:22.080Z (15 days ago)
Topics: hacktoberfest, library, nuxt, starter, tailwindcss, ui-components, vue, vuejs
Language: Vue
Homepage: https://ui.morpheme.design
Size: 39 MB
Stars: 79
Watchers: 2
Forks: 5
Open Issues: 2
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
- Roadmap: docs/roadmap.md

Awesome Lists containing this project

README

        # Morpheme UI

![npm](https://img.shields.io/npm/v/@morpheme/ui)

![npm](https://img.shields.io/npm/dm/@morpheme/ui)

[![Coverage](https://sonar.gits.id/api/project_badges/measure?project=gits-ui&metric=coverage&token=4eb076c49cd76f7e9ec5834aae3c1eee57160330)](https://sonar.gits.id/dashboard?id=gits-ui)

[![Quality Gate Status](https://sonar.gits.id/api/project_badges/measure?project=gits-ui&metric=alert_status&token=4eb076c49cd76f7e9ec5834aae3c1eee57160330)](https://sonar.gits.id/dashboard?id=gits-ui)

> GITS UI is now Morpheme UI. Check out migration guide [here](https://gitsindonesia.github.io/ui-component/guide/migration.html).

Morpheme UI (previously known as GITS UI) - A free and open-source Vue UI Library based on Morpheme Design System.

## Features

- 💻 Built with [Vue 3](https://vuejs.org/)

- 🎨 [Tailwind CSS](https://tailwindcss.com/)

- 💎 Includes [Iconify Vue](https://icones.js.org/) for customizable icon support

- 📦 Offers a first-party [Nuxt 3](https://nuxt.com/) module for easy integration into Nuxt projects

- 🚀 Provides [TypeScript](https://www.typescriptlang.org/) support by default

- 🎨 Allows for customization with CSS properties

- 🔌 Modular design: allows for use as a complete UI framework or as individual plugins

- 🏷 Headless component by default

- 🎨 Dark mode: ships with dark mode styles out-of-the-box

- 🌈 Theming support: create your own custom theme easily

## Documentation

Detailed documentation can be found [here](https://gitsindonesia.github.io/ui-component/).

## Starter

Checkout starter of Morpheme UI in the [starter](/starter/) directory.

### [Nuxt 3 + Minimal Starter](/starter/nuxt-minimal/)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/gitsindonesia/ui-component/tree/main/starter/nuxt-minimal)

### [Nuxt 3 + App Starter](https://github.com/gitsindonesia/nuxt-starter)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/gitsindonesia/nuxt-starter)

### [Vue 3](/starter/vue/)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/gitsindonesia/ui-component/tree/main/starter/vue)

## Development

To set up Morpheme UI for development:

- Install [lerna](https://lerna.js.org/) and [yarn](https://yarnpkg.com/) globally:

  ```bash

  npm i -g lerna yarn

  ```

- Bootstap all packages:

  ```

  lerna bootstrap

  ```

- Build all packages:

  ```

  lerna run build

  ```

- Run storybook:

  ```bash

  yarn dev

  ```

## Running Documentation

To run the documentation locally:

```

cd docs

yarn dev

```

To build the documentation for production:

```

cd docs

yarn build

```

## License

Morpheme UI is licensed under the MIT license.