frappe/frappe-ui

Универсальный набор инструментов для современных фронтендов. Высококачественные компоненты, рецепты приложений и готовые к искусственному интеллекту документы.

Документация · Начало · Руководство по миграции · Журнал изменений

Что ты получаешь

• 50+ компонентов. Кнопки, управление формами, диалоги, поповеры, вкладки, боковые панели, Оболочки приложений и многое другое. Создано с помощью Vue 3, CSS Tailwind и интерфейс Reka Примитивные.
• Дизайн-жетоны с встроенным тёмным режимом. Семантические surface, ink и outline цветовые жетоны плюс радиус, типография и шкалы высоты. Жетоны перевернуть под [data-theme="dark"], поэтому вариант dark: никогда не нужен.
• Композитные данные для Frappe. useCall, useList, useDoc, useDoctype и useNewDoc обрабатывают выборку, кэширование, пагинацию и записывают на Фраппе-бэкэнд.
• Редактор расширенного текста, списки и диаграммы как отдельные записи: frappe-ui/editor (TipTap), frappe-ui/list и frappe-ui/charts (ECharts).
• Плагины Vite для прокси разработчика Frappe dev-server, автоимпорт иконок Lucide, Генерация и производство типов DocType.
• Сначала TypeScript. Каждый основной компонент поставляет типированные реквизиты, слоты и эмиты.
• Рецепты. Восемь полноценных экранов приложений, построенных с использованием frappe-ui, например, почта,

What you get

• 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, 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.
• 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.

Quick start

Requires Node >=20.19.0, Vite, Vue >=3.5 and Tailwind CSS >=3.4 <4.

npm install frappe-ui

Add 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()],
})