0.1.116 • Published 3 months ago

frappe-ui v0.1.116

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months 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

4 months ago

0.1.113

4 months ago

0.1.116

3 months ago

0.1.115

3 months ago

0.1.112

4 months ago

0.1.111

4 months ago

0.1.110

4 months ago

0.1.109

4 months ago

0.1.107

5 months ago

0.1.106

5 months ago

0.1.108

5 months ago

0.1.105

5 months ago

0.1.104

5 months ago

0.1.103

6 months ago

0.1.102

6 months ago

0.1.101

6 months ago

0.1.99

6 months ago

0.1.97

6 months ago

0.1.98

6 months ago

0.1.94

6 months ago

0.1.95

6 months ago

0.1.90

7 months ago

0.1.91

7 months ago

0.1.92

6 months ago

0.1.93

6 months ago

0.1.87

7 months ago

0.1.88

7 months ago

0.1.89

7 months ago

0.1.85

7 months ago

0.1.86

7 months ago

0.1.80

7 months ago

0.1.81

7 months ago

0.1.83

7 months ago

0.1.84

7 months ago

0.1.78

7 months ago

0.1.79

7 months ago

0.1.74

7 months ago

0.1.75

7 months ago

0.1.76

7 months ago

0.1.77

7 months ago

0.1.72

8 months ago

0.1.70

9 months ago

0.1.71

8 months ago

0.1.68

9 months ago

0.1.69

9 months ago

0.1.67

10 months ago

0.1.66

10 months ago

0.1.65

11 months ago

0.1.63

12 months ago

0.1.64

11 months ago

0.1.61

1 year ago

0.1.62

1 year ago

0.1.60

1 year ago

0.1.59

1 year ago

0.1.58

1 year ago

0.1.56

1 year ago

0.1.57

1 year ago

0.1.55

1 year ago

0.1.54

1 year ago

0.1.53

1 year ago

0.1.52

1 year ago

0.1.51

1 year ago

0.1.50

1 year ago

0.1.46

1 year ago

0.1.43

1 year ago

0.1.44

1 year ago

0.1.45

1 year ago

0.1.41

1 year ago

0.1.42

1 year ago

0.1.40

1 year ago

0.1.39

1 year ago

0.1.38

1 year ago

0.1.37

1 year ago

0.1.36

1 year ago

0.1.35

1 year ago

0.1.33

1 year ago

0.1.34

1 year ago

0.1.32

1 year ago

0.1.30

1 year ago

0.1.31

1 year ago

0.1.29

1 year ago

0.1.28

1 year ago

0.1.27

1 year ago

0.1.26

1 year ago

0.1.24

1 year ago

0.1.23

1 year ago

0.1.22

1 year ago

0.1.21

1 year 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

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.0-alpha.12

2 years ago

0.1.0

2 years ago

0.1.1

2 years ago

0.1.3

2 years ago

0.1.0-alpha.10

2 years ago

0.1.0-alpha.11

2 years ago

0.1.0-alpha.9

2 years ago

0.1.0-alpha.8

2 years ago

0.1.0-alpha.5

2 years ago

0.1.0-alpha.4

2 years ago

0.1.0-alpha.7

2 years ago

0.1.0-alpha.6

2 years ago

0.1.0-alpha.3

2 years ago

0.1.0-alpha.2

2 years ago

0.0.112

2 years ago

0.0.111

2 years ago

0.1.0-alpha.1

2 years ago

0.1.0-alpha.0

2 years ago

0.0.106

2 years ago

0.0.109

2 years ago

0.0.108

2 years ago

0.0.107

2 years ago

0.0.110

2 years ago

0.0.105

2 years ago

0.0.104

2 years ago

0.0.103

2 years ago

0.0.102

2 years ago

0.0.101

2 years ago

0.0.100

2 years ago

0.0.99

2 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

3 years ago

0.0.74

3 years ago

0.0.75

3 years ago

0.0.76

3 years ago

0.0.70

3 years ago

0.0.71

3 years ago

0.0.72

3 years ago

0.0.62

3 years ago

0.0.63

3 years ago

0.0.64

3 years ago

0.0.65

3 years ago

0.0.66

3 years ago

0.0.67

3 years ago

0.0.68

3 years ago

0.0.69

3 years ago

0.0.60

3 years ago

0.0.61

3 years ago

0.0.59

3 years ago

0.0.51

3 years ago

0.0.52

3 years ago

0.0.53

3 years ago

0.0.54

3 years ago

0.0.55

3 years ago

0.0.56

3 years ago

0.0.57

3 years ago

0.0.58

3 years ago

0.0.50

3 years ago

0.0.49

3 years ago

0.0.42

3 years ago

0.0.20

3 years ago

0.0.43

3 years ago

0.0.21

3 years ago

0.0.44

3 years ago

0.0.22

3 years ago

0.0.45

3 years ago

0.0.23

3 years ago

0.0.46

3 years ago

0.0.24

3 years ago

0.0.47

3 years ago

0.0.25

3 years ago

0.0.37

3 years ago

0.0.38

3 years ago

0.0.39

3 years ago

0.0.30

3 years ago

0.0.31

3 years ago

0.0.33

3 years ago

0.0.35

3 years ago

0.0.36

3 years ago

0.0.48

3 years ago

0.0.26

3 years ago

0.0.27

3 years ago

0.0.28

3 years ago

0.0.29

3 years ago

0.0.15

3 years ago

0.0.16

3 years ago

0.0.17

3 years ago

0.0.18

3 years ago

0.0.19

3 years ago

0.0.12

3 years ago

0.0.13

3 years ago

0.0.10

3 years ago

0.0.11

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago