Set up a Lovable project with Proper UI in minutes — the package installs like any other npm dependency inside Lovable's Vite workspace.
Lovable projects are ordinary Vite + React codebases under the hood, synced to a GitHub repo — so @properui/ui installs and runs exactly the way it does in the Vite integration guide, just from inside Lovable's own editor and chat.
Install the Proper UI Skill
Lovable runs in the browser with no access to your local checkout, so there's no file for a CLI to write into a Lovable project directly. Instead, run the same agent init command every other tool uses and it prints what to paste:
npx @properui/cli@latest agent init --client lovable
This prints the public GitHub URL of the Proper UI Skill — skills/properui/SKILL.md — and instructions to paste it into Lovable's knowledge / custom instructions panel. Once it's in there, Lovable follows the same workflow the Skill gives Claude Code and Codex: check the registry before generating markup, install with npm or the CLI (if you have a shell open), and keep semantic tokens and React Aria props in whatever it writes.
If you'd rather set the project up yourself first, ask Lovable to add the dependency and wire up the providers, or do it yourself from the project's shell if you have one open:
Install @properui/ui, react-aria-components, and next-themes. Import
@properui/ui/styles/globals.css from src/index.css, add the @source
line for node_modules/@properui/ui, and wrap the app in ThemeProvider
and RouterProvider from @properui/ui/providers.
Once that's done, prompt Lovable for screens the same way you would any other feature: "build a settings page with a tabbed nav and a form" resolves to real Proper UI components instead of Lovable generating its own markup from scratch, as long as the prompt mentions using the installed library (or the Skill is pasted into its instructions, per above).
Open examples in Lovable
Every full-page example on this site has an Open in Lovable action that pre-fills a new Lovable project with a prompt describing the example and the components it needs, so Lovable installs the package and assembles the page in one pass.