The all-in-one toolkit for modern frontends. High-quality components, app recipes and AI-ready docs.
Documentation · Getting started · Migration guide · Changelog
- 50+ components. Buttons, form controls, dialogs, popovers, tabs, sidebars, app shells and more. Built with Vue 3, Tailwind CSS and Reka UI primitives.
- Design tokens with dark mode built in. Semantic
surface,inkandoutlinecolor tokens, plus radius, typography and elevation scales. Tokens flip under[data-theme="dark"], so adark:variant is never needed. - Data composables for Frappe.
useCall,useList,useDoc,useDoctypeanduseNewDochandle fetching, caching, pagination and writes against a Frappe backend. - Rich text editor, lists and charts as separate entries:
frappe-ui/editor(TipTap),frappe-ui/listandfrappe-ui/charts(ECharts). - Vite plugins for the Frappe dev-server proxy, Lucide icon auto-imports, DocType type generation and production builds.
- TypeScript first. Every core component ships typed props, slots and emits.
- Recipes. Eight full app screens built with frappe-ui, such as mail, tickets, deals and accounting, each with a desktop and a mobile layout. See them on the home page.
- Agent skills. An agent skill and llms.txt teach Claude Code, Cursor, Codex and similar tools how to use the library. See Using with AI agents.
Requires Node >=20.19.0, Vite, Vue >=3.5 and Tailwind CSS
>=3.4 <4.
npm install frappe-uiAdd the Vite plugin in vite.config.js:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import frappeui from 'frappe-ui/vite'
export default defineConfig({
plugins: [frappeui(), vue()],
})Add the preset and content globs in tailwind.config.js:
import preset, { content } from 'frappe-ui/tailwind'
export default {
presets: [preset],
content: [...content, './index.html', './src/**/*.{vue,js,ts}'],
}Import the stylesheet once from your CSS entry:
@import 'frappe-ui/style.css';Wrap your app root in FrappeUIProvider and start using components:
<script setup>
import { FrappeUIProvider, Button, useList } from 'frappe-ui'
const todos = useList({
doctype: 'ToDo',
fields: ['name', 'description'],
filters: { status: 'Open' },
})
</script>
<template>
<FrappeUIProvider>
<ul>
<li v-for="todo in todos.data" :key="todo.name">
{{ todo.description }}
</li>
</ul>
<Button variant="solid" icon-left="lucide-plus" @click="todos.next()">
Load more
</Button>
</FrappeUIProvider>
</template>The full setup, including the starter template and TypeScript, is on the Installation page. The Frappe app guide covers the dev-server proxy.
| Import | Contents |
|---|---|
frappe-ui |
Core components, data composables, dialog and toast, directives |
frappe-ui/editor |
TipTap-based rich text editor, kits and extensions |
frappe-ui/code-editor |
CodeMirror-based code editor and CodeKit |
frappe-ui/list |
Composable List family: rows, cells, headers, groups, sorting |
frappe-ui/charts |
ECharts-based area, bar, line, donut, funnel, heatmap, sankey, scatter |
frappe-ui/icons |
Frappe's own icons, such as StepsIcon and LightningIcon |
frappe-ui/vite |
Vite plugins |
frappe-ui/tailwind |
Tailwind preset and content globs |
frappe-ui/style.css |
Base stylesheet, fonts and token variables |
Install the frappe-ui skill in your coding agent:
npx skills add https://github.com/frappe/frappe-ui/tree/main/skills/frappe-uiOr point it to ui.frappe.io/llms.txt, a list of every docs page.
yarn # install
yarn dev # component playground
yarn docs:dev # documentation site
yarn test # vitest
yarn type-check # vue-tscBefore you change a public API, read PHILOSOPHY.md for the
design rules, CONTEXT.md for the shared vocabulary and
spec/ for component contracts and decision records.
