0.1.116 • Published 1 year ago

frappe-ui v0.1.116

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Frappe UI

Rapidly build modern frontends for Frappe apps

Frappe UI

Frappe UI provides a set of components and utilities for rapid UI development. Components are built using Vue 3 and Tailwind. Along with generic components like Button, Link, Dialog, etc., it also contains utilities for handling server-side data fetching, directives and utilities.

Motivation

In 2019, I began building Frappe Books which had a new design. This led to the creation of small reusable components like Button, Dialog, and Card. Moving on to Frappe Cloud 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, continually adding generic components and utilities for frontend development.

Under the Hood

  • TailwindCSS: Utility first CSS Framework to build design system based UI.
  • Headless UI: Unstyled and accessible UI components.
  • TipTap: ProseMirror based rich-text editor with a Vue API.
  • dayjs: Minimal javascript library for working with dates.

Links

Usage

npm install frappe-ui
# or
yarn add frappe-ui

Now, import the FrappeUI plugin and components in your Vue app's main.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:

module.exports = {
  presets: [
    require('frappe-ui/src/utils/tailwind.config')
  ],
  ...
}

Now, you can import needed components and start using it:

<template>
  <button>Click me</button>
</template>
<script>
  import { Button } from 'frappe-ui'
  export default {
    components: {
      Button,
    },
  }
</script>

Used By

Frappe UI is being used in a lot of products by Frappe.

@headlessui/vue@popperjs/core@tailwindcss/forms@tailwindcss/typography@tiptap/extension-code-block-lowlight@tiptap/extension-color@tiptap/extension-highlight@tiptap/extension-image@tiptap/extension-link@tiptap/extension-mention@tiptap/extension-placeholder@tiptap/extension-table@tiptap/extension-table-cell@tiptap/extension-table-header@tiptap/extension-table-row@tiptap/extension-text-align@tiptap/extension-text-style@tiptap/extension-typography@tiptap/pm@tiptap/starter-kit@tiptap/suggestion@tiptap/vue-3@vueuse/coredayjsfeather-iconsidb-keyvallowlightlucide-staticoraprettierradix-vuereka-uishowdownsocket.io-clienttippy.jstypescriptunplugin-iconsunplugin-vue-components
@infinitebrahmanuniverse/nolb-frap@everything-registry/sub-chunk-1701
0.1.114

1 year ago

0.1.113

1 year ago

0.1.116

1 year ago

0.1.115

1 year ago

0.1.112

1 year ago

0.1.111

1 year ago

0.1.110

1 year ago

0.1.109

1 year ago

0.1.107

1 year ago

0.1.106

1 year ago

0.1.108

1 year ago

0.1.105

1 year ago

0.1.104

1 year ago

0.1.103

1 year ago

0.1.102

1 year ago

0.1.101

1 year ago

0.1.99

1 year ago

0.1.97

1 year ago

0.1.98

1 year ago

0.1.94

1 year ago

0.1.95

1 year ago

0.1.90

1 year ago

0.1.91

1 year ago

0.1.92

1 year ago

0.1.93

1 year ago

0.1.87

1 year ago

0.1.88

1 year ago

0.1.89

1 year ago

0.1.85

1 year ago

0.1.86

1 year ago

0.1.80

1 year ago

0.1.81

1 year ago

0.1.83

1 year ago

0.1.84

1 year ago

0.1.78

1 year ago

0.1.79

1 year ago

0.1.74

1 year ago

0.1.75

1 year ago

0.1.76

1 year ago

0.1.77

1 year ago

0.1.72

1 year ago

0.1.70

2 years ago

0.1.71

1 year ago

0.1.68

2 years ago

0.1.69

2 years ago

0.1.67

2 years ago

0.1.66

2 years ago

0.1.65

2 years ago

0.1.63

2 years ago

0.1.64

2 years ago

0.1.61

2 years ago

0.1.62

2 years ago

0.1.60

2 years ago

0.1.59

2 years ago

0.1.58

2 years ago

0.1.56

2 years ago

0.1.57

2 years ago

0.1.55

2 years ago

0.1.54

2 years ago

0.1.53

2 years ago

0.1.52

2 years ago

0.1.51

2 years ago

0.1.50

2 years ago

0.1.46

2 years ago

0.1.43

2 years ago

0.1.44

2 years ago

0.1.45

2 years ago

0.1.41

2 years ago

0.1.42

2 years ago

0.1.40

2 years ago

0.1.39

2 years ago

