Introduction ​

Frappe UI is a Vue 3 component library for building apps on the Frappe Framework. It gives you the components, design tokens and data fetching that Frappe's own products use.

vue
<script setup>
import { Button, LoadingText, useList } from 'frappe-ui'

const todos = useList({
  doctype: 'ToDo',
  fields: ['name', 'description'],
})
</script>

<template>
  <LoadingText v-if="todos.loading" />
  <ul v-else class="text-base text-ink-gray-8">
    <li v-for="todo in todos.data" :key="todo.name">
      {{ todo.description }}
    </li>
  </ul>
  <Button
    variant="solid"
    @click="todos.insert.submit({ description: 'New to-do' })"
  >
    Add to-do
  </Button>
</template>

What's included ​

  • Components: buttons, inputs, dialogs, menus, tables and more, built on Reka UI for keyboard and screen reader support.
  • Foundations: the colors, type scale, radius and shadows, as Tailwind classes that switch with dark mode.
  • Data fetching: useList, useDoc, useCall and friends, which read and write Frappe documents and keep them in sync across the page.
  • Charts and the Editor: larger pieces for dashboards and rich text.

It also works without a Frappe server. The components and styles don't need one.

Built on ​

Vue 3, Tailwind CSS, Reka UI, TipTap and Lucide icons.

Used in ​

Frappe UI started in 2019 as the components shared between Frappe Books and Frappe Cloud. It now powers most Frappe apps, including:

Next steps ​

Install frappe-ui in a new or existing app. Moving from v0? Read the migration guide.

License ​

MIT.

Installation