V Vy UI
Pre-alphaUnder constructionDocs coming soon

Headless components for Vue-Lynx — coming soon

Vy UI brings Radix-style primitives and an opinionated styled kit to ByteDance’s native cross-platform framework. The packages exist, the demos run, and most things are still broken. This page is a preview of what’s being built.
Star on GitHubSee what’s shipping

Heads up: most things below are aspirational. Vue-Lynx itself is pre-alpha and Vy UI is too. APIs will change. Things will break. Don’t ship this to production yet.

Follow on GitHub
Packages

Two layers, one ecosystem

Pick the level of opinion you want. Drop down to primitives whenever you need to.
Headless
@vyui/core
Behavioral primitives — accessibility, state, focus, keyboard, gestures. You bring the styles. Inspired by Reka UI and Radix.
  • 47 primitives — Dialog, Sheet, Popover, Combobox, Slider, Swiper, Sortable, …
  • Native-first for Lynx’s <view> / <text> rendering model
  • Zero styling opinions — compose your own design system on top
View on npm
Styled
@vyui/kit
Opinionated styled components built on top of @vyui/core. Drop-in Vy* components with a Tailwind Variants theme.
  • 44 styled components — VyButton, VyDrawer, VyModal, VyToast, VyIsland, …
  • Themeable via Tailwind Variants (createTv) and an app config object
  • Re-exports keyboard-aware + icon primitives from core for convenience
Use @vyui/core if…
You already have a design system, a Tailwind theme, or strong visual opinions. You want raw behavior and a11y — no painted defaults.
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.
Mix them freely
Kit re-exports everything you need from core. Start with kit, drop down to core primitives anywhere you need bespoke styling.
Install

Get started in two minutes

Vy UI runs inside any Vue-Lynx app. Pick the path that matches how much you want bundled.
Local workspace install is the dependable path
The npm-published @vyui/core@0.0.2 is known to crash on first touch due to an upstream vue-lynx MT-loader regression. Until that fix lands, clone the repo and work against the workspace packages.

Install the primitives layer and write your own styles. 

pnpm add @vyui/core

Use a primitive

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

Tailwind Variants, not opinions

@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.
  • Runtime app config
    Pass overrides to the VyUI plugin at mount time. No build step. Theme keys are deep-merged into the defaults.
Icons

Bring your own, via Iconify

@vyui/core ships an <Icon> primitive that accepts any Iconify name. There is no bundled icon set — pick a collection at icones.js.org, install the @iconify-json package, and use it.
pnpm add @iconify-json/lucide
<script setup>
import { Icon } from '@vyui/core'
</script>

<template>
  <Icon name="i-lucide-sparkles" :size="20" color="#6366f1" />
</template>

Names work in either form — i-lucide-folder or lucide:folder. Browse 200,000+ icons across collections at icones.js.org.

Lynx's native <svg> rasterizes the XML and can't inherit currentColor from a surrounding <text>, so the color prop is required to tint an icon.

Targets

One codebase, three targets

Vue-Lynx is ByteDance’s open-source native cross-platform framework — the same one powering parts of TikTok.
  • iOS
    Native UIView rendering via Lynx Explorer or your own LynxView host.
  • Android
    Native View rendering; ship inside your Android app via the Lynx runtime.
  • Web
    Lynx Web target compiles to a browser bundle for previews and progressive rollouts.
Roadmap

What’s next

Vy UI is pre-alpha. The list below is aspirational — none of it ships yet. It shows where the project is headed.
  • @vyui/core primitivesIn progress

    Published as ^0.0.2 with a known MT-loader regression awaiting an upstream fix.

  • @vyui/kit on npmPlanned

    Styled-component package, currently workspace-only.

  • @vyui/cliPlanned

    shadcn-style CLI for adding individual styled components — npx @vyui add button.

  • Hosted registryPlanned

    vyui.dev/registry/* JSON manifests with source, dependencies, file destinations.

  • Component documentationPlanned

    Per-component reference, props, examples, demos — generated from real source so it stays in sync.

  • Starter templatesPlanned
  • Cross-target testing (iOS / Android / Web)Planned

Component docs are on the way

A per-component reference with props, slots, events, and live demos is the next thing being built. Until then, the source is the documentation — clone the repo or browse on GitHub.
Browse on GitHubRead CONTRIBUTING.md