Description
CodeRocket UI helps developers build a component library that looks like their own brand instead of starting from a blank canvas. A short description of the product turns into a proposed design direction (brand color, corner radius, density), which the user reviews before it is applied across the system.
Read More
The core workflow runs in three stages. First, describe the product and review an AI-generated design proposal covering color, typography, spacing and density. Second, refine the system visually or with a prompt, editing the whole library at once or restyling a single component on its own. Third, bring the result into a real codebase: download the source directly or install it through a private registry.
The library itself covers 48 components and 26 interface blocks (buttons, forms, dialogs, comboboxes, calendars, data tables and more), built on Base UI with working behavior that can be tried before export. Components ship as editable React or Vue plus TypeScript source, and the exported code carries no runtime dependency on CodeRocket UI: it can be edited, hosted anywhere and used independently under an MIT license. The open-source component library backing the product is published on GitHub.
CodeRocket UI also connects to coding agents. A CLI, a private registry and an MCP connection let Codex, Claude Code and Cursor read a project's saved design tokens and existing components, so an agent can find and reuse a Button or Card instead of generating a new one from scratch, with setup instructions covered in the documentation.
Pricing has two tiers. The free plan includes the full editor, the component catalogue and editable source export, plus five AI-assisted generations total as a one-time trial allowance per account. Pro adds 100 AI generations per UTC calendar month for as long as paid access is active; it is arranged personally; price and access period are agreed before payment and the account is activated manually, with no automatic billing. AI requests on both tiers share a service limit, and the editor and export still work if AI generation is temporarily unavailable.
React and Vue are supported today with the same design tokens and AI workflow; Svelte and SolidJS are listed as planned frameworks. CodeRocket UI is aimed at developers and small teams who want a consistent design system across a codebase before they start building screens, rather than a website builder or a general app generator.
- CategoryAI App Builders
- Pricing ModelOpen Source
- DeploymentSelf-hostable
- PlatformsWeb
CodeRocket's Core Features
AI-generated design proposal (color, typography, spacing, density) from a short product description
48 React and Vue components plus 26 interface blocks built on Base UI
Visual editor for restyling the whole system or a single component
AI composition of new components (forms, cards, panels) from existing primitives
Editable TypeScript source export under MIT license, no runtime dependency
CLI and private registry for installing the library into a real project
MCP connection so coding agents (Codex, Claude Code, Cursor) can read saved design tokens and components
Live component explorer to try behavior before exporting
How to use CodeRocket?
Describe your product: give a short direction and review the AI's proposed colors, typography and spacing
Refine the system: edit visually or by prompt, system-wide or on a single component
Explore the catalogue: try the 48 components and 26 blocks and their real behavior before exporting
Compose what's missing: describe a new form, card or panel and let AI assemble it from existing components
Ship it: download the editable source or install through the private registry into your project
Connect your coding agent: add the MCP connection or registry so Codex, Claude Code or Cursor can reuse your components
CodeRocket's Use Cases
- New design system
- Coding-agent handoff
- Component library export
- Custom component assembly
