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 (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-12T21:58:08.000Z (2 months ago)
• Last Synced: 2024-04-14T10:09:05.754Z (2 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

Lists

• 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