@vyui/kit

@vyui/kit is the styled layer. 45 drop-in Vy* components built on top of @vyui/core, with a Tailwind Variants theme you can override at any point.

What you get

• 48 styled components ship today, including VyButton, VyDrawer, VyModal, VyToast, VyIsland, VyTabs, and VySlider.
• The Tailwind Variants theme keeps per-component files under packages/kit/src/theme, so you can override slots, variants, and defaults without forking.
• createTv and tv() are re-exported from @vyui/kit, so you can compose your own variants with the same DX as Nuxt UI or shadcn.
• Runtime app config takes overrides passed to the VyUI plugin at mount time, with no build step, and theme keys deep-merge into the defaults.

When to use it

Use @vyui/kit if you want to ship fast with sensible defaults. Kit gives you styled Vy* components on top of core, ready to drop into a Lynx app.

You still get the full core layer

@vyui/core is a dependency of @vyui/kit, so installing kit brings core with it, so you don't choose one or the other. Use the styled Vy* components for the common case, and drop down to the headless primitives whenever you need full control over markup:

<script setup>
// Styled, opinionated:
import { VyModal } from '@vyui/kit'
// Headless, from the same install:
import { DialogContent, DialogRoot, DialogTrigger } from '@vyui/core'
</script>

A few unstyled primitives that have nothing to theme (AspectRatio, Icon, and the keyboard-aware helpers) are re-exported from kit under Vy* aliases for convenience. Everything else lives in @vyui/core, and the Components reference marks which layer each component belongs to.

Example

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

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