frappe-ui 1.0.0-beta.70 → 1.0.0-beta.71

package/experimental/FloatingWindow/FloatingWindow.vue

@@ -59,7 +59,9 @@
                 tooltip="Expand"
                 @click="expandFromTray"
               >
-                <template #icon><LucideMaximize2 class="h-4 w-4" /></template>
+                <template #icon
+                  ><span class="lucide-maximize-2 h-4 w-4"
+                /></template>
               </Button>
               <Button
                 v-else
@@ -68,7 +70,7 @@
                 tooltip="Minimize"
                 @click="minimize"
               >
-                <template #icon><LucideMinus class="h-4 w-4" /></template>
+                <template #icon><span class="lucide-minus h-4 w-4" /></template>
               </Button>
             </template>
             <!-- Expand to a floating window when docked; close (dock back) once
@@ -80,9 +82,9 @@
               @click="isDocked ? float() : dock()"
             >
               <template #icon>
-                <component
-                  :is="isDocked ? LucideMaximize2 : LucideX"
+                <span
                   class="h-4 w-4"
+                  :class="isDocked ? 'lucide-maximize-2' : 'lucide-x'"
                 />
               </template>
             </Button>
@@ -129,9 +131,6 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import LucideX from '~icons/lucide/x'
-import LucideMinus from '~icons/lucide/minus'
-import LucideMaximize2 from '~icons/lucide/maximize-2'
 import { Button } from '#components/Button'
 import { usePortalTarget } from '#composables/usePortalTarget'
 import { useFloatingWindow } from './useFloatingWindow'

package/experimental/TextEditor/classIcon.ts

@@ -0,0 +1,21 @@
+import { h, type FunctionalComponent } from 'vue'
+
+/**
+ * Wrap a `lucide-<name>` class icon in the component shape this family expects.
+ *
+ * The v0 toolbars and slash-command lists store an icon COMPONENT on each
+ * command object and render it with `<component :is>`. frappe-ui draws icons
+ * from class names instead: the Tailwind plugin generates a `lucide-<name>`
+ * class for every lucide icon and paints it as a CSS mask in `currentColor`.
+ * This adapter keeps those call sites unchanged while removing the last
+ * `~icons/lucide/*` imports, which needed the `lucideIcons` Vite plugin.
+ *
+ * Every caller passes the class name as a literal, which is what Tailwind's
+ * scanner needs in order to emit the class. `experimental/TextEditor` is in
+ * the `content` globs exported from `frappe-ui/tailwind`.
+ */
+export function classIcon(name: string): FunctionalComponent {
+  // Vue merges a `class` passed at the call site onto this span, so
+  // `<component :is="icon" class="h-4 w-4" />` still works.
+  return () => h('span', { class: name })
+}

package/experimental/TextEditor/commands.js

@@ -1,36 +1,36 @@
 import { defineAsyncComponent } from 'vue'
-import H1 from '~icons/lucide/heading-1'
-import H2 from '~icons/lucide/heading-2'
-import H3 from '~icons/lucide/heading-3'
-import H4 from '~icons/lucide/heading-4'
-import H5 from '~icons/lucide/heading-5'
-import H6 from '~icons/lucide/heading-6'
-import Text from '~icons/lucide/type'
-import Underline from '~icons/lucide/underline'
-import Italic from '~icons/lucide/italic'
-import Bold from '~icons/lucide/bold'
-import Strikethrough from '~icons/lucide/strikethrough'
-import AlignLeft from '~icons/lucide/text-align-start'
-import AlignRight from '~icons/lucide/text-align-end'
-import AlignCenter from '~icons/lucide/text-align-center'
-import FontColor from '~icons/lucide/paint-bucket'
-import ListUnordered from '~icons/lucide/list'
-import ListOrdered from '~icons/lucide/list-ordered'
-import ListTask from '~icons/lucide/list-check'
-import IndentList from '~icons/lucide/list-indent-increase'
-import DedentList from '~icons/lucide/list-indent-decrease'
-import DoubleQuotes from '~icons/lucide/quote'
-import CodeView from '~icons/lucide/code'
-import Link from '~icons/lucide/link-2'
-import Image from '~icons/lucide/image-plus'
-import GalleryVertical from '~icons/lucide/gallery-vertical'
-import Video from '~icons/lucide/video'
-import Undo from '~icons/lucide/undo-2'
-import Redo from '~icons/lucide/redo-2'
-import Separator from '~icons/lucide/separator-horizontal'
-import Table from '~icons/lucide/table-properties'
-import TableOfContentsIcon from '~icons/lucide/square-menu'
-
+import { classIcon } from './classIcon'
+const H1 = classIcon('lucide-heading-1')
+const H2 = classIcon('lucide-heading-2')
+const H3 = classIcon('lucide-heading-3')
+const H4 = classIcon('lucide-heading-4')
+const H5 = classIcon('lucide-heading-5')
+const H6 = classIcon('lucide-heading-6')
+const Text = classIcon('lucide-type')
+const Underline = classIcon('lucide-underline')
+const Italic = classIcon('lucide-italic')
+const Bold = classIcon('lucide-bold')
+const Strikethrough = classIcon('lucide-strikethrough')
+const AlignLeft = classIcon('lucide-text-align-start')
+const AlignRight = classIcon('lucide-text-align-end')
+const AlignCenter = classIcon('lucide-text-align-center')
+const FontColor = classIcon('lucide-paint-bucket')
+const ListUnordered = classIcon('lucide-list')
+const ListOrdered = classIcon('lucide-list-ordered')
+const ListTask = classIcon('lucide-list-check')
+const IndentList = classIcon('lucide-list-indent-increase')
+const DedentList = classIcon('lucide-list-indent-decrease')
+const DoubleQuotes = classIcon('lucide-quote')
+const CodeView = classIcon('lucide-code')
+const Link = classIcon('lucide-link-2')
+const Image = classIcon('lucide-image-plus')
+const GalleryVertical = classIcon('lucide-gallery-vertical')
+const Video = classIcon('lucide-video')
+const Undo = classIcon('lucide-undo-2')
+const Redo = classIcon('lucide-redo-2')
+const Separator = classIcon('lucide-separator-horizontal')
+const Table = classIcon('lucide-table-properties')
+const TableOfContentsIcon = classIcon('lucide-square-menu')
 export default {
   Paragraph: {
     label: 'Paragraph',

package/experimental/TextEditor/components/ImageViewerModal.vue

@@ -178,15 +178,15 @@ import { useTouchHandler } from '#composables/useTouchHandler'
 import { useImageNavigation } from '#composables/useImageNavigation'
 import { useZoomPan } from '#composables/useZoomPan'
 
-import LucideDownload from '~icons/lucide/download'
-import LucideMaximize from '~icons/lucide/maximize'
-import LucideMinimize from '~icons/lucide/minimize'
-import LucideChevronLeft from '~icons/lucide/chevron-left'
-import LucideChevronRight from '~icons/lucide/chevron-right'
-import LucidePlus from '~icons/lucide/plus'
-import LucideMinus from '~icons/lucide/minus'
-import LucideX from '~icons/lucide/x'
-
+import { classIcon } from '../classIcon'
+const LucideDownload = classIcon('lucide-download')
+const LucideMaximize = classIcon('lucide-maximize')
+const LucideMinimize = classIcon('lucide-minimize')
+const LucideChevronLeft = classIcon('lucide-chevron-left')
+const LucideChevronRight = classIcon('lucide-chevron-right')
+const LucidePlus = classIcon('lucide-plus')
+const LucideMinus = classIcon('lucide-minus')
+const LucideX = classIcon('lucide-x')
 interface ImageInfo {
   src: string
   alt: string | null

package/experimental/TextEditor/components/LinkPopup.vue

@@ -26,13 +26,13 @@
         <Button
           @click="submitLink"
           tooltip="Submit"
-          :icon="LucideCheck"
+          icon="lucide-check"
           variant="subtle"
         />
         <Button
           @click="props.href ? (edit = false) : $emit('updateHref', '')"
           tooltip="Exit"
-          :icon="LucideX"
+          icon="lucide-x"
           variant="subtle"
         />
       </template>
@@ -40,20 +40,20 @@
         <Button
           @click="copyLink"
           tooltip="Copy"
-          :icon="LucideCopy"
+          icon="lucide-copy"
           variant="subtle"
         />
         <Button
           @click="edit = true"
           tooltip="Edit"
-          :icon="LucidePencil"
+          icon="lucide-pencil"
           variant="subtle"
         />
         <Button
           tooltip="Remove"
           variant="subtle"
           @click="$emit('updateHref', '')"
-          :icon="Link2Off"
+          icon="lucide-link-2-off"
         />
       </template>
     </div>
@@ -64,11 +64,6 @@
 import { onMounted, ref, useTemplateRef, nextTick } from 'vue'
 import Button from '#components/Button/Button.vue'
 import TextInput from '#components/TextInput/TextInput.vue'
-import LucideCopy from '~icons/lucide/copy'
-import LucideCheck from '~icons/lucide/check'
-import LucidePencil from '~icons/lucide/pencil'
-import LucideX from '~icons/lucide/x'
-import Link2Off from '~icons/lucide/link-2-off'
 import { isValidUrl } from '#utils/url-validation'
 
 const props = defineProps<{

package/experimental/TextEditor/components/MediaNodeView.vue

@@ -7,17 +7,17 @@ import { LoadingIndicator } from '#components/LoadingIndicator'
 import Tooltip from '#components/Tooltip/Tooltip.vue'
 import { localFileMap } from '../extensions/image/image-extension'
 import { ErrorMessage } from '#components/ErrorMessage'
-import LucideAlignLeft from '~icons/lucide/align-left'
-import LucideAlignCenter from '~icons/lucide/align-center'
-import LucideAlignRight from '~icons/lucide/align-right'
-import LucideWrapText from '~icons/lucide/wrap-text'
-import LucideFloatLeft from '~icons/lucide/align-horizontal-justify-start'
-import LucideFloatRight from '~icons/lucide/align-horizontal-justify-end'
-import LucideNoFloat from '~icons/lucide/align-vertical-space-around'
-import LucideCaptions from '~icons/lucide/captions'
-import LucideMoveDiagonal2 from '~icons/lucide/move-diagonal-2'
-import LucideRotateCw from '~icons/lucide/rotate-cw'
-
+import { classIcon } from '../classIcon'
+const LucideAlignLeft = classIcon('lucide-align-left')
+const LucideAlignCenter = classIcon('lucide-align-center')
+const LucideAlignRight = classIcon('lucide-align-right')
+const LucideWrapText = classIcon('lucide-wrap-text')
+const LucideFloatLeft = classIcon('lucide-align-horizontal-justify-start')
+const LucideFloatRight = classIcon('lucide-align-horizontal-justify-end')
+const LucideNoFloat = classIcon('lucide-align-vertical-space-around')
+const LucideCaptions = classIcon('lucide-captions')
+const LucideMoveDiagonal2 = classIcon('lucide-move-diagonal-2')
+const LucideRotateCw = classIcon('lucide-rotate-cw')
 const props = defineProps(nodeViewProps)
 
 const mediaRef = ref<HTMLImageElement | HTMLVideoElement | null>(null)

package/experimental/TextEditor/extensions/iframe/IframeNodeView.vue

@@ -3,11 +3,11 @@
 import { ref, onMounted, computed, nextTick } from 'vue'
 import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
 import { detectPlatform, calculateAspectRatio } from './utils'
-import LucideMoveDiagonal2 from '~icons/lucide/move-diagonal-2'
-import LucideAlignLeft from '~icons/lucide/align-left'
-import LucideAlignCenter from '~icons/lucide/align-center'
-import LucideAlignRight from '~icons/lucide/align-right'
-
+import { classIcon } from '../../classIcon'
+const LucideMoveDiagonal2 = classIcon('lucide-move-diagonal-2')
+const LucideAlignLeft = classIcon('lucide-align-left')
+const LucideAlignCenter = classIcon('lucide-align-center')
+const LucideAlignRight = classIcon('lucide-align-right')
 const props = defineProps(nodeViewProps)
 
 const iframeRef = ref<HTMLIFrameElement | null>(null)

package/experimental/TextEditor/extensions/image-group/ImageGroupNodeView.vue

@@ -49,8 +49,9 @@
 import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { NodeViewWrapper, type Editor } from '@tiptap/vue-3'
 import type { NodeViewProps } from '@tiptap/vue-3'
-import LucideX from '~icons/lucide/x'
-import LucideEdit from '~icons/lucide/edit'
+import { classIcon } from '../../classIcon'
+const LucideX = classIcon('lucide-x')
+const LucideEdit = classIcon('lucide-edit')
 import Button from '#components/Button/Button.vue'
 import Select from '#components/Select/Select.vue'
 import ImageViewerModal from '../../components/ImageViewerModal.vue'

package/experimental/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue

@@ -267,9 +267,9 @@ import Button from '#components/Button/Button.vue'
 import Select from '#components/Select/Select.vue'
 import type { Editor } from '@tiptap/vue-3'
 import type { UploadedFile } from '#utils/useFileUpload'
-import LucideX from '~icons/lucide/x'
-import LucideImagePlus from '~icons/lucide/image-plus'
-
+import { classIcon } from '../../classIcon'
+const LucideX = classIcon('lucide-x')
+const LucideImagePlus = classIcon('lucide-image-plus')
 interface UploadResult {
   success: boolean
   file?: UploadedFile

package/experimental/TextEditor/extensions/slash-commands/slash-commands-extension.ts

@@ -7,21 +7,21 @@ import {
 import SlashCommandsList from './SlashCommandsList.vue'
 import { Component as VueComponent } from 'vue'
 
-import Heading2 from '~icons/lucide/heading-2'
-import Heading3 from '~icons/lucide/heading-3'
-import List from '~icons/lucide/list'
-import ListOrdered from '~icons/lucide/list-ordered'
-import ListTask from '~icons/lucide/list-checks'
-import Code from '~icons/lucide/code'
-import Quote from '~icons/lucide/quote'
-import Image from '~icons/lucide/image'
-import Video from '~icons/lucide/video'
-import GalleryVertical from '~icons/lucide/gallery-vertical'
-import Link from '~icons/lucide/link'
-import Minus from '~icons/lucide/minus'
-import Table from '~icons/lucide/table-2'
-import TableOfContents from '~icons/lucide/table-of-contents'
-
+import { classIcon } from '../../classIcon'
+const Heading2 = classIcon('lucide-heading-2')
+const Heading3 = classIcon('lucide-heading-3')
+const List = classIcon('lucide-list')
+const ListOrdered = classIcon('lucide-list-ordered')
+const ListTask = classIcon('lucide-list-checks')
+const Code = classIcon('lucide-code')
+const Quote = classIcon('lucide-quote')
+const Image = classIcon('lucide-image')
+const Video = classIcon('lucide-video')
+const GalleryVertical = classIcon('lucide-gallery-vertical')
+const Link = classIcon('lucide-link')
+const Minus = classIcon('lucide-minus')
+const Table = classIcon('lucide-table-2')
+const TableOfContents = classIcon('lucide-table-of-contents')
 export const SlashCommandSuggestionKey = new PluginKey<any>(
   'slashCommandSuggestion',
 )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.70",
+  "version": "1.0.0-beta.71",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"
@@ -13,10 +13,26 @@
     "src/charts/index.ts"
   ],
   "imports": {
-    "#components/*": "./src/components/*",
-    "#molecules/*": "./src/molecules/*",
-    "#composables/*": "./src/composables/*",
-    "#utils/*": "./src/utils/*"
+    "#components/*": [
+      "./src/components/*",
+      "./src/components/*.ts",
+      "./src/components/*/index.ts"
+    ],
+    "#molecules/*": [
+      "./src/molecules/*",
+      "./src/molecules/*.ts",
+      "./src/molecules/*/index.ts"
+    ],
+    "#composables/*": [
+      "./src/composables/*",
+      "./src/composables/*.ts",
+      "./src/composables/*/index.ts"
+    ],
+    "#utils/*": [
+      "./src/utils/*",
+      "./src/utils/*.ts",
+      "./src/utils/*/index.ts"
+    ]
   },
   "bin": {
     "base-props-v1": "./scripts/migrate-base-props-v1.js",
@@ -27,7 +43,8 @@
     "shortcuts-v1": "./scripts/migrate-shortcuts-v1.js",
     "editor-v1": "./scripts/migrate-editor-v1.js",
     "destinations-v1": "./scripts/migrate-destinations-v1.js",
-    "data-v1": "./scripts/migrate-data-v1.js"
+    "data-v1": "./scripts/migrate-data-v1.js",
+    "packaging-v1": "./scripts/migrate-packaging-v1.js"
   },
   "scripts": {
     "test": "vitest --run",
@@ -76,9 +93,11 @@
       "types": "./src/charts/index.ts"
     },
     "./icons": {
+      "types": "./icons/index.ts",
       "import": "./icons/index.ts"
     },
     "./tailwind": {
+      "types": "./tailwind/index.d.ts",
       "import": "./tailwind/index.js",
       "default": "./tailwind/index.js"
     },
@@ -87,6 +106,7 @@
       "import": "./vite/index.js"
     },
     "./vite/lucideIconsPlugin": {
+      "types": "./vite/lucideIconsPlugin.d.ts",
       "import": "./vite/lucideIconsPlugin.js"
     },
     "./vitepress": {
@@ -95,6 +115,7 @@
       "default": "./vitepress/index.ts"
     },
     "./style.css": {
+      "style": "./src/style.css",
       "import": "./src/style.css"
     },
     "./tsconfig.base.json": {
@@ -108,6 +129,8 @@
     "icons",
     "tailwind",
     "vitepress",
+    "experimental",
+    "experimental.ts",
     "scripts/migrate-shortcuts-v1.js",
     "scripts/migrate-base-props-v1.js",
     "scripts/migrate-editor-v1.js",
@@ -116,9 +139,17 @@
     "scripts/migrate-overlays-v1.js",
     "scripts/migrate-destinations-v1.js",
     "scripts/migrate-data-v1.js",
-    "experimental",
-    "experimental.ts",
-    "tsconfig.base.json"
+    "scripts/migrate-packaging-v1.js",
+    "tsconfig.base.json",
+    "!**/*.test.ts",
+    "!**/*.test.js",
+    "!**/*.spec.ts",
+    "!**/*.cy.ts",
+    "!**/*.story.vue",
+    "!**/*.playground.vue",
+    "!**/stories",
+    "!**/test-helpers.ts",
+    "!src/mocks"
   ],
   "repository": {
     "type": "git",
@@ -138,29 +169,29 @@
     "@codemirror/lang-sql": "^6.8.0",
     "@codemirror/lang-xml": "^6.1.0",
     "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/lint": "^6.0.0",
+    "@codemirror/commands": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
+    "@lezer/highlight": "^1.0.0",
     "@floating-ui/dom": "^1.7.4",
+    "@floating-ui/vue": "^1.1.9",
     "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.16",
     "@tiptap/core": "^3.26.0",
     "@tiptap/extension-blockquote": "^3.26.0",
     "@tiptap/extension-bold": "^3.26.0",
-    "@tiptap/extension-bubble-menu": "^3.26.0",
     "@tiptap/extension-code": "^3.26.0",
     "@tiptap/extension-code-block": "^3.26.0",
     "@tiptap/extension-code-block-lowlight": "^3.26.0",
-    "@tiptap/extension-color": "^3.26.0",
     "@tiptap/extension-document": "^3.26.0",
     "@tiptap/extension-hard-break": "^3.26.0",
     "@tiptap/extension-heading": "^3.26.0",
-    "@tiptap/extension-highlight": "^3.26.0",
     "@tiptap/extension-horizontal-rule": "^3.26.0",
-    "@tiptap/extension-image": "^3.26.0",
     "@tiptap/extension-italic": "^3.26.0",
     "@tiptap/extension-link": "^3.26.0",
     "@tiptap/extension-list": "^3.26.0",
-    "@tiptap/extension-mention": "^3.26.0",
-    "@tiptap/extension-node-range": "^3.26.0",
     "@tiptap/extension-paragraph": "^3.26.0",
     "@tiptap/extension-placeholder": "^3.26.0",
     "@tiptap/extension-strike": "^3.26.0",
@@ -191,11 +222,7 @@
     "lucide-static": "^1.31.0",
     "magic-string": "^0.30.21",
     "marked": "^15.0.12",
-    "ora": "5.4.1",
-    "prettier": "^3.3.2",
-    "prosemirror-tables": "^1.8.1",
     "reka-ui": "^2.9.9",
-    "slugify": "^1.6.6",
     "socket.io-client": "^4.5.1",
     "tippy.js": "^6.3.7",
     "typescript": "^5.0.2",
@@ -205,13 +232,38 @@
     "vue-sonner": "^2.0.9"
   },
   "peerDependencies": {
+    "@shikijs/transformers": ">=3.15.0",
+    "@vue/compiler-dom": ">=3.5.0",
+    "shiki": ">=3.15.0",
+    "tailwindcss": ">=3.4.0 <4",
+    "vite": ">=5",
+    "vitepress": ">=2.0.0-alpha.15",
     "vue": ">=3.5.0",
     "vue-router": "^4.1.6"
   },
+  "peerDependenciesMeta": {
+    "@shikijs/transformers": {
+      "optional": true
+    },
+    "@vue/compiler-dom": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    },
+    "vitepress": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@cypress/code-coverage": "^3.13.10",
+    "@shikijs/transformers": "^3.15.0",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitest/coverage-v8": "^3.2.4",
+    "@vue/compiler-dom": "^3.5.0",
     "autoprefixer": "^10.4.13",
     "cross-env": "^7.0.3",
     "cypress": "^15.8.2",
@@ -221,8 +273,10 @@
     "msw": "^2.7.0",
     "nyc": "^17.1.0",
     "postcss": "^8.5.10",
+    "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.1.13",
-    "tailwindcss": "^3.2.7",
+    "shiki": "^3.15.0",
+    "tailwindcss": "^3.4.0",
     "tsx": "^4.20.6",
     "vite": "^7.3.2",
     "vite-plugin-istanbul": "^9.0.0",

package/readme.md

@@ -37,7 +37,7 @@ In 2019, I began building [Frappe Books](https://github.com/frappe/books) which
 
 ## Usage
 
-Requires **Node `>=20.19.0`**.
+Requires **Node `>=20.19.0`**, Vite, Vue 3 and Tailwind CSS v3.4.
 
 ```sh
 npm install frappe-ui
@@ -45,46 +45,49 @@ npm install frappe-ui
 yarn add frappe-ui
 ```
 
-Now, import the FrappeUI plugin and components in your Vue app's `main.js`:
+Add the frappe-ui Vite plugin in `vite.config.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')
+import vue from '@vitejs/plugin-vue'
+import frappeui from 'frappe-ui/vite'
+
+export default {
+  plugins: [frappeui(), vue()],
+}
 ```
 
-In your `tailwind.config.js` file, include the frappe-ui preset:
+Add the preset and frappe-ui's source globs in `tailwind.config.js`:
 
 ```js
-module.exports = {
-  presets: [
-    require('frappe-ui/src/utils/tailwind.config')
-  ],
-  ...
+import frappeUIPreset, { content } from 'frappe-ui/tailwind'
+
+export default {
+  presets: [frappeUIPreset],
+  content: ['./index.html', './src/**/*.{vue,js,ts}', ...content],
 }
 ```
 
-Now, you can import needed components and start using it:
+Import the stylesheet once, from your CSS entry:
+
+```css
+@import 'frappe-ui/style.css';
+```
+
+Now use the components:
+
+```vue
+<script setup>
+import { Button } from 'frappe-ui'
+</script>
 
-```html
 <template>
-  <button>Click me</button>
+  <Button variant="solid" icon-left="lucide-plus">Click me</Button>
 </template>
-<script>
-  import { Button } from 'frappe-ui'
-  export default {
-    components: {
-      Button,
-    },
-  }
-</script>
 ```
 
+The full setup, including TypeScript and the Frappe dev-server proxy, is on the
+[Getting Started](https://ui.frappe.io/docs/getting-started) page.
+
 ## Claude Code skill
 
 For AI coding agents (Claude Code, Cursor, Codex, etc.), Frappe UI ships an agent skill that teaches the agent the library's conventions — semantic Tailwind tokens, the `variant` + `theme` color axes, the `useCall` data-fetching composable, common UI recipes, and anti-patterns to avoid.