Frappe UI

Rapidly build modern frontends for Frappe apps

Frappe UI

Frappe 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 Frappe Books which had a new design. This led to the creation of small reusable components like Button, Dialog, and Card. Moving on to Frappe Cloud in 2020, I reused and evolved these components in the Frappe 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

• Documentation
• Vite Plugins
• Frappe UI Starter Boilerplate
• Community

Usage

npm install frappe-ui
# or
yarn add frappe-ui

Now, import the FrappeUI plugin and components in your Vue app's main.js:

import { createApp } from 'vue'
import { FrappeUI } from 'frappe-ui'
import App from './App.vue'
import './index.css'

let app = createApp(App)
app.use(FrappeUI)
app.mount('#app')

In your tailwind.config.js file, include the frappe-ui preset:

module.exports = {
  presets: [
    require('frappe-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 'frappe-ui'
  export default {
    components: {
      Button,
    },
  }
</script>

Used By

Frappe UI is being used in a lot of products by Frappe.

• Frappe Cloud
• Gameplan
• Helpdesk
• Frappe Insights
• Frappe Drive
• Frappe Builder