Getting Started

CLI

Add Vy UI styled components to your Vue-Lynx project from the registry.

The Vy UI CLI copies styled component source into your app, installs the shared dependencies it needs, and wires the local Vy UI plugin into your Vue-Lynx entry. Use it when you want shadcn-style ownership of component files instead of importing everything from @vyui/kit.

Two ways to use Vy UI

Install @vyui/kit — import Vy* components from the package. Upgrades arrive with npm update, and the source stays in node_modules. See Installation.
Copy source with the CLI — the components live in your repo. You own and edit the files directly; there is no @vyui/kit runtime dependency for the components you add. This page covers this path.

Both render identically. Reach for the CLI when you expect to restyle or fork components, want to read the source inline, or prefer to vendor UI code rather than track a dependency.

How it works

The CLI is a thin client over a registry — a set of JSON files (hosted at https://vyui.dev/r by default) that describe each component: its source files, the npm packages it needs, and the other registry components it depends on.

init detects your project (package manager, app entry, Tailwind config, path aliases), writes vyui.config.json, and copies the shared library (utils, theme, composables) plus the plugin wiring into the paths you choose.
add <name> fetches a component from the registry, resolves its registry dependencies (e.g. select pulls in the primitives it builds on), installs any npm packages, and writes the source into your project.
Imports are rewritten as files are written: registry-internal specifiers like @@vyui:components/* become the aliases in your vyui.config.json, so the copied code resolves against your own directory layout.
You own the result — added components are plain source files. Re-running add preserves them by default (pass --overwrite to refresh), and the shared library and transitive dependencies are never silently overwritten.

Quick start

Run init from the root of a Vue-Lynx project.

pnpm dlx @vyui/cli init

yarn dlx @vyui/cli init

bunx @vyui/cli init

npx @vyui/cli init

Then add components by registry name.

pnpm dlx @vyui/cli add accordion

yarn dlx @vyui/cli add accordion

bunx @vyui/cli add accordion

npx @vyui/cli add accordion

Each installable component page also shows its CLI command near the top of the page.

What `init` sets up

init copies the shared library into the paths from your config and wires Vy UI into the app. A typical layout:

src/
├─ components/vyui/     # components you add land here
└─ lib/vyui/
   ├─ theme/            # Tailwind Variants theme, colors + icons
   ├─ composables/      # app config, icons, styled-component helpers
   ├─ utils/            # resolveColor + tv() helpers
   ├─ plugin.ts         # the local Vy UI plugin
   └─ types.ts

Alongside the files, init also:

registers the local Vy UI plugin in your app entry (src/index.ts / src/main.ts),
adds the Vy UI Tailwind preset and ui-* state wiring to your Tailwind config,
pulls the theme tokens into your global CSS,
installs the shared runtime dependencies.

Anything it can't confirm — a non-standard entry, a missing Tailwind config — is printed as a manual step instead of being guessed. Use --dry-run to preview every file and edit first, and info afterwards to confirm what was detected.

Commands

`init`

Set up vyui.config.json, copy the shared library files, update your app entry, and configure the Vy UI Tailwind preset.

pnpm dlx @vyui/cli init

yarn dlx @vyui/cli init

bunx @vyui/cli init

npx @vyui/cli init

The command detects:

your package manager
Vue-Lynx app entry, such as src/index.ts or src/main.ts
Tailwind config
global CSS entry
tsconfig.json or jsconfig.json path aliases

If the project cannot be confirmed as Vue-Lynx, the CLI continues with generic Vue wiring and prints the manual steps it could not complete.

`add`

Copy one or more components into the paths configured by vyui.config.json.

pnpm dlx @vyui/cli add accordion tabs toast

yarn dlx @vyui/cli add accordion tabs toast

bunx @vyui/cli add accordion tabs toast

npx @vyui/cli add accordion tabs toast

The CLI resolves registry dependencies, preserves existing files by default, and prompts before installing npm dependencies.

Add every component in the current registry style:

pnpm dlx @vyui/cli add --all

yarn dlx @vyui/cli add --all

bunx @vyui/cli add --all

npx @vyui/cli add --all

`list` and `search`

List all available registry components, or filter by name.

pnpm dlx @vyui/cli list
pnpm dlx @vyui/cli search input

yarn dlx @vyui/cli list
yarn dlx @vyui/cli search input

bunx @vyui/cli list
bunx @vyui/cli search input

npx @vyui/cli list
npx @vyui/cli search input

`view`

Print registry source before installing it.

pnpm dlx @vyui/cli view accordion

yarn dlx @vyui/cli view accordion

bunx @vyui/cli view accordion

npx @vyui/cli view accordion

`info`

Inspect the detected project and current Vy UI configuration.

pnpm dlx @vyui/cli info
pnpm dlx @vyui/cli info --json

yarn dlx @vyui/cli info
yarn dlx @vyui/cli info --json

bunx @vyui/cli info
bunx @vyui/cli info --json

npx @vyui/cli info
npx @vyui/cli info --json

`styles`

List styles available from the configured registry.

pnpm dlx @vyui/cli styles

yarn dlx @vyui/cli styles

bunx @vyui/cli styles

npx @vyui/cli styles

Options

Option	Command	Description
`--registry <url>`	all	Registry base URL. Defaults to `https://vyui.dev/r`.
`--style <name>`	`init`, registry reads	Style name to use.
`--base-color <name>`	`init`	Neutral palette. Supported values are `slate`, `gray`, `zinc`, `neutral`, and `stone`.
`--all`	`add`	Add every component in the registry.
`--overwrite`	`init`, `add`	Replace files that already exist.
`--skip-install`	`init`, `add`	Write files without installing npm dependencies.
`--dry-run`	`init`, `add`	Preview files and project updates without writing.
`--json`	`info`	Emit machine-readable project information.
`-y`, `--yes`	all	Accept defaults and skip prompts.
`--cwd <dir>`	all	Run against another directory.

Configuration

init writes vyui.config.json at your project root.

{
  "$schema": "https://vyui.dev/schema.json",
  "registry": "https://vyui.dev/r",
  "style": "default",
  "baseColor": "slate",
  "aliases": {
    "components": "@/components/vyui",
    "lib": "@/lib/vyui",
    "theme": "@/lib/vyui/theme",
    "composables": "@/lib/vyui/composables",
    "utils": "@/lib/vyui/utils"
  },
  "paths": {
    "components": "src/components/vyui",
    "lib": "src/lib/vyui",
    "theme": "src/lib/vyui/theme",
    "composables": "src/lib/vyui/composables",
    "utils": "src/lib/vyui/utils"
  },
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/index.css"
  }
}

The CLI rewrites registry imports like @@vyui:components/* to the aliases in this file, then writes files into the matching paths.

Local registries

Use --registry to point at another registry base URL, a file: URL, or an absolute path.

pnpm dlx @vyui/cli init --registry ./registry
pnpm dlx @vyui/cli add accordion --registry https://example.com/r

yarn dlx @vyui/cli init --registry ./registry
yarn dlx @vyui/cli add accordion --registry https://example.com/r

bunx @vyui/cli init --registry ./registry
bunx @vyui/cli add accordion --registry https://example.com/r

npx @vyui/cli init --registry ./registry
npx @vyui/cli add accordion --registry https://example.com/r

Registry paths are resolved as <registry>/<style>/<name>.json, so the default accordion component is fetched from https://vyui.dev/r/default/accordion.json.

Icons

Bring your own icon set via Iconify.

Roadmap

Upcoming components, features, and milestones for Vy UI — where the project is headed and what ships next.