god-kit

god-kit is a Vue 3 UI kit and design token system for dashboards and admin apps (including Nuxt).
It provides typed Gk* primitives, semantic tokens, and accessibility-oriented defaults.

• Docs: https://godkit.godplans.org/
• Demo: https://godkit.godplans.org/
• Changelog: CHANGELOG.md

Why God Kit

• Built for admin workflows: forms, containment, navigation, feedback.
• Migration-friendly: optional Vuetify bridge while replacing screens gradually.
• Production-focused: TypeScript types, subpath exports, and axe-core a11y specs.
• Token-first: semantic CSS variables (--gk-*) across components.
• Configurable app shell: createGkKit for theme, display, locale, and defaults.
• Theming beyond light/dark: named themes, presets, and runtime registration.
• CLI: npx god-kit add … to scaffold kit-aligned files (registry grows over time).

Full write-up: docs/guide/why-god-kit.md (Features and benefits).

Install in 60 Seconds

npm i god-kit vue

CLI quick add

npx god-kit@latest add button

Compatibility alias:

npx add gk button

CLI registry: one key per public Gk* component (38 total). Run npx god-kit --help to list names, or see cli/manifests/components.json.
Flags: --yes, --dry-run, --cwd, --force.

Import CSS in this order:

1. god-kit/tokens.css
2. optional god-kit/bridge/vuetify.css (only during Vuetify migration)
3. god-kit/vue.css
4. your app CSS

Quick Vue Starter

import { createApp } from 'vue'
import App from './App.vue'
import 'god-kit/tokens.css'
import 'god-kit/vue.css'

createApp(App).mount('#app')

<script setup lang="ts">
import { GkButton, GkField, GkInput } from 'god-kit/vue'
import { ref } from 'vue'

const email = ref('')
</script>

<template>
  <GkField label="Email">
    <GkInput v-model="email" type="email" autocomplete="email" />
  </GkField>
  <GkButton variant="primary">Save</GkButton>
</template>

Copy-Paste Starters

1) Vue App Starter

npm create vite@latest my-admin -- --template vue-ts
cd my-admin
npm i
npm i god-kit vue

Then add:

import 'god-kit/tokens.css'
import 'god-kit/vue.css'

2) Nuxt Starter

npx nuxi@latest init my-nuxt-admin
cd my-nuxt-admin
npm i
npm i god-kit vue

In nuxt.config.ts:

export default defineNuxtConfig({
  css: ['god-kit/tokens.css', 'god-kit/vue.css'],
})

3) Theme + Snackbar Starter

import { createApp } from 'vue'
import { createGkKit } from 'god-kit/vue/config'
import { pushGkSnackbar } from 'god-kit/vue'

const app = createApp(App)
app.use(
  createGkKit({
    theme: { defaultTheme: 'system' },
    locale: { locale: 'en', fallback: 'en' },
  })
)

pushGkSnackbar({ text: 'Saved', color: 'success', timeout: 3000 })

Exports

| Path | Purpose | |------|---------| | god-kit / god-kit/vue | Vue components, composables, and gkTokens | | god-kit/vue/form | Form primitives and createForm | | god-kit/vue/layout | Layout and feedback primitives | | god-kit/vue/navigation | Tabs and pagination primitives | | god-kit/vue/config | createGkKit, theme/display/locale/defaults providers | | god-kit/vue/data | GkDataTable, GkDataTableServer, GkDataTableVirtual, table composables | | god-kit/tokens.css | Semantic CSS variables (--gk-*) | | god-kit/tailwind/preset | Optional Tailwind v3 theme.extend preset from gkTokens | | god-kit/tailwind/theme.css | Optional Tailwind v4 @theme fragment | | god-kit/vue.css | Component styles | | god-kit/bridge/vuetify.css | --v-theme-* -> --gk-* mapping |

Production Readiness

• TypeScript: typed component/composable exports and token map.
• Accessibility: *.a11y.spec.ts coverage using axe-core.
• Tree-shaking: static ESM exports and scoped CSS side-effect declaration.
• Component naming: Gk prefix to avoid collisions.

Compatibility Matrix

| Target | Status | |--------|--------| | Vue 3.5+ | Supported | | Nuxt 4 | Supported (CSS import + explicit component imports) | | Node.js 20+ | Recommended |

Migration from Vuetify

1. Import god-kit/tokens.css + god-kit/bridge/vuetify.css.
2. Replace components by vertical slice (forms -> layout -> navigation).
3. Remove bridge after full migration and keep --gk-* as source of truth.

More details: docs/guide/why-god-kit.md.

Local Development

npm run test
npm run build
npm run docs:dev
npm run playground

• Docs dev server: http://localhost:5173
• Playground dev server: http://localhost:5174

Release and Roadmap

• Changelog: CHANGELOG.md
• Docs changelog page: docs/guide/changelog.md
• Roadmap: docs/guide/roadmap.md

Contributing and Authoring

• Contributor overview: CONTRIBUTING.md
• Code of Conduct: CODE_OF_CONDUCT.md
• Security reporting: SECURITY.md
• Component authoring: docs/guide/component-authoring.md
• Build/bundling model: docs/guide/build-and-bundling.md
• Documentation process: docs/guide/contributing-docs.md