0.1.38

2 years ago

0.1.37

2 years ago

0.1.36

2 years ago

0.1.35

2 years ago

0.1.33

2 years ago

0.1.34

2 years ago

0.1.32

2 years ago

0.1.30

2 years ago

0.1.31

2 years ago

0.1.29

2 years ago

0.1.28

2 years ago

0.1.27

2 years ago

0.1.26

2 years ago

0.1.24

2 years ago

0.1.23

2 years ago

0.1.22

2 years ago

0.1.21

2 years ago

0.1.20

2 years ago

0.1.19

2 years ago

0.1.16

2 years ago

0.1.17

2 years ago

0.1.18

2 years ago

0.1.10

2 years ago

0.1.11

2 years ago

0.1.12

2 years ago

0.1.13

2 years ago

0.1.14

2 years ago

0.1.15

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.9

2 years ago

0.1.4

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.1.0-alpha.12

3 years ago

0.1.0

3 years ago

0.1.1

3 years ago

0.1.3

3 years ago

0.1.0-alpha.10

3 years ago

0.1.0-alpha.11

3 years ago

0.1.0-alpha.9

3 years ago

0.1.0-alpha.8

3 years ago

0.1.0-alpha.5

3 years ago

0.1.0-alpha.4

3 years ago

0.1.0-alpha.7

3 years ago

0.1.0-alpha.6

3 years ago

0.1.0-alpha.3

3 years ago

0.1.0-alpha.2

3 years ago

0.0.112

3 years ago

0.0.111

3 years ago

0.1.0-alpha.1

3 years ago

0.1.0-alpha.0

3 years ago

0.0.106

3 years ago

0.0.109

3 years ago

0.0.108

3 years ago

0.0.107

3 years ago

0.0.110

3 years ago

0.0.105

3 years ago

0.0.104

3 years ago

0.0.103

3 years ago

0.0.102

3 years ago

0.0.101

3 years ago

0.0.100

3 years ago

0.0.99

3 years ago

0.0.84

3 years ago

0.0.85

3 years ago

0.0.86

3 years ago

0.0.87

3 years ago

0.0.88

3 years ago

0.0.89

3 years ago

0.0.80

3 years ago

0.0.81

3 years ago

0.0.82

3 years ago

0.0.83

3 years ago

0.0.77

3 years ago

0.0.78

3 years ago

0.0.79

3 years ago

0.0.95

3 years ago

0.0.97

3 years ago

0.0.98

3 years ago

0.0.90

3 years ago

0.0.91

3 years ago

0.0.92

3 years ago

0.0.93

3 years ago

0.0.94

3 years ago

0.0.73

4 years ago

0.0.74

4 years ago

0.0.75

4 years ago

0.0.76

3 years ago

0.0.70

4 years ago

0.0.71

4 years ago

0.0.72

4 years ago

0.0.62

4 years ago

0.0.63

4 years ago

0.0.64

4 years ago

0.0.65

4 years ago

0.0.66

4 years ago

0.0.67

4 years ago

0.0.68

4 years ago

0.0.69

4 years ago

0.0.60

4 years ago

0.0.61

4 years ago

0.0.59

4 years ago

0.0.51

4 years ago

0.0.52

4 years ago

0.0.53

4 years ago

0.0.54

4 years ago

0.0.55

4 years ago

0.0.56

4 years ago

0.0.57

4 years ago

0.0.58

4 years ago

0.0.50

4 years ago

0.0.49

4 years ago

0.0.42

4 years ago

0.0.20

4 years ago

0.0.43

4 years ago

0.0.21

4 years ago

0.0.44

4 years ago

0.0.22

4 years ago

0.0.45

4 years ago

0.0.23

4 years ago

0.0.46

4 years ago

0.0.24

4 years ago

0.0.47

4 years ago

0.0.25

4 years ago

0.0.37

4 years ago

0.0.38

4 years ago

0.0.39

4 years ago

0.0.30

4 years ago

0.0.31

4 years ago

0.0.33

4 years ago

0.0.35

4 years ago

0.0.36

4 years ago

0.0.48

4 years ago

0.0.26

4 years ago

0.0.27

4 years ago

0.0.28

4 years ago

0.0.29

4 years ago

0.0.15

4 years ago

0.0.16

4 years ago

0.0.17

4 years ago

0.0.18

4 years ago

0.0.19

4 years ago

0.0.12

4 years ago

0.0.13

4 years ago

0.0.10

4 years ago

0.0.11

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago