107 lines
3.5 KiB
Markdown
107 lines
3.5 KiB
Markdown
<div align="center" markdown="1">
|
||
|
||
<img src="https://github.com/user-attachments/assets/0a81cdc1-d957-47a9-b151-f5571be0d038" width="80" />
|
||
|
||
# Jingrow UI
|
||
**Rapidly build modern frontends for Jingrow apps**
|
||
|
||
<img alt="NPM Downloads" src="https://img.shields.io/npm/dm/jingrow-ui.svg?style=flat"/>
|
||
|
||
<a href="https://ui.jingrow.com">
|
||
<img width="1292" alt="Screenshot 2024-12-12 at 5 27 58 PM" src="https://github.com/user-attachments/assets/56800b45-2859-4dc5-92b8-e40959ce4902" />
|
||
</a>
|
||
</div>
|
||
|
||
## Jingrow UI
|
||
|
||
Jingrow UI provides a set of components and utilities for rapid UI development. Components are built using Vue 3 and Tailwind.
|
||
Along with generic components like Button, Link, Dialog, etc., it also contains utilities for handling server-side data fetching, directives and utilities.
|
||
|
||
|
||
### Motivation
|
||
In 2019, I began building [Jingrow Books](https://github.com/jingrow/books) which had a new design. This led to the creation of small reusable components like Button, Dialog, and Card. Moving on to [Jingrow Cloud](https://github.com/jingrow/press) in 2020, I reused and evolved these components in the Jingrow Cloud UI. In 2022, while starting a new project, I decided to extract these components into a standalone package to avoid repeating the copy-paste process. This package is now being developed alongside the [Gameplan](https://github.com/jingrow/gameplan), continually adding generic components and utilities for frontend development.
|
||
|
||
### Under the Hood
|
||
|
||
- [TailwindCSS](https://github.com/tailwindlabs/tailwindcss): Utility first CSS Framework to build design system based UI.
|
||
- [Headless UI](https://github.com/tailwindlabs/headlessui): Unstyled and accessible UI components.
|
||
- [TipTap](https://github.com/ueberdosis/tiptap): ProseMirror based rich-text editor with a Vue API.
|
||
- [dayjs](https://github.com/iamkun/dayjs): Minimal javascript library for working with dates.
|
||
|
||
## Links
|
||
|
||
- [Documentation](https://jingrowui.com)
|
||
- [Jingrow UI Starter Boilerplate](https://github.com/netchampfaris/jingrow-ui-starter)
|
||
- [Community](https://github.com/jingrow/jingrow-ui/discussions)
|
||
|
||
## Usage
|
||
|
||
```sh
|
||
npm install jingrow-ui
|
||
# or
|
||
yarn add jingrow-ui
|
||
```
|
||
|
||
Now, import the JingrowUI plugin and components in your Vue app's `main.js`:
|
||
|
||
```js
|
||
import { createApp } from 'vue'
|
||
import { JingrowUI } from 'jingrow-ui'
|
||
import App from './App.vue'
|
||
import './index.css'
|
||
|
||
let app = createApp(App)
|
||
app.use(JingrowUI)
|
||
app.mount('#app')
|
||
```
|
||
|
||
In your `tailwind.config.js` file, include the jingrow-ui preset:
|
||
|
||
```js
|
||
module.exports = {
|
||
presets: [
|
||
require('jingrow-ui/src/utils/tailwind.config')
|
||
],
|
||
...
|
||
}
|
||
```
|
||
|
||
Now, you can import needed components and start using it:
|
||
|
||
```html
|
||
<template>
|
||
<button>Click me</button>
|
||
</template>
|
||
<script>
|
||
import { Button } from 'jingrow-ui'
|
||
export default {
|
||
components: {
|
||
Button,
|
||
},
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## Used By
|
||
|
||
Jingrow UI is being used in a lot of products by
|
||
[Jingrow](https://github.com/jingrow).
|
||
|
||
- [Jingrow Cloud](https://jcloud.jingrow.com)
|
||
- [Gameplan](https://github.com/jingrow/gameplan)
|
||
- [Helpdesk](https://github.com/jingrow/helpdesk)
|
||
- [Jingrow Insights](https://github.com/jingrow/insights)
|
||
- [Jingrow Drive](https://github.com/jingrow/drive)
|
||
- [Jingrow Builder](https://github.com/jingrow/builder)
|
||
|
||
<br>
|
||
<br>
|
||
<div align="center">
|
||
<a href="https://framework.jingrow.com" target="_blank">
|
||
<picture>
|
||
<source media="(prefers-color-scheme: dark)" srcset="https://framework.jingrow.com/files/Jingrow-white.png">
|
||
<img src="https://framework.jingrow.com/files/Jingrow-black.png" alt="JINGROW" height="28"/>
|
||
</picture>
|
||
</a>
|
||
</div>
|