[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-2146":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":9,"totalLinesOfCode":9,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":9,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":16,"starSnapshotCount":16,"syncStatus":30,"lastSyncTime":31,"discoverSource":32},2146,"frappe-ui","frappe\u002Ffrappe-ui","frappe","A set of components and utilities for rapid UI development",null,"https:\u002F\u002Fgithub.com\u002Ffrappe\u002Ffrappe-ui","TypeScript",932,315,25,88,0,3,7,30,9,11.5,false,"main",[7,25,26],"ui-components","vue","2026-06-12 02:00:37","\u003Cdiv align=\"center\" markdown=\"1\">\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F0a81cdc1-d957-47a9-b151-f5571be0d038\" width=\"80\" \u002F>\n\n# Frappe UI\n**Rapidly build modern frontends for Frappe apps**\n\n\u003Cimg alt=\"NPM Downloads\" src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Ffrappe-ui.svg?style=flat\"\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fui.frappe.io\">\n\u003Cimg width=\"1292\" alt=\"Screenshot 2024-12-12 at 5 27 58 PM\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F56800b45-2859-4dc5-92b8-e40959ce4902\" \u002F>\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\n## Frappe UI\n\nFrappe UI provides a set of components and utilities for rapid UI development. Components are built using Vue 3 and Tailwind.\nAlong with generic components like Button, Link, Dialog, etc., it also contains utilities for handling server-side data fetching, directives and utilities.\n\n\n### Motivation\nIn 2019, I began building [Frappe Books](https:\u002F\u002Fgithub.com\u002Ffrappe\u002Fbooks) 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:\u002F\u002Fgithub.com\u002Ffrappe\u002Fpress) 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:\u002F\u002Fgithub.com\u002Ffrappe\u002Fgameplan), continually adding generic components and utilities for frontend development.\n\n### Under the Hood\n\n- [TailwindCSS](https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Ftailwindcss): Utility first CSS Framework to build design system based UI.\n- [Headless UI](https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Fheadlessui): Unstyled and accessible UI components.\n- [TipTap](https:\u002F\u002Fgithub.com\u002Fueberdosis\u002Ftiptap): ProseMirror based rich-text editor with a Vue API.\n- [dayjs](https:\u002F\u002Fgithub.com\u002Fiamkun\u002Fdayjs): Minimal javascript library for working with dates.\n\n## Links\n\n- [Documentation](https:\u002F\u002Fui.frappe.io)\n- [Vite Plugins](vite\u002FREADME.md)\n- [Frappe UI Starter Boilerplate](https:\u002F\u002Fgithub.com\u002Fnetchampfaris\u002Ffrappe-ui-starter)\n- [Community](https:\u002F\u002Fgithub.com\u002Ffrappe\u002Ffrappe-ui\u002Fdiscussions)\n\n## Usage\n\n```sh\nnpm install frappe-ui\n# or\nyarn add frappe-ui\n```\n\nNow, import the FrappeUI plugin and components in your Vue app's `main.js`:\n\n```js\nimport { createApp } from 'vue'\nimport { FrappeUI } from 'frappe-ui'\nimport App from '.\u002FApp.vue'\nimport '.\u002Findex.css'\n\nlet app = createApp(App)\napp.use(FrappeUI)\napp.mount('#app')\n```\n\nIn your `tailwind.config.js` file, include the frappe-ui preset:\n\n```js\nmodule.exports = {\n  presets: [\n    require('frappe-ui\u002Fsrc\u002Futils\u002Ftailwind.config')\n  ],\n  ...\n}\n```\n\nNow, you can import needed components and start using it:\n\n```html\n\u003Ctemplate>\n  \u003Cbutton>Click me\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\u003Cscript>\n  import { Button } from 'frappe-ui'\n  export default {\n    components: {\n      Button,\n    },\n  }\n\u003C\u002Fscript>\n```\n\n## Used By\n\nFrappe UI is being used in a lot of products by\n[Frappe](https:\u002F\u002Fgithub.com\u002Ffrappe).\n\n- [Frappe Cloud](https:\u002F\u002Ffrappecloud.com)\n- [Gameplan](https:\u002F\u002Fgithub.com\u002Ffrappe\u002Fgameplan)\n- [Helpdesk](https:\u002F\u002Fgithub.com\u002Ffrappe\u002Fhelpdesk)\n- [Frappe Insights](https:\u002F\u002Fgithub.com\u002Ffrappe\u002Finsights)\n- [Frappe Drive](https:\u002F\u002Fgithub.com\u002Ffrappe\u002Fdrive)\n- [Frappe Builder](https:\u002F\u002Fgithub.com\u002Ffrappe\u002Fbuilder)\n\n\u003Cbr>\n\u003Cbr>\n\u003Cdiv align=\"center\">\n\t\u003Ca href=\"https:\u002F\u002Ffrappe.io\" target=\"_blank\">\n\t\t\u003Cpicture>\n\t\t\t\u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Ffrappe.io\u002Ffiles\u002FFrappe-white.png\">\n\t\t\t\u003Cimg src=\"https:\u002F\u002Ffrappe.io\u002Ffiles\u002FFrappe-black.png\" alt=\"Frappe Technologies\" height=\"28\"\u002F>\n\t\t\u003C\u002Fpicture>\n\t\u003C\u002Fa>\n\u003C\u002Fdiv>\n","Frappe UI 是一套用于快速UI开发的组件和工具集。该项目基于Vue 3构建，结合了Tailwind CSS来提供现代化且响应式的用户界面元素，如按钮、链接、对话框等，并包含处理服务器端数据获取的实用程序及指令。此外，它还整合了Headless UI以增强无障碍访问特性、TipTap富文本编辑器以及dayjs日期处理库。Frappe UI特别适合于需要快速搭建前端界面的应用场景，尤其是那些寻求与后端Frappe框架无缝集成的项目。通过简单的安装步骤即可在任何Vue项目中使用这些组件，从而加速开发流程并提高用户体验的一致性。",2,"2026-06-11 02:48:24","trending"]