Introduction
Velkin is a library of accessible UI components built with Lit, with typed React and Vue wrappers.
Get started in 30 seconds
npm install @velkin/reactimport { VuThemeProvider } from "@velkin/react/theme-provider";
import { VuButton } from "@velkin/react/button";
export function App() {
return (
<VuThemeProvider persist>
<VuButton variant="solid" color="primary">
Save changes
</VuButton>
</VuThemeProvider>
);
}Prefer a scaffold? Use create-velkin-app or follow Quick start. Framework-specific install steps are on Installation.
What you get
- 56 MIT core components in
@velkin/uiwith React and Vue wrappers - 13 Pro components in
@velkin/ui-pro(data table, date picker, and more) under a commercial license - Accessible by default. Keyboard support, focus management, and ARIA live in the Lit core so every framework gets the same behavior.
- Themeable with tokens. Use
--vu-*CSS variables orVuThemeProvider. Light and dark modes are included. - Built for AI tools. An MCP server, llms.txt, and per-component markdown export let coding agents read the real API.
How it works
Lit custom elements in @velkin/ui / @velkin/ui-pro are the source of truth. React and Vue packages are thin typed wrappers over the same components. You import by feature subpath — not from a giant root barrel.
| Package | Use for |
|---|---|
@velkin/ui | MIT core Lit components (HTML / Lit) |
@velkin/react | Typed React wrappers for MIT core |
@velkin/vue | Typed Vue wrappers for MIT core |
@velkin/ui-pro | Pro Lit components (license required) |
Pro React / Vue wrappers live in @velkin/react-pro / @velkin/vue-pro. See Pro license.
Design principles
- One vocabulary — Appearance props, slots, and events mean the same thing across components and frameworks.
- Customize without fighting — Theme with tokens and
VuThemeProvider; extend with slots and CSS parts. - Real packages — Install from npm, import by subpath, keep bundles small.
Is Velkin right for you?
A good fit if you want:
- One component implementation shared by React, Vue, and Lit / HTML
- Token-driven light and dark theming without inventing per-component CSS APIs
- Subpath imports and published packages you can version in product apps
- Docs and MCP that agents can call before generating UI
Not a fit if you need:
- A copy-paste component registry instead of installable packages
- Framework-only components with no web-component core
Next steps
- Quick start — install, theme provider, first component
- Installation — Vite, Next.js, Vue, Lit wiring
- Theming — tokens, light/dark, custom seeds
- Events —
onVu*,v-model:*,e.detail - Versions · Migration — package line and porting playbooks
- Components — API reference and demos
- MCP servers — connect Cursor and other agents
FAQ
Lit components in @velkin/ui (and Pro) are the source of truth. React and Vue packages are thin typed wrappers generated and built from that core — props, events, and slots stay aligned without forking behavior per framework.
When you bump packages, you get core fixes and wrapper typing together. Theme tokens and public APIs remain the customization layer, not one-off CSS fights per framework.
No. Every MIT and Pro component ships as a Lit custom element. Use @velkin/ui / @velkin/ui-pro directly in any HTML or framework that supports web components, or pick @velkin/react / @velkin/vue for typed JSX/SFC wrappers.
MIT covers the core controls (button, input, dialog, …). Pro adds denser product surfaces — data table, date picker, flow, kanban, and related tooling — under a commercial license. Imports stay separate: @velkin/ui-pro / @velkin/react-pro.
Prefer the Velkin MCP (get_velkin_component_docs, validate_component_usage, velkin_lint) plus /llms.txt, /llms-full.txt, and /AGENTS.md over scraping HTML. Guides under AI & agents cover MCP, skills, and the consumer contract.