Theming

@vyui/kit ships a real theme system today — every styled component has its own theme file backed by Tailwind Variants, and the whole thing is overridable at runtime.

Per-component themes

Each Vy* component reads a theme file under packages/kit/src/theme. Override slots, variants, and defaults without forking the source.

createTv + tv

Re-exported from @vyui/kit so you can compose your own variants on top, with the same DX as Nuxt UI or shadcn.

import { tv } from '@vyui/kit'

const button = tv({
  base: 'inline-flex items-center justify-center rounded-md',
  variants: {
    color: {
      primary: 'bg-primary text-inverted',
      neutral: 'bg-elevated text-default',
    },
  },
})

Runtime app config

Pass overrides to the VyUI plugin at mount time. No build step. Theme keys are deep-merged into the defaults.

import { createApp } from '@lynx-js/vue'
import { VyUI } from '@vyui/kit'
import App from './App.vue'

createApp(App)
  .use(VyUI, {
    ui: {
      button: {
        defaultVariants: { color: 'primary' },
      },
    },
  })
  .mount('#app')