# Install grani in an 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.

## On Tailwind 3 or an older Vue?

grani needs Vue 3.5.2 or later and Tailwind 4.1.0 or later. Move a Tailwind 3 app to 4 first with Tailwind's own upgrade tool, in a branch, and check the screens it changed. An older Vue 3 is updated with `npm i vue@latest`; Vue 2 is not supported.

```bash
npx @tailwindcss/upgrade
```

With another package manager: `pnpm dlx @tailwindcss/upgrade`, `yarn dlx @tailwindcss/upgrade`, `bunx @tailwindcss/upgrade`.

## 1. Install the package

```bash
npm i grani
```

With another package manager: `pnpm add grani`, `yarn add grani`, `bun add grani`.

## 2. Register grani

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

```ts
// 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. 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](/guide/theming) for details, or generate brand colors on the [Theme](/theme) page.

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

## 4. 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.

```vue
<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>
```

## Optional: auto-import components

Automatically import grani components used in your templates with `GraniResolver`.

```bash
npm i -D unplugin-vue-components
```

With another package manager: `pnpm add -D unplugin-vue-components`, `yarn add -D unplugin-vue-components`, `bun add -d unplugin-vue-components`.

```ts
// 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()] })],
})
```