Vibecode the UI. Ship code you would merge.
Proper UI is an open-source React component library designed for the way code gets written now — by an agent, at speed. Your assistant fetches real source from a machine-readable registry instead of recalling it, and accessibility, dark mode and right-to-left come from the token layer rather than the prompt.
npm i @properui/uiProper UI by the numbers
- Registry entries an agent can fetch
- 797
- Component groups
- 69
- Section and page variants to compose from
- 679
- Detected axe violations in 118 automated suites
- 0
Your agent does not have to guess
A model writing UI from memory invents class names, props and markup that look plausible and do not compile. Proper UI is readable by machines on purpose: a JSON registry, a markdown mirror of every page, and a CLI that writes the files. Nothing here is specific to one assistant — anything that can fetch a URL or run a shell command can use it.
- 797 registry entries, each carrying the component's real source and its dependency list, so an assistant fetches code rather than recalling it.
- Every documentation page has a plain-markdown twin indexed at /llms.txt — your agent reads the same reference you do, without parsing a rendered page.
- The add command resolves the dependency chain, rewrites imports to your configured alias and installs missing npm packages, so what it generates compiles on the first run.
- 679 named section and page variants to compose a screen from, instead of inventing layout token by token.
# 1. the index of every page, as plain markdowncurl https://properui.dev/llms.txt# 2. one component: its source, props and dependenciescurl https://properui.dev/r/buttons.json# 3. write the files into the projectnpx properui@latest add buttons date-pickerFewer ways for a model to go wrong
Accessibility, theming, dark mode and text direction are decisions a design system should only make once. Making them at the token layer is what keeps a generated screen on-system — there is simply less for the model to get wrong.
- Theming guide
A closed vocabulary, not infinite Tailwind
Left to itself a model reaches for bg-[#7f56d9] and p-[13px]. Components here only ever name semantic tokens — bg-primary, text-tertiary, bg-brand-solid — so generated markup lands on the system instead of near it.
- Introduction
Accessibility the model never had to know
Every interactive primitive is a React Aria Component, so focus management, keyboard navigation and ARIA come from Adobe's implementation. Generated code inherits them whether or not the prompt mentioned them.
- Installation
A wrong prop fails the build
The library type-checks under strict mode and ships its own types, so a hallucinated prop or a mistyped variant is a compile error your agent can read and fix — not a silent runtime shrug.
- CLI reference
The agent edits files you own
npx properui@latest add <component> writes plain .tsx into your project. There is no opaque wrapper between the generated code and the thing on screen, so a review is just reading a diff.
- Dark mode guide
Dark mode without a second pass
A .dark-mode class on the html element repoints every token. No dark: utilities for a model to forget on half the elements, and no component that only looks right in one mode.
- RTL guide
Right-to-left without a rewrite
Spacing, borders and icon direction use logical properties — ps, me, start, end. An RTL locale becomes a dir attribute rather than a second stylesheet nobody prompted for.
- Browse components
Variants to compose from, not invent
Marketing sections, dashboards, settings and auth screens ship as named variants. Ask for a pricing page and the answer is an existing file, not 300 lines of freshly imagined layout.
- Typography guide
One typographic scale
Display and body sizes are tokens too — text-display-lg, text-md — so a heading generated into a marketing hero and one generated into a dashboard sit on the same scale.
- Icons and assets
Assets in the box
Line icons, avatars, flags, illustrations and background patterns ship alongside the components, so a generated screen renders complete instead of full of broken image placeholders.
Primitives, product screens, marketing pages
The library is organised the way a product grows. Every layer is documented example by example, and every example links to the source it was rendered from.
- Browse base components
Base
19 component groups
Buttons, inputs, selects, checkboxes, badges, avatars, tooltips, sliders, file uploads and the rest of the primitives every screen is made of.
- Browse application UI
Application
32 component groups
Tables, modals, charts, navigation, date pickers, command menus and the 128 dashboard, settings and auth pages assembled from them.
- Browse marketing sections
Marketing
446 section variants
Heroes, feature grids, metrics, pricing, testimonials, FAQs, CTAs, headers and footers — plus 105 complete pages, including the sections this one is built from.
Re-brand the whole system in one file
Proper UI ships one brand ramp of eleven steps. Change those eleven values in theme.css and every component in the library follows — because components only ever name semantic tokens, never a palette class.
- Buttons, links, focus rings, badges, charts and every brand surface follow the scale.
- Light and dark mode both derive from it — there is no second palette to keep in step.
- Nothing else in the library hard-codes a colour, so no component needs a patch.
/* packages/ui/src/styles/theme.css */@theme { --color-brand-50: rgb(249 245 255); --color-brand-100: rgb(244 235 255); --color-brand-200: rgb(233 215 254); --color-brand-300: rgb(214 187 251); --color-brand-400: rgb(182 146 246); --color-brand-500: rgb(158 119 237); --color-brand-600: rgb(127 86 217); --color-brand-700: rgb(105 65 198); --color-brand-800: rgb(83 56 158); --color-brand-900: rgb(66 48 125); --color-brand-950: rgb(44 28 95);}Frequently asked questions
Assistant support, licensing, framework support and what you are actually getting.
Any of them. There is nothing tool-specific here — the surfaces are a public JSON registry at /r, a markdown index at /llms.txt and a CLI. Claude Code, Codex, Cursor, v0, Bolt and Lovable each have a walkthrough under Integrations, and anything else that can fetch a URL or run a shell command works the same way.
Still have questions?
Open an issue on GitHub. Bug reports, missing variants and documentation gaps all belong in the same place.
Your next screen is one prompt away
Install the package, or let your agent copy the source in. Either way you can read every line it wrote.
npm i @properui/ui