Proper UI

v0 integration

Hand a Proper UI component to v0 and keep iterating on it there — the full source, styles object, and dependencies travel with it.

v0 works from source, not from a package import — so integrating Proper UI with it means handing over the component's actual code rather than pointing at @properui/ui as a dependency.

Start using Proper UI in v0

Every component page has an Open in v0 action next to the code block. It sends v0 a prompt containing:

  • The component's full .tsx source, including its styles = sortCx({...}) object.
  • Any sibling files it imports from the same folder (types, sub-components).
  • A note listing its npm dependencies (react-aria-components, @properui/icons, …), so v0 knows what to install in the environment it spins up.

v0 inlines all of that into a new chat, so what you see rendered there is the same component — the same classes, the same props — just detached from the package and editable in place.

If you'd rather do it by hand: copy the component's source from its docs page, paste it into a v0 prompt, and describe what you want built around it. v0 treats pasted source the same way regardless of how it arrived.

Open examples in v0

Full-page examples — a settings screen, a pricing section — work the same way, just with more files in the payload: every component the page composes travels along with it, so v0 has everything it needs to render the page correctly on the first try instead of guessing at missing imports.

FAQs