[](https://frappegems.com/gems/apps/frappe/frappe-ui)
About Frappe Ui
# 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](https://github.com/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](https://github.com/frappe/press) 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](https://github.com/frappe/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://ui.frappe.io)
- [Vite Plugins](vite/README.md)
- [Frappe UI Starter Boilerplate](https://github.com/netchampfaris/frappe-ui-starter)
- [Community](https://github.com/frappe/frappe-ui/discussions)
## Usage
```sh
npm install frappe-ui
# or
yarn add frappe-ui
```
Now, import the FrappeUI plugin and components in your Vue app's `main.js`:
```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:
```js
module.exports = {
presets: [
require('frappe-ui/src/utils/tailwind.config')
],
...
}
```
Now, you can import needed components and start using it:
```html
```
## Used By
Frappe UI is being used in a lot of products by
[Frappe](https://github.com/frappe).
- [Frappe Cloud](https://frappecloud.com)
- [Gameplan](https://github.com/frappe/gameplan)
- [Helpdesk](https://github.com/frappe/helpdesk)
- [Frappe Insights](https://github.com/frappe/insights)
- [Frappe Drive](https://github.com/frappe/drive)
- [Frappe Builder](https://github.com/frappe/builder)
Related Developer Tools apps for Frappe & ERPNext
Frappe — Low code web framework for real world applications, in Python and Javascript
Frappe Docker — Docker environment for developing, deploying, and running Frappe applications (ERPNext and custom apps) in production and development
Builder — Craft beautiful websites effortlessly with an intuitive visual builder and publish them instantly
Bench — CLI to manage Multi-tenant deployments for Frappe apps
Press — Full service cloud hosting for the Frappe stack - powers Frappe Cloud
Gameplan — Open Source Discussions Platform for Remote Teams
Doppio — A Frappe app (CLI) to magically setup single page applications and Vue/React powered desk pages on your custom Frappe apps.
Studio — Visual App Builder for the Frappe Framework
