Installation

Setup

Add to a Vue-Lynx project

Install the @vyui/core package

pnpm add @vyui/core

yarn add @vyui/core

bun add @vyui/core

deno add npm:@vyui/core

npm install @vyui/core

Use a primitive

Primitives are unstyled. Compose them with your own classes, tokens, or design system.

<script setup>
import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from '@vyui/core'
import { ref } from 'vue'

const value = ref(50)
</script>

<template>
  <SliderRoot v-model="value" :max="100">
    <SliderTrack>
      <SliderRange />
    </SliderTrack>
    <SliderThumb />
  </SliderRoot>
</template>

Add styled components with @vyui/kit

Install both packages

pnpm add @vyui/core @vyui/kit

yarn add @vyui/core @vyui/kit

bun add @vyui/core @vyui/kit

deno add npm:@vyui/core npm:@vyui/kit

npm install @vyui/core @vyui/kit

@vyui/kit re-exports everything from @vyui/core, so you can mix Vy* styled components with raw primitives in the same file.

Register the kit plugin

Add VyUI to your app entry once. This installs the theme, registers components, and wires up portals for VyModal / VyToast.

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

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

Use a Vy* component

<script setup>
import { VyButton, VySlider } from '@vyui/kit'
import { ref } from 'vue'

const value = ref(50)
</script>

<template>
  <VySlider v-model="value" :max="100" />
  <VyButton variant="solid" color="primary">Save</VyButton>
</template>

Options

Kit ships sensible defaults — you only need to reach for these when you want to override theme tokens, swap a primary color, or change a component's default variant.

theme

Pass component overrides under ui.<component> to deep-merge them into the default Tailwind Variants theme. Every Vy* component reads from this — no rebuild required. Like Nuxt UI, everything lives under the single ui namespace.

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

colors

Override the semantic color slots (primary, secondary, success, info, warning, error, neutral) by redefining the --ui-color-{semantic}-{shade} CSS variables in your own stylesheet.

:root {
  --ui-color-primary-500: #6366f1;
  --ui-color-primary-600: #4f46e5;
}

Adding a custom color

The configurable color set (primary, secondary, success, info, warning, error — neutral is always appended) is extensible. To add a color (e.g. tertiary) so it works at runtime and type-checks on every component's color prop:

import { VyUI, COLORS } from '@vyui/kit'

app.use(VyUI, { ui: { colors: [...COLORS, 'tertiary'] } })

import { createVyuiPreset, COLORS } from '@vyui/kit/tailwind'

export default {
  presets: [lynxPreset, createVyuiPreset({ colors: [...COLORS, 'tertiary'] })],
}

declare module '@vyui/kit' {
  interface VyuiColorRegistry { tertiary: true }
}

Then add the --ui-color-tertiary-{50..950} CSS-var block (the .d.ts + CSS can be generated with node node_modules/@vyui/kit/scripts/gen-colors.mjs --colors tertiary=indigo). See the @vyui/kit README for the full flow.