0.1.116 • Published 2 months ago

frappe-ui v0.1.116

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

2 months ago

0.1.113

2 months ago

0.1.116

2 months ago

0.1.115

2 months ago

0.1.112

2 months ago

0.1.111

3 months ago

0.1.110

3 months ago

0.1.109

3 months ago

0.1.107

4 months ago

0.1.106

4 months ago

0.1.108

3 months ago

0.1.105

4 months ago

0.1.104

4 months ago

0.1.103

4 months ago

0.1.102

4 months ago

0.1.101

4 months ago

0.1.99

4 months ago

0.1.97

4 months ago

0.1.98

4 months ago

0.1.94

4 months ago

0.1.95

4 months ago

0.1.90

5 months ago

0.1.91

5 months ago

0.1.92

5 months ago

0.1.93

5 months ago

0.1.87

5 months ago

0.1.88

5 months ago

0.1.89

5 months ago

0.1.85

6 months ago

0.1.86

6 months ago

0.1.80

6 months ago

0.1.81

6 months ago

0.1.83

6 months ago

0.1.84

6 months ago

0.1.78

6 months ago

0.1.79

6 months ago

0.1.74

6 months ago

0.1.75

6 months ago

0.1.76

6 months ago

0.1.77

6 months ago

0.1.72

6 months ago

0.1.70

7 months ago

0.1.71

7 months ago

0.1.68

8 months ago

0.1.69

8 months ago

0.1.67

9 months ago

0.1.66

9 months ago

0.1.65

9 months ago

0.1.63

10 months ago

0.1.64

10 months ago

0.1.61

11 months ago

0.1.62

11 months ago

0.1.60

11 months ago

0.1.59

11 months ago

0.1.58

12 months ago

0.1.56

12 months ago

0.1.57

12 months ago

0.1.55

12 months 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

1 year ago

0.1.19

1 year ago

0.1.16

1 year ago

0.1.17

1 year ago

0.1.18

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

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

2 years ago

0.0.89

2 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

2 years ago

0.0.97

2 years ago

0.0.98

2 years ago

0.0.90

2 years ago

0.0.91

2 years ago

0.0.92

2 years ago

0.0.93

2 years ago

0.0.94

2 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