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')

Fonts

Vy UI does not ship or load a font for you. @vyui/kit stays font-agnostic, and the Vue-Lynx app owns font registration, Tailwind font utilities, and any component-level typography overrides.

1. Load app CSS

Import the app stylesheet from the Vue-Lynx entry file. This is where Tailwind and app-owned font rules live.

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

const app = createApp(App)
app.use(VyUI)
app.mount()

2. Define the font in CSS

Load the font in the app stylesheet when the target supports CSS font loading. Keep the family name stable, because Tailwind utilities and theme overrides reference this name.

@tailwind base;
@tailwind utilities;

@import '@vyui/kit/style.css';

@font-face {
  font-family: 'Brand Sans';
  src: url('/fonts/brand-sans-regular.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Brand Sans';
  src: url('/fonts/brand-sans-semibold.woff2') format('woff2');
  font-weight: 600;
}

For native Lynx targets, use the font registration mechanism required by the host app or platform, then keep the same font-family name in Tailwind and component classes.

3. Add Tailwind font utilities

Extend the Vue-Lynx Tailwind config. Keep the Lynx preset first and the Vy UI preset second; add fonts under theme.extend.fontFamily.

import type { Config } from 'tailwindcss'
import { createLynxPreset } from '@lynx-js/tailwind-preset'
import vyuiPreset, { VYUI_UI_STATES } from '@vyui/kit/tailwind'

const lynxPreset = createLynxPreset({
  lynxUIPlugins: {
    uiVariants: {
      prefixes: defaults => ({
        ...defaults,
        ui: [...defaults.ui, ...VYUI_UI_STATES],
      }),
    },
  },
})

const config: Config = {
  content: [
    './src/**/*.{vue,js,ts}',
    '../../../packages/kit/src/**/*.{vue,js,ts}',
    '../../../packages/core/src/**/*.{vue,js,ts}',
  ],
  presets: [
    lynxPreset,
    vyuiPreset as Config,
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Brand Sans'],
        display: ['Brand Sans'],
      },
    },
  },
}

export default config

If the app was created with vyui init, import the copied preset from ./src/lib/vyui/vyui-preset.js instead of @vyui/kit/tailwind, matching the generated tailwind.config.ts.

4. Use fonts in app markup

Use Tailwind font utilities on Lynx text nodes. Font family does not reliably cascade across every Lynx target, so put the utility on the text element or on the component slot that renders text.

<text class="font-display text-2xl font-semibold">
  Account settings
</text>

5. Override Vy UI component typography

Use app config when a font should apply to a whole Vy UI component slot. Theme keys are deep-merged into the kit defaults.

app.use(VyUI, {
  ui: {
    button: {
      slots: {
        label: 'font-sans',
      },
    },
    modal: {
      slots: {
        title: 'font-display font-semibold',
      },
    },
  },
})