On this page
What is Frappe UI?
Frappe UI is a set of components and utilities to build frontend apps based on the Frappe Framework.
Along with generic components which are required to build a frontend like Button, Link, Dialog, etc., frappe-ui also contains utilities for handling server-side data fetching, directives and utilities.
Usage example
vue
<script setup>
import { Button, LoadingText, createResource } from 'frappe-ui'
let todos = createResource({
type: 'list',
doctype: 'ToDo',
fields: ['name', 'description'],
cache: 'ToDos',
auto: true,
})
</script>
<template>
<LoadingText v-if="todos.loading" />
<ul v-else>
<li v-for="todo in todos.data" :key="todo.name">
{{ todo.description }}
</li>
</ul>
<Button>Add ToDo</Button>
</template>
Dependencies
Frappe UI is built on top of the following amazing projects –
See full list of dependencies: package.json
Motivation
In 2019, I started building Frappe Books based on an experimental design system by Timeless. As the product got built, a set of small reusable components (like Button, Dialog, Card, etc.) were also built.
After the launch of Frappe Books (and me dropping the project) I moved on to building the UI for Frappe Cloud in 2020. It also needed these components, so I copy-pasted them from Frappe Books to Frappe Cloud. These components evolved over time in Frappe Cloud. After working on the Frappe Cloud UI for about a year and a half, I moved on to my next project.
At the start of 2022, I started working on Gameplan. I didn't want to copy-paste yet again, so I extracted these components in a separate package called frappe-ui. This package is being developed in parallel along with the Gameplan project. I keep adding generic components and utilities useful for frontend development.
Products
Frappe UI is now being used in a lot of products by Frappe.
License
Frappe UI is MIT licensed