React and Vue components. Your design system. Source you own.
Open Studio · React docs · Vue docs · Coding agents
**Build a component library that looks like your product, with design rules your coding agents can use.** CodeRocket UI combines React and Vue components, interface blocks, a typed design-system model, and CLI/MCP integrations. Start from accessible primitives, customize shared tokens, and keep editable source in your application. The open-source core is **MIT licensed**, written in **TypeScript**, and works **with or without Tailwind**. ## Two frameworks, one design system React uses Base UI. Vue uses native Vue single-file components and Reka UI. Both catalogues share tokens, layouts and core behavior, including date and range selection, forms, overlays and application blocks. Vue APIs use `v-model`, events and slots; framework-specific APIs are not interchangeable. Use the components directly from this source workspace, or use the [hosted Studio](https://ui.coderocket.app/studio) to customize a library visually, review AI proposals and export its source. An account or AI provider is **not required** to use the open-source components locally. Svelte and SolidJS are planned, without announced release dates. ## Start with your own library 1. Open [Studio](https://ui.coderocket.app/studio) and create a React or Vue library. 2. Customize its tokens, components and blocks. AI assistance is optional. 3. Save, then **Export** a ZIP or use **Connect** to install the source through the CLI. Exported components run locally without a CodeRocket connection. Follow the [React installation guide](https://ui.coderocket.app/docs/export) or [Vue and Nuxt guide](https://ui.coderocket.app/docs/vue) for dependencies and styles. ### Install and update source with the CLI The CLI is available on npm as [`@coderocketapp/cli`](https://www.npmjs.com/package/@coderocketapp/cli). In Studio, open your saved library's **Connect** dialog and create a scoped connection token. Set `CODEROCKET_LIBRARY` and `CODEROCKET_TOKEN` in your environment, then run these commands from your application directory: ```sh npx @coderocketapp/cli@latest init npx @coderocketapp/cli@latest list npx @coderocketapp/cli@latest add button npx @coderocketapp/cli@latest sync ``` The library selects React or Vue source automatically. `sync` preserves local changes and puts conflicting updates aside for review. Keep connection tokens out of version control. See the [CLI guide](packages/cli/README.md) for blocks, complete-library installation and local import analysis. ### Give coding agents the same design rules [`@coderocketapp/mcp`](https://www.npmjs.com/package/@coderocketapp/mcp) exposes a saved library's design rules, components and blocks through a read-only MCP server. Follow the [MCP setup guide](packages/mcp/README.md) to connect a compatible coding agent. The CLI and MCP need no AI provider key. Agents can also use the [public Markdown documentation](docs/content), typed specifications and exported `AGENTS.md`. Review generated source before applying it to your application. ## What is open source? | Package | What it provides | | --------------------------------------- | -------------------------------------------------------------------------------------------- | | [`@coderocket/react`](packages/react) | React components, Base UI primitives, compiled CSS and a composition renderer. | | [`@coderocket/blocks`](packages/blocks) | React interface blocks with typed application callbacks. | | [`@coderocket/vue`](packages/vue) | Vue components and blocks, Reka UI primitives, CSS and a composition renderer. | | [`@coderocket/engine`](packages/engine) | Versioned design-system model, token validation, theme generation and reviewed token import. | | [`@coderocket/specs`](packages/specs) | Shared catalogue specifications and validated composition schemas. | | [`@coderocket/shared`](packages/shared) | Types and a read-only registry client for the integration tools. | | [`@coderocketapp/cli`](packages/cli) | Local import analysis and installation/sync from a saved library, preserving local changes. | | [`@coderocketapp/mcp`](packages/mcp) | A read-only MCP server exposing a saved library's rules and component sources. | **CLI and MCP are distributed on npm.** The component and model packages remain source workspaces: build them locally, or use Studio exports and the CLI to install editable component source. The `@coderocket/react` and `@coderocket/vue` workspace names do not imply npm availability. The [documentation source](docs/content) is public too. It is rendered at [ui.coderocket.app/docs](https://ui.coderocket.app/docs) by the separately maintained website. The hosted Studio, accounts, database, AI-provider integration and commercial operations remain private. Authentication, payments, email delivery and uploads are not bundled component backends: blocks expose callbacks for your own application. The CLI's registry commands and MCP need a saved library and scoped connection token, or a compatible registry server. The catalogue is experimental during early access. Review accessibility, behavior and framework integration in your application's context before release. ## Build from source Use the Node.js and pnpm versions declared in [`package.json`](package.json): ```sh git clone https://github.com/elreco/coderocket-ui.git cd coderocket-ui pnpm install --frozen-lockfile pnpm check ``` The checks validate and build the workspace and run its tests without contacting the Studio or an AI provider. The legacy datepicker is outside this pnpm workspace. ### React workspace consumer Add `@coderocket/react` as a `workspace:*` dependency in a pnpm workspace consumer. Import its compiled styles once: ```tsx import { Button, ThemeScope } from "@coderocket/react"; import "@coderocket/react/styles.css"; export function App() { return (