Plugin Installation (Recommended)

Install the plugin to register all components globally with full TypeScript support:

// vite.config.ts
export default defineConfig({
  // Connecting variables from ui-kit
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "./node_modules/tk-ui-kit/src/styles/variables.scss" as *;`,
      },
    },
  },
})

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

import TkUiKit from 'tk-ui-kit'
import 'tk-ui-kit/styles'

const app = createApp(App)

import { VDateInput } from 'vuetify/labs/VDateInput'

app.use(TkUiKit, {
  vuetify: {
    theme: {
      defaultTheme: 'light',
      themes: {
        light: {
          colors: {
            primary: '#FF5722',
            secondary: '#00BCD4',
          },
        },
        dark: {
          colors: {
            primary: '#90CAF9',
            secondary: '#CE93D8',
          },
        },
      },
    },
    defaults: {
      VAutocomplete: {
        VMenu: {
          VList: {
            width: undefined,
          },
        },
      },
      VNumberInput: {
        decimalSeparator: '.',
      },
    },
    locale: {
      locale: 'ru',
      fallback: 'ru',
    },
    components: {
      VDateInput,
    },
  },
})

app.mount('#app')

Now you can use any component without imports:

<template>
  <div>
    <TkButton label="Click me" color="primary" @click="handleClick" />
    <TkButton @click="toggleTheme" variant="outlined" label="Сменить тему" />
  </div>
  <TkTextField
    v-model="text"
    label="Тут могла быть ваша реклама"
    clearable
    :error-messages="text"
  />
</template>

<script setup lang="ts">
// No imports needed! Components are registered globally
// TypeScript autocomplete works automatically
import { useTheme } from 'vuetify'

const theme = useTheme()

const toggleTheme = () => {
  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
}

const text = ref('')

const handleClick = () => {
  console.log('Button clicked!')
}
</script>

Swap style:

// In project main.css or App.vue 
:root {
  --v-theme-primary: #ff5722 !important;
  --v-theme-secondary: #00bcd4 !important;
}

border-radius: var(--tk-ui-kit-border-radius);