Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/frappe/frappe-ui
A set of components and utilities for rapid UI development
https://github.com/frappe/frappe-ui
Last synced: about 1 month ago
JSON representation
A set of components and utilities for rapid UI development
- Host: GitHub
- URL: https://github.com/frappe/frappe-ui
- Owner: frappe
- License: mit
- Created: 2022-01-17T14:40:27.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-12T21:58:08.000Z (8 months ago)
- Last Synced: 2024-04-14T10:09:05.754Z (8 months ago)
- Language: Vue
- Homepage: https://frappeui.com
- Size: 5.1 MB
- Stars: 203
- Watchers: 20
- Forks: 84
- Open Issues: 26
-
Metadata Files:
- Readme: readme.md
- License: license.md
Awesome Lists containing this project
- awesome-frappe - Frappe UI - A set of components and utilities for rapid UI development. (Uncategorized / Uncategorized)
README
Rapidly build modern frontends for Frappe apps
Frappe UI provides a set of components and utilities for rapid UI development.
Components are built using Vue 3 and Tailwind. Along with components, there are
directives and utilities that make UI development easier.
## Links
- [Documentation](https://frappeui.com)
- [Frappe UI Starter Boilerplate](https://github.com/netchampfaris/frappe-ui-starter)
- [Community](https://github.com/frappe/frappe-ui/discussions)
## Installation
```sh
npm install frappe-ui
# or
yarn add frappe-ui
```
Now, import the FrappeUI plugin and components in your Vue app's `main.js`:
```js
import { createApp } from 'vue'
import { FrappeUI } from 'frappe-ui'
import App from './App.vue'
import './index.css'
let app = createApp(App)
app.use(FrappeUI)
app.mount('#app')
```
In your `tailwind.config.js` file, include the frappe-ui preset:
```js
module.exports = {
presets: [
require('frappe-ui/src/utils/tailwind.config')
],
...
}
```
Now, you can import needed components and start using it:
```html
Click me
import { Button } from 'frappe-ui'
export default {
components: {
Button,
},
}
```
## Used By
Frappe UI is being used in a lot of products by
[Frappe](https://github.com/frappe).
- [Frappe Cloud](https://frappecloud.com)
- [Gameplan](https://github.com/frappe/gameplan)
- [Helpdesk](https://github.com/frappe/helpdesk)
- [Frappe Insights](https://github.com/frappe/insights)
- [Frappe Drive](https://github.com/frappe/drive)
## License
MIT