Jingrow UI
Rapidly build modern frontends for Jingrow apps
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 which had a new design. This led to the creation of small reusable components like Button, Dialog, and Card. Moving on to Jingrow Cloud 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, continually adding generic components and utilities for frontend development.
Under the Hood
- TailwindCSS: Utility first CSS Framework to build design system based UI.
- Headless UI: Unstyled and accessible UI components.
- TipTap: ProseMirror based rich-text editor with a Vue API.
- dayjs: Minimal javascript library for working with dates.
Links
Usage
npm install jingrow-ui
# or
yarn add jingrow-ui
Now, import the JingrowUI plugin and components in your Vue app's main.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:
module.exports = {
presets: [
require('jingrow-ui/src/utils/tailwind.config')
],
...
}
Now, you can import needed components and start using it:
<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.
