To add Chakra UI to a pre-existing Vue project, you can follow these steps:

Install the Chakra UI Vue plugin using npm or yarn:

npm install @chakra-ui/vue

or

yarn add @chakra-ui/vue

Register the Chakra UI Vue plugin in your main.js file or any other file where you want to use it:

import Vue from 'vue'
import Chakra, { CThemeProvider } from '@chakra-ui/vue'

Vue.use(Chakra)

Vue.component(CThemeProvider.name, CThemeProvider)

Note: CThemeProvider is an optional component that sets up the theme for the Chakra UI components.

Start using the Chakra UI components in your Vue components. Here is an example of how to use the Chakra UI Button component:

<template>
  <c-button color="blue">Click me</c-button>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

Note: In the above code, 'c-' prefix is used for all the Chakra UI components.

You can also use the Chakra UI theme by importing it in your Vue components:

<template>
  <div :style="theme.styles.container">
    This is a Chakra UI container
  </div>
</template>

<script>
import { theme } from '@chakra-ui/vue'

export default {
  name: 'MyComponent',
  data() {
    return {
      theme: theme
    }
  }
}
</script>

Note: You can use the Chakra UI theme object to access the colors, fonts, and other design elements provided by Chakra UI.

That's it! You can now start using Chakra UI in your pre-existing Vue project.