Existing project

Your app already runs Vue 3.5.2 and Tailwind 4.1.0 or later. Add grani to it in four steps, keeping your own setup.

npx @tailwindcss/upgrade

1. 1

   11. Install the package

   npmpnpmyarnbun

   npm i grani
2. 2

   22. Register grani

   Add createGrani() to your existing app setup. Keep your other plugins and configuration.

   main.ts

   import { createApp } from 'vue'import { createGrani } from 'grani'import App from './App.vue'import './style.css' createApp(App).use(createGrani()).mount('#app')
3. 3

   33. Import the styles

   Add grani/style.css after your existing Tailwind import. To customize the theme, add your token overrides below these imports. See Theming for details, or generate brand colors on the Theme page.

   /* your app's style.css */@import 'tailwindcss';@import 'grani/style.css';
4. 4

   44. Try a form

   UiToaster displays notifications: mount it once near the root of your app, and UiConfirm beside it when you ask questions with useConfirm(). Enter a name and select Save: a toast confirms the example is working.

   Client name

   Save

   <script setup lang="ts">import { ref } from 'vue'import { UiButton, UiField, UiInput, UiToaster, useToast } from 'grani' const name = ref('')const toast = useToast()function save() {  toast.success(`${name.value} saved`)}</script> <template>  <form class="flex flex-col gap-4 p-4" @submit.prevent="save">    <UiField label="Client name"><UiInput v-model="name" /></UiField>    <UiButton type="submit" :disabled="!name.trim()">Save</UiButton>  </form>  <UiToaster /></template>
5. +

   +Optional: auto-import components

   Automatically import grani components used in your templates with GraniResolver.

   npmpnpmyarnbun

   npm i -D unplugin-vue-components

   vite.config.ts

   import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import tailwindcss from '@tailwindcss/vite'import Components from 'unplugin-vue-components/vite'import { GraniResolver } from 'grani/resolver' export default defineConfig({  plugins: [vue(), tailwindcss(), Components({ resolvers: [GraniResolver()] })],})