## What you get
- **50+ components.** Buttons, form controls, dialogs, popovers, tabs, sidebars,
app shells and more. Built with [Vue 3](https://vuejs.org),
[Tailwind CSS](https://tailwindcss.com) and [Reka UI](https://reka-ui.com)
primitives.
- **Design tokens with dark mode built in.** Semantic `surface`, `ink` and
`outline` color tokens, plus radius, typography and elevation scales. Tokens
flip under `[data-theme="dark"]`, so a `dark:` variant is never needed.
- **Data composables for Frappe.** `useCall`, `useList`, `useDoc`, `useDoctype`
and `useNewDoc` handle fetching, caching, pagination and writes against a
Frappe backend.
- **Rich text editor, lists and charts** as separate entries: `frappe-ui/editor`
(TipTap), `frappe-ui/list` and `frappe-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](https://ui.frappe.io).
- **Agent skills.** An [agent skill](./skills/frappe-ui/) and
[llms.txt](https://ui.frappe.io/llms.txt) teach Claude Code, Cursor, Codex
and similar tools how to use the library. See
[Using with AI agents](#using-with-ai-agents).
## Quick start
Requires **Node `>=20.19.0`**, **Vite**, **Vue `>=3.5`** and **Tailwind CSS
`>=3.4 <4`**.
```sh
npm install frappe-ui
```
Add the Vite plugin in `vite.config.js`:
```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`:
```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:
```css
@import 'frappe-ui/style.css';
```
Wrap your app root in `FrappeUIProvider` and start using components:
```vue
