Getting Started

Introduction

What Vy UI is, how the two-layer architecture works, and why Vue-Lynx needs its own component library.

Vy UI is a two-layer component system for Vue-Lynx — the Vue bindings for Lynx, ByteDance's open-source native cross-platform framework. It brings Radix-style headless primitives — and an optional opinionated styled kit — to a runtime that doesn't render HTML.

@vyui/core

47 headless primitives — state, focus, keyboard, gestures. You bring the styles.

@vyui/kit

48 styled components on top of core. Tailwind Variants theme, drop-in Vy* components.

GitHub

Source, issues, and discussions live on GitHub.

Changelog

Release notes pulled directly from GitHub releases.

Status

Vy UI is pre-alpha. Vue-Lynx itself is pre-alpha. Expect breaking changes to component names, props, and slots. Things will break. Don't ship this to production yet.

What's inside

  • Native-first — primitives target Lynx's <view> / <text> rendering model, not the DOM.
  • Zero styling opinions@vyui/core ships behavior, you bring tokens. @vyui/kit adds a themeable layer when you want it.
  • Tailwind VariantscreateTv() and tv() are re-exported from kit so you can extend the theme like you would with Nuxt UI or shadcn.

What each component page includes

  1. An interactive browser preview for quickly exploring the component.
  2. Copyable Vue-Lynx source using the actual package API.
  3. Complete props, emits, slots, variants, and ui styling hooks.
  4. Accessibility and native-platform notes.

The reference focuses on the public @vyui/kit surface. When a kit export directly exposes a @vyui/core primitive, the guide calls that out.