Real screens, flows and sections. Searchable by your agent. Installable in one command.

The references are components with source, not pictures. Your agent installs the one it picks, with its tokens and accessibility behaviour, instead of imitating an image and guessing the markup.

They are built in this repository from one design system. Demo data and assets are placeholders, and nothing is scraped from other products.

Without one, an agent invents markup, class names and layout decisions from memory on every prompt, so screens drift from each other. Proper UI gives it a registry it can search and real component source it can install, instead of guessing an API.

The install workflow is shadcn-style: the CLI copies real .tsx source into your project rather than adding a runtime dependency, and Proper UI also publishes a shadcn-compatible registry namespace so npx shadcn add @properui/<name> works. The components themselves differ: they are built on React Aria Components rather than Radix, styled with Tailwind CSS v4 semantic tokens, and the agent surface is a dedicated CLI (info, search, add) plus a Skill and /llms.txt, not just component files.

Real components. The CLI copies actual source files from the registry into your project; nothing is generated from a text description. The Proper UI Skill tells an agent to search the registry and install with the CLI before writing any markup by hand.

Colors, spacing and other values live in one shared semantic token file (packages/ui/src/styles/theme.css) rather than being hard-coded into each component. Every screen that reuses the same installed components inherits the same tokens and the same Skill rules automatically, across every screen in your product.

Yes, but check for collisions first: Proper UI declares bg-*, text-*, border-*, ring-* and outline-* primary/secondary utilities that can silently win over (or lose to) an existing theme's utilities of the same name. The adopting guide documents which side wins for each collision type and how to migrate safely.

Exactly what each tool's setup card lists: a SKILL.md or rule file, a short pointer or marked block appended to CLAUDE.md or AGENTS.md where applicable, and a properui entry for the MCP server in .mcp.json or .cursor/mcp.json, merged into any servers already there (--no-mcp skips it). Nothing else in the project is modified, and re-running the command only updates those sections in place.

Yes. The CLI copies real .tsx source into your project, so you edit it like any other file you own. Run npx @properui/cli@latest diff to see how an installed component has drifted from the current registry version before deciding whether to update it.

Claude Code, Codex and Cursor each get a one-command setup that writes a skill or rule file directly into the project, and any assistant that speaks MCP can connect to npx -y @properui/mcp to search the registry and install components as tools. Lovable runs in the browser with no access to local files, so it uses the same instructions pasted into its Knowledge panel instead. v0 and Bolt have no agent init for them, but can read Proper UI's documentation and /llms.txt directly.

Partly. The full library is React. Vue, Angular, Svelte, Astro and plain-HTML projects get the same tokens through @properui/tokens (including a prebuilt stylesheet you can link from a CDN), about twenty components as HTML classes with small vanilla-JS behaviours in @properui/html, and matching custom elements such as <pui-button> in @properui/elements. Data tables, charts, date pickers, the marketing sections and the page examples stay React-only; the frameworks page lists exactly what each platform gets.

Yes. Proper UI is MIT licensed, including every base component, application screen and marketing section. There is no account and no paid tier.

No. The CLI only fetches registry JSON over HTTPS, from properui.dev or a local directory you point it at, and has no telemetry. It does not read or transmit your application code, and the documentation site itself is static.