Quick start

Install @velkin/react or @velkin/vue, wrap with a theme provider, and render your first component.

Packages are in pre-release validation. Run the npm commands below after they appear on npm; until then, treat this page as an API preview.

Before you begin

Node.js 18+ and a package manager (npm, pnpm, or yarn)
A React, Vue, or Lit / HTML app — or scaffold one with CLI

1. Install

Install one package for your framework. @velkin/ui (and Lit) come along as dependencies — you do not install or version them separately. Full guides: Installation.

npm install @velkin/react

2. Wrap with a theme provider

Place VuThemeProvider once near the root so components receive tokens and locale. Details: Theming.

import { VuThemeProvider } from "@velkin/react/theme-provider";

export function App({ children }: { children: React.ReactNode }) {
  return <VuThemeProvider persist>{children}</VuThemeProvider>;
}

3. Use a component

import { VuButton } from "@velkin/react/button";

export function Example() {
  return <VuButton variant="solid">Save changes</VuButton>;
}

4. Optional: scaffold or MCP

Prefer a starter app or agent wiring? Use Scaffold & CLI for create-velkin-app, and MCP servers to connect Cursor to live component docs.

Common problems

Symptom	Fix
Components render unstyled	Wrap the tree in `VuThemeProvider` (see step 2)
Import errors from `@velkin/react`	Use a subpath: `@velkin/react/button`, not the package root
`onVu*` handlers fail in Next.js	Add `"use client"` on files with Velkin events or React state
Events have empty values	Read `e.detail`, not `e.target.value` — see Events

Next steps

Installation — Vite, Next.js, Vue, Lit
Theming — light/dark, seeds, first paint
Events, Slots, Appearance
Components — demos and API reference
Pro license — when using commercial components