# Cronus UI — full documentation > Cronus UI is a product UI system: 182 React components across 9 categories (263 live examples), 74 composed blocks (151 variants) across 20 families, and 20 OSS app templates. Themeable tokens, a runtime theming engine (Radix + CVA + Tailwind v4), a shadcn-style registry, and a compose path that turns validated blocks into apps — grow with add-page, then `upgrade --all`. Install from npm (`@cronus-ui/ui`) or copy source with `npx cronus-ui add `. Canonical start: `npx create-cronus-app my-app --template saas`. An MCP server (`npx -y cronus-ui-mcp` over stdio, or Streamable HTTP at https://aicronus.com/mcp) lets coding agents search the live registry — and, on stdio, install, compose, add pages, and theme. This file inlines every guide and component doc. Block docs are inlined without their full sources — each links its own markdown mirror. --- # Introduction — Cronus UI Product UI system: compose a themed SaaS from validated blocks, dual distribution, live theme. Cronus UI is distributed two ways: as npm packages (`@cronus-ui/ui` + `@cronus-ui/tokens` + `@cronus-ui/theme`) or as source copied into your project through the shadcn-style registry (`npx cronus-ui add `). ## Packages - `@cronus-ui/tokens`: Cronus design tokens — source of truth (TS) + CSS variable bridge + Tailwind v4 preset. - `@cronus-ui/theme`: Cronus runtime theming engine — CronusUIProvider + useTheme (CSS-var only, no re-render). - `@cronus-ui/ui`: Cronus UI — themeable, accessible React components (Radix + CVA + Tailwind v4). - `@cronus-ui/stack`: Cronus Stack Builder core — catalog, resolver, CLI flags, KICKOFF.md and stack.json artifacts. - `@cronus-ui/ai-kit`: The Cronus UI AI Kit — an engineering doctrine, skills, and per-assistant config, scaffolded into your project. - `cronus-ui`: cronus-ui — add Cronus UI components to your project, shadcn-style (copy-paste registry). - `create-cronus-app`: Scaffold a Next.js + Cronus UI app: npx create-cronus-app my-app --template saas. - `create-cronus-stack`: Scaffold a Cronus stack from the Cronus Stack Builder contract: app files, stack.json, KICKOFF.md, and optional AI Kit. - `cronus-ui-mcp`: Model Context Protocol server for Cronus UI — lets MCP-compatible AI agents discover and fetch Cronus UI components and blocks from the registry. --- Full guide with live examples: https://aicronus.com/docs --- # Getting started — Cronus UI Zero to a composed SaaS: scaffold, provider, theme, add-page, upgrade, or init into an existing app. ## Commands ### pnpm ```bash pnpm dlx create-cronus-app@latest my-app --template saas pnpm dlx cronus-ui@latest compose saas pnpm dlx cronus-ui@latest add-page --route /faq --blocks faq,cta --nav FAQ pnpm dlx cronus-ui@latest upgrade --all --dry-run pnpm dlx cronus-ui@latest init pnpm dlx cronus-ui@latest add button card dialog ``` ### npm ```bash npx create-cronus-app@latest my-app --template saas npx cronus-ui@latest compose saas npx cronus-ui@latest add-page --route /faq --blocks faq,cta --nav FAQ npx cronus-ui@latest upgrade --all --dry-run npx cronus-ui@latest init npx cronus-ui@latest add button card dialog ``` ### yarn ```bash yarn dlx create-cronus-app@latest my-app --template saas yarn dlx cronus-ui@latest compose saas yarn dlx cronus-ui@latest add-page --route /faq --blocks faq,cta --nav FAQ yarn dlx cronus-ui@latest upgrade --all --dry-run yarn dlx cronus-ui@latest init yarn dlx cronus-ui@latest add button card dialog ``` ### bun ```bash bunx create-cronus-app@latest my-app --template saas bunx cronus-ui@latest compose saas bunx cronus-ui@latest add-page --route /faq --blocks faq,cta --nav FAQ bunx cronus-ui@latest upgrade --all --dry-run bunx cronus-ui@latest init bunx cronus-ui@latest add button card dialog ``` --- Full guide with live examples: https://aicronus.com/docs/getting-started --- # Compare — Cronus UI Cronus UI next to shadcn/ui, HeroUI, and Aceternity — distribution, theming, compose, and a11y gates. --- Full guide with live examples: https://aicronus.com/docs/compare --- # Blocks — Cronus UI Copy-paste composed sections, the families, and the add flow. ## Block families - Auth: [Login](https://aicronus.com/llms/blocks/login.md), [Sign Up](https://aicronus.com/llms/blocks/signup.md), [Forgot Password](https://aicronus.com/llms/blocks/forgot-password.md), [Two-Factor Code](https://aicronus.com/llms/blocks/otp.md), [Magic Link](https://aicronus.com/llms/blocks/magic-link.md) - Account: [Account security](https://aicronus.com/llms/blocks/account-security.md), [Sessions](https://aicronus.com/llms/blocks/sessions.md), [API keys](https://aicronus.com/llms/blocks/api-keys.md), [Notification preferences](https://aicronus.com/llms/blocks/notification-preferences.md) - Marketing: [Hero](https://aicronus.com/llms/blocks/hero.md), [Pricing](https://aicronus.com/llms/blocks/pricing.md), [Feature Matrix](https://aicronus.com/llms/blocks/feature-matrix.md), [Feature Grid](https://aicronus.com/llms/blocks/feature-grid.md), [Call to Action](https://aicronus.com/llms/blocks/cta.md), [Testimonials](https://aicronus.com/llms/blocks/testimonials.md), [FAQ](https://aicronus.com/llms/blocks/faq.md), [Footer](https://aicronus.com/llms/blocks/footer.md), [Navbar](https://aicronus.com/llms/blocks/navbar.md), [Changelog](https://aicronus.com/llms/blocks/changelog.md), [Waitlist Hero](https://aicronus.com/llms/blocks/waitlist.md) - Content: [Blog](https://aicronus.com/llms/blocks/blog.md), [Blog post](https://aicronus.com/llms/blocks/blog-post.md), [Logo cloud](https://aicronus.com/llms/blocks/logo-cloud.md), [About](https://aicronus.com/llms/blocks/about.md) - Application: [Stats Cards](https://aicronus.com/llms/blocks/stats.md), [Settings Panel](https://aicronus.com/llms/blocks/settings.md), [Team Members](https://aicronus.com/llms/blocks/team.md) - Onboarding: [Welcome](https://aicronus.com/llms/blocks/welcome.md), [Setup Wizard](https://aicronus.com/llms/blocks/setup-wizard.md), [Setup Checklist](https://aicronus.com/llms/blocks/setup-checklist.md) - Social: [Post Card](https://aicronus.com/llms/blocks/post-card.md), [Comment Thread](https://aicronus.com/llms/blocks/comment-thread.md), [Profile Card](https://aicronus.com/llms/blocks/profile-card.md) - Dashboard: [Dashboard](https://aicronus.com/llms/blocks/dashboard.md) - Admin: [User management](https://aicronus.com/llms/blocks/user-management.md), [Analytics](https://aicronus.com/llms/blocks/analytics.md), [Kanban board](https://aicronus.com/llms/blocks/kanban-board.md), [Audit log](https://aicronus.com/llms/blocks/audit-log.md) - Billing: [Billing](https://aicronus.com/llms/blocks/billing.md), [Manage Subscription](https://aicronus.com/llms/blocks/manage-subscription.md), [Payment Method](https://aicronus.com/llms/blocks/payment-method.md), [Usage Dashboard](https://aicronus.com/llms/blocks/usage-dashboard.md), [Cancel Flow](https://aicronus.com/llms/blocks/cancel-flow.md) - Commerce: [Checkout](https://aicronus.com/llms/blocks/checkout.md), [Payouts](https://aicronus.com/llms/blocks/payouts.md), [Product Grid](https://aicronus.com/llms/blocks/product-grid.md), [Invoice](https://aicronus.com/llms/blocks/invoice.md) - Store: [Product detail](https://aicronus.com/llms/blocks/product-detail.md), [Cart](https://aicronus.com/llms/blocks/cart.md), [Order tracking](https://aicronus.com/llms/blocks/order-tracking.md), [Order history](https://aicronus.com/llms/blocks/order-history.md), [Reviews](https://aicronus.com/llms/blocks/reviews.md) - Page sections: [Page Header](https://aicronus.com/llms/blocks/page-header.md), [Filter Bar](https://aicronus.com/llms/blocks/filter-bar.md), [Empty State](https://aicronus.com/llms/blocks/empty-state.md), [Status Page](https://aicronus.com/llms/blocks/status-page.md) - AI & Chat: [Chat Thread](https://aicronus.com/llms/blocks/chat-thread.md), [Prompt Box](https://aicronus.com/llms/blocks/prompt-box.md), [AI Response](https://aicronus.com/llms/blocks/ai-response.md) - Notifications: [Notification Panel](https://aicronus.com/llms/blocks/notification-panel.md), [Activity Feed](https://aicronus.com/llms/blocks/activity-feed.md), [Toast Stack](https://aicronus.com/llms/blocks/toast-stack.md) - Email: [Welcome Email](https://aicronus.com/llms/blocks/email-welcome.md), [Receipt Email](https://aicronus.com/llms/blocks/email-receipt.md), [Verify Email](https://aicronus.com/llms/blocks/email-verify.md) - States: [Not Found](https://aicronus.com/llms/blocks/not-found.md), [Error State](https://aicronus.com/llms/blocks/error-state.md), [Success State](https://aicronus.com/llms/blocks/success-state.md), [Maintenance](https://aicronus.com/llms/blocks/maintenance.md) - Feedback: [NPS Survey](https://aicronus.com/llms/blocks/nps-survey.md), [Feedback Form](https://aicronus.com/llms/blocks/feedback-form.md), [Contact Form](https://aicronus.com/llms/blocks/contact-form.md) - Integrations: [Integrations Grid](https://aicronus.com/llms/blocks/integrations.md) - App Shell: [App Shell](https://aicronus.com/llms/blocks/app-shell-chrome.md) --- Full guide with live examples: https://aicronus.com/docs/blocks --- # Installation — Cronus UI Scaffold a SaaS, use Create, the CLI, or an existing app. ## Paths - Scaffold a SaaS app (https://aicronus.com/docs/getting-started): npx create-cronus-app my-app --template saas — a Next.js product composed from validated blocks, with theme and AI Kit. - Use Cronus Create (https://aicronus.com/create): Build a preset visually, save it, and generate the setup snippets for your stack. - Use Stack Builder (https://aicronus.com/stack): Compose an app stack and export a runnable default scaffold command, KICKOFF.md, and stack.json. - Use the CLI (https://aicronus.com/docs/cli): init, add, compose, add-page, diff, upgrade, theme, and ai — inside any project. - Choose your framework (https://aicronus.com/docs/frameworks): Add tokens, providers, and components to an app you already created. ## Scaffold, compose, add-page, upgrade, init, and add ### pnpm ```bash pnpm dlx create-cronus-app@latest my-app --template saas pnpm dlx cronus-ui@latest compose saas pnpm dlx cronus-ui@latest add-page --route /faq --blocks faq,cta --nav FAQ pnpm dlx cronus-ui@latest upgrade --all --dry-run pnpm dlx cronus-ui@latest init pnpm dlx cronus-ui@latest add button card dialog ``` ### npm ```bash npx create-cronus-app@latest my-app --template saas npx cronus-ui@latest compose saas npx cronus-ui@latest add-page --route /faq --blocks faq,cta --nav FAQ npx cronus-ui@latest upgrade --all --dry-run npx cronus-ui@latest init npx cronus-ui@latest add button card dialog ``` ### yarn ```bash yarn dlx create-cronus-app@latest my-app --template saas yarn dlx cronus-ui@latest compose saas yarn dlx cronus-ui@latest add-page --route /faq --blocks faq,cta --nav FAQ yarn dlx cronus-ui@latest upgrade --all --dry-run yarn dlx cronus-ui@latest init yarn dlx cronus-ui@latest add button card dialog ``` ### bun ```bash bunx create-cronus-app@latest my-app --template saas bunx cronus-ui@latest compose saas bunx cronus-ui@latest add-page --route /faq --blocks faq,cta --nav FAQ bunx cronus-ui@latest upgrade --all --dry-run bunx cronus-ui@latest init bunx cronus-ui@latest add button card dialog ``` --- Full guide with live examples: https://aicronus.com/docs/installation --- # Theming — Cronus UI Tokens, presets, runtime overrides, and dark mode. --- Full guide with live examples: https://aicronus.com/docs/theming --- # Cronus UI — DESIGN.md > Product UI system. Aurora is generated product. Neutral is docs chrome. Looks are material. Cronus is not a component-count race. A generated page is installed blocks stacked in `
`. Taste lives in tokens, looks, and these rules — never in hex on a component. - **Themes:** Aurora (flag), Neutral (chrome), Midnight, Sunset, Emerald. - **Looks:** Default, Brutalist, Glass — orthogonal, via `data-cronus-look`. - **Mode:** dark default. Light is first-class. - **CTA:** `npx create-cronus-app my-app --template saas`. ## Active context - **Theme:** aurora — Luminous sky on deep zinc — the flagship of generated product. - **Look:** default — Soft radius, hairline borders, quiet shadow. The baseline material. - Light mode is first-class; tables below are the dark side (the usual generated default). Other palettes: neutral, midnight, sunset, emerald. Switch with `npx cronus-ui theme set ` or MCP `set_theme`. Apply a look with `data-cronus-look` on `` or a subtree. ## Color (aurora dark) | Name | Value | Token | Role | | --- | --- | --- | --- | | Primary | `oklch(0.685 0.169 237.3)` | `--cronus-primary` | The one chromatic fill. Primary buttons, ring. | | Primary fg | `oklch(0.145 0.005 285.8)` | `--cronus-primary-foreground` | Text/icon on primary. Never invent white. | | Accent | `oklch(0.715 0.143 215.2)` | `--cronus-accent` | Supporting chroma. Not a second CTA. | | Canvas | `oklch(0.145 0.005 285.8)` | `--cronus-surface-base` | Page background. | | Raised | `oklch(0.195 0.005 285.8)` | `--cronus-surface-raised` | Cards, bars. | | Overlay | `oklch(0.235 0.006 285.9)` | `--cronus-surface-overlay` | Hover, chips, inset controls. | | Floating | `oklch(0.2 0.006 286)` | `--cronus-surface-floating` | Popovers, menus. | | Foreground | `oklch(0.985 0.001 106.4)` | `--cronus-fg` | Headings, primary copy. | | Secondary | `oklch(0.705 0.015 286)` | `--cronus-fg-secondary` | Body, supporting copy. | | Tertiary | `oklch(0.62 0.014 286)` | `--cronus-fg-tertiary` | Hints the user must read. AA on surfaces. Not fg-muted. | | Muted | `oklch(0.442 0.013 286)` | `--cronus-fg-muted` | Decorative only. Never information. | | Border | `oklch(1 0 0 / 0.1)` | `--cronus-border` | Hairline structure. Prefer this over drop shadows. | | Success | `oklch(0.715 0.155 162.5)` | `--cronus-success-text` | Status text: text-success-strong. | | Warning | `oklch(0.769 0.166 70.08)` | `--cronus-warning-text` | Status text: text-warning-strong. | | Error | `oklch(0.69 0.222 16.44)` | `--cronus-error-text` | Status text: text-error-strong. | ## Looks - **Default** (`data-cronus-look="default"`) **(active)** — Soft radius, hairline borders, quiet shadow. The baseline material. - **Brutalist** (`data-cronus-look="brutalist"`) — Radius 0, stamp shadows, 2px borders, uppercase labels. Geometry does the work. - **Glass** (`data-cronus-look="glass"`) — Larger radius, frosted panes, blur behind outline chrome. Reduced-transparency drops the blur. Radius roles match the primitives (derived from `--cronus-radius`, Looks still win): | Role | Utility | Default | Brutalist | Glass | | --- | --- | --- | --- | --- | | Button | `rounded-lg` / `rounded-button` | radius | 0 | 18px | | Badge | `rounded-md` / `rounded-badge` | radius − 4px | 0 | 14px | | Card | `rounded-xl` / `rounded-card` | radius + 4px | 0 | 22px | | Input | `rounded-lg` | radius | 0 | 18px | | Pill | `rounded-full` / `rounded-pill` | 9999px | 0 | 9999px | ## Type - **Sans / UI:** SF Pro Text, Geist, system-ui. - **Display:** SF Pro Display, Geist. Weight 400 on headings. - **Mono:** SF Mono, JetBrains Mono — IDs, commands, code. Never marketing headlines. | Role | Size | Weight | Tracking | Line | | --- | --- | --- | --- | --- | | Display | 3rem–3.75rem | 400 | −0.03em | ~1.08 | | Heading | 1.5rem–2.25rem | 400 | −0.025em | 1.2 | | Body | 1rem | 400 | 0 | 1.5–1.75 | | Small | 0.875rem | 400 | 0 | 1.5 | | Label / button | 0.75–0.875rem | 500–600 | 0 | 1.25 | ## Layout & elevation - Page max-width ~80rem (7xl). Section padding 4–8. Section gaps large; element gaps 8–12px. - Elevation is hairline borders and surface steps (base → raised → overlay → floating), not stacked drop shadows. - `shadow-glow` is Aurora brand atmosphere, not card chrome. - Density: product apps compact; marketing landings airy. Do not mix both on one screen. ## Component recipes Use Cronus primitives. These are the visual contracts, not new components. 1. **Primary button.** `bg-primary text-primary-foreground rounded-lg`. One per view. Padding ~10×16 at sm. 2. **Outline button.** Transparent fill, `border-border`, `text-fg`. Hover `border-border-strong`. 3. **Card.** `bg-surface-raised border-border rounded-xl`. No inner nested card for hierarchy — use a top border. 4. **Input.** `bg-surface-inset border-border rounded-lg text-fg`. Focus ring `ring-ring`. 5. **Badge.** Small, `font-medium`. Status uses `text-success-strong` / `text-error-strong`, not the fill token as type. 6. **Nav.** Neutral chrome on docs. Product apps may inherit the baked theme. Links `text-fg-secondary`, hover `text-fg`. 7. **Hero (generated).** Display heading + one primary CTA + one outline. Product screenshot or composed blocks as the picture — no stock photo. Primary on aurora: `oklch(0.685 0.169 237.3)` on `oklch(0.145 0.005 285.8)`. ## Rules ### Do - One chromatic filled action per view (`bg-primary text-primary-foreground`). Outline/ghost stay hairline on transparent. - Headings: weight 400, tracking `-0.03em` at 5xl+, `-0.025em` at 3xl/4xl, `-0.02em` at xl/2xl. No `font-bold`, no `tracking-tight`. - `font-semibold` only on small labels, badges, and button text. - Hierarchy with `border-t border-border`, not nested cards. - One motion curve: `cubic-bezier(.22,1,.36,1)`. Gate animation on `prefers-reduced-motion`. - Semantic tokens only: `bg-surface-*`, `text-fg*`, `border-border`, `rounded-lg`. Status text uses `*-strong`. - Readable de-emphasis is `text-fg-tertiary`. `text-fg-muted` is ornament. - Glass: frost outline/default chrome, not solid primary. Honour `prefers-reduced-transparency`. - Docs/landing chrome stays Neutral + Default look. Generated product may use Aurora and any look. ### Don't - No palette scales (`bg-zinc-900`, `text-gray-500`). No raw hex in components. - No second accent as a competing CTA. Accent is supporting chroma. - No `font-bold` on display type. No extra radius vocabulary beyond the scale. - No decorative gradients on buttons or cards. Aurora glow is a surface, not a fill. - Do not restyle docs chrome with the product theme. Dual identity is the point. - Do not fork components per look. `data-cronus-look` restyles `data-slot`. ## Agent prompts Paste this file (compact) before the task. Then: 1. **SaaS dashboard.** Theme `aurora`, look `default`. App shell, metric row, chart, table. One primary button ("New"). Hairline cards. No gradients on chrome. 2. **Marketing hero.** Neutral chrome if this is docs; Aurora if generated product. Heading weight 400, tracking −0.03em. Two pill CTAs: primary + outline. 3. **Settings form.** Field + Label + Input + FormMessage. Invalid state `text-error-strong` and `role="alert"`. No custom red. 4. **Pricing row.** Two cards, one featured `border-border-strong`. Prices with a fixed `Intl.NumberFormat("en-US")`. 5. **Empty state.** Heading + tertiary hint + one primary action. No illustration unless it is a Cronus primitive. Acceptance: semantic tokens only, one primary fill, AA copy, reduced-motion path, no nested cards. ## Quick CSS (dark aurora) ```css :root, [data-cronus-theme="aurora"] { --cronus-primary: oklch(0.685 0.169 237.3); --cronus-primary-foreground: oklch(0.145 0.005 285.8); --cronus-surface-base: oklch(0.145 0.005 285.8); --cronus-surface-raised: oklch(0.195 0.005 285.8); --cronus-fg: oklch(0.985 0.001 106.4); --cronus-fg-secondary: oklch(0.705 0.015 286); --cronus-fg-tertiary: oklch(0.62 0.014 286); --cronus-border: oklch(1 0 0 / 0.1); --cronus-radius: 14px; } ``` Prefer `@import "@cronus-ui/tokens/styles.css"` plus `data-cronus-theme` / `data-cronus-look` over copying this block. ## Files - Repo taste: this file (`DESIGN.md`). Compact prompt: `DESIGN.compact.md`. - Engineering doctrine: `AGENTS.md`. Component contract: Cronus `CONTRACT.md` (tokens, CVA, ref, data-slot, focus ring). - Live: `/themes`, `/llms/docs/design.md`. MCP: `get_design_context`. - Snapshot: `theme set` does not rewrite this file (writes never clobber). Delete it and re-run `cronus-ui ai`, or fetch MCP `get_design_context`. --- # Styling — Cronus UI Override, extend, and re-skin components with className, CVA, and data-slot. --- Full guide with live examples: https://aicronus.com/docs/styling --- # CLI — Cronus UI init, add, compose, add-page, diff, upgrade, theme, mcp init, ai. ## Commands ### pnpm ```bash pnpm dlx create-cronus-app@latest my-app --template saas pnpm dlx cronus-ui@latest compose saas pnpm dlx cronus-ui@latest add-page --route /faq --blocks faq,cta --nav FAQ pnpm dlx cronus-ui@latest upgrade --all --dry-run pnpm dlx cronus-ui@latest init pnpm dlx cronus-ui@latest add button card dialog ``` ### npm ```bash npx create-cronus-app@latest my-app --template saas npx cronus-ui@latest compose saas npx cronus-ui@latest add-page --route /faq --blocks faq,cta --nav FAQ npx cronus-ui@latest upgrade --all --dry-run npx cronus-ui@latest init npx cronus-ui@latest add button card dialog ``` ### yarn ```bash yarn dlx create-cronus-app@latest my-app --template saas yarn dlx cronus-ui@latest compose saas yarn dlx cronus-ui@latest add-page --route /faq --blocks faq,cta --nav FAQ yarn dlx cronus-ui@latest upgrade --all --dry-run yarn dlx cronus-ui@latest init yarn dlx cronus-ui@latest add button card dialog ``` ### bun ```bash bunx create-cronus-app@latest my-app --template saas bunx cronus-ui@latest compose saas bunx cronus-ui@latest add-page --route /faq --blocks faq,cta --nav FAQ bunx cronus-ui@latest upgrade --all --dry-run bunx cronus-ui@latest init bunx cronus-ui@latest add button card dialog ``` --- Full guide with live examples: https://aicronus.com/docs/cli --- # MCP — Cronus UI Hosted Streamable HTTP at /mcp plus local stdio. Snippets for Claude, Cursor, VS Code, Codex, Grok, OpenCode, Zed, v0, Lovable, Bolt. ## Transports - Official registry: `io.github.pedrogbraz/cronus-ui`. - Hosted Streamable HTTP (read-only catalog): `https://aicronus.com/mcp`. - Local stdio (read + write): `npx -y cronus-ui-mcp`. Project files: `npx cronus-ui mcp init`. Greenfield is not an MCP tool. Scaffold with `npx create-cronus-app my-app --template saas`. ## Hosted HTTP ### URL ```bash https://aicronus.com/mcp ``` ### Claude Code ```bash claude mcp add --transport http cronus-ui https://aicronus.com/mcp ``` ### Cursor / Windsurf ```json { "mcpServers": { "cronus-ui": { "url": "https://aicronus.com/mcp" } } } ``` ### VS Code / Copilot ```json { "servers": { "cronus-ui": { "type": "http", "url": "https://aicronus.com/mcp" } } } ``` ### Codex ```toml [mcp_servers.cronus-ui] url = "https://aicronus.com/mcp" ``` ### Grok CLI ```bash grok mcp add --transport http cronus-ui https://aicronus.com/mcp ``` ### OpenCode ```json { "mcp": { "cronus-ui": { "type": "remote", "url": "https://aicronus.com/mcp", "enabled": true } } } ``` ## Local stdio ### Claude Code ```bash claude mcp add cronus-ui -- npx -y cronus-ui-mcp ``` ### Cursor / Windsurf ```json { "mcpServers": { "cronus-ui": { "command": "npx", "args": ["-y", "cronus-ui-mcp"] } } } ``` ### VS Code / Copilot ```json { "servers": { "cronus-ui": { "type": "stdio", "command": "npx", "args": ["-y", "cronus-ui-mcp"] } } } ``` ### Codex ```toml [mcp_servers.cronus-ui] command = "npx" args = ["-y", "cronus-ui-mcp"] ``` ### Grok CLI ```bash grok mcp add cronus-ui -- npx -y cronus-ui-mcp ``` ### OpenCode ```json { "mcp": { "cronus-ui": { "type": "local", "command": ["npx", "-y", "cronus-ui-mcp"], "enabled": true } } } ``` ### Zed ```json { "context_servers": { "cronus-ui": { "command": "npx", "args": ["-y", "cronus-ui-mcp"] } } } ``` ### Antigravity ```json { "mcpServers": { "cronus-ui": { "command": "npx", "args": ["-y", "cronus-ui-mcp"] } } } ``` ## Clients - Claude Code (both): claude mcp add / .mcp.json. npx cronus-ui mcp init writes .mcp.json (stdio). - Cursor (both): ~/.cursor/mcp.json or .cursor/mcp.json. Root key is mcpServers. - Windsurf (both): ~/.codeium/windsurf/mcp_config.json. Same mcpServers JSON as Cursor. - VS Code / GitHub Copilot (both): .vscode/mcp.json. Root key is servers, not mcpServers. - Codex (both): ~/.codex/config.toml. codex mcp add cronus-ui -- npx -y cronus-ui-mcp. - Grok CLI (both): ~/.grok/config.toml. grok mcp add. Also reads .mcp.json / .cursor/mcp.json. - OpenCode (both): opencode.json. Root key is mcp; command is a single array. - Zed (stdio): settings.json → context_servers. Zed calls MCP servers context servers. - Antigravity (stdio): ~/.gemini/config/mcp_config.json. Shared with Antigravity IDE and CLI. mcpServers JSON. - Kilo Code (stdio): kilo.json / .kilocode/. Local stdio. Same command + args as Cursor. - Conductor (stdio): inherits Claude Code / Codex / Cursor. .mcp.json in the repo is enough for Claude sessions. - v0 / Lovable / Replit / Bolt / Base44 (http): Custom MCP URL field. Paste https://aicronus.com/mcp. Read-only catalog — no local CLI. --- Full guide with live examples: https://aicronus.com/docs/mcp --- # Stack Builder — Cronus UI Stack picker with a runnable default scaffold command, KICKOFF.md, and stack.json schema. --- Full guide with live examples: https://aicronus.com/docs/stack-builder --- # RTL — Cronus UI Direction, spacing, keyboard behavior, and locale checks. --- Full guide with live examples: https://aicronus.com/docs/rtl --- # Registry — Cronus UI How registry items are generated, resolved, and copied. --- Full guide with live examples: https://aicronus.com/docs/registry --- # Forms — Cronus UI React Hook Form, Zod, accessible fields, and validation states. --- Full guide with live examples: https://aicronus.com/docs/forms --- # Charts — Cronus UI ChartContainer catalog: area, line, live, bar, donut, radar, gauge, composed, candle, funnel, scatter, sankey, P/L. --- Full guide with live examples: https://aicronus.com/docs/charts --- # Recipes — Cronus UI Copy-paste patterns: validated forms, theme toggle, toasts, and more. --- Full guide with live examples: https://aicronus.com/docs/recipes --- # Accessibility — Cronus UI Keyboard, focus, screen reader, contrast, and framework notes. ## What every component is checked against - Keyboard: Every interactive primitive has a visible focus state and expected arrow-key behavior. - Screen readers: Dialogs, sheets, command menus, forms, and toasts expose names, descriptions, and live states. - Contrast: Theme presets are validated against semantic foreground/background pairs before release. - Framework handoff: Each adapter documents where focus should move after navigation, submit, and dismiss actions. --- Full guide with live examples: https://aicronus.com/docs/accessibility --- # Frameworks — Cronus UI Next.js, Vite, TanStack Start, React Router, Astro, and Laravel. ## Next.js App Router, RSC-safe provider placement, metadata, and route-level themes. ```bash npx create-next-app@latest app && cd app && npx cronus-ui@latest init ``` Checks: - Provider in app/layout.tsx - tokens imported in globals.css - focus restores on navigation ## Vite SPA setup with a root provider, CSS token import, and fast registry adds. ```bash npm create vite@latest app && cd app && npx cronus-ui@latest init ``` Checks: - Provider wraps - semantic tokens in src/index.css - keyboard traps tested ## TanStack Start File routes, server functions, and persistent theme state across route transitions. ```bash npm create @tanstack/start@latest app && cd app && npx cronus-ui@latest init ``` Checks: - Root route owns provider - pending UI keeps accessible names - router focus handoff ## React Router Framework mode with route modules, loader-friendly forms, and progressive UX. ```bash npx create-react-router@latest app && cd app && npx cronus-ui@latest init ``` Checks: - Root.tsx owns provider - forms expose field errors - links keep visible focus ## Astro Island components with shared CSS tokens and isolated interactive surfaces. ```bash npm create astro@latest app && cd app && npx cronus-ui@latest init ``` Checks: - client islands import UI only where needed - no duplicate provider trees - static content remains semantic ## Laravel Blade or Inertia setup with Vite, shared token CSS, and server-rendered forms. ```bash laravel new app && cd app && npx cronus-ui@latest init ``` Checks: - Vite entry imports tokens - Blade/Inertia root owns provider - server errors map to FieldError --- Full guide with live examples: https://aicronus.com/docs/frameworks --- # Changelog — Cronus UI Released, in-development, and planned changes. ## v0.7.6 — official MCP Registry listing (Released, 2026-09-09) io.github.pedrogbraz/cronus-ui is listed on the official MCP Registry: stdio via cronus-ui-mcp and Streamable HTTP at https://aicronus.com/mcp. npm latest is 0.7.6. - server.json + mcpName on cronus-ui-mcp for ownership verification - Official registry lists both stdio (npx) and the hosted /mcp remote ## v0.7.5 — mcp init and per-editor kit (Released, 2026-09-09) cronus-ui mcp init writes project MCP config for Claude, Cursor, VS Code, Codex, Grok, OpenCode, Gemini, and Zed. create-cronus-app and cronus-ui ai emit the same files. npm latest is 0.7.5. - cronus-ui mcp init — one command, --client subset, --force overwrite - AI kit writes .mcp.json, .cursor/mcp.json, .vscode/mcp.json (servers), .codex/config.toml, .grok/config.toml, opencode.json, .gemini/settings.json, .zed/settings.json ## v0.7.4 — catalog empties, motion harvest, complete llms.txt, hosted MCP (Released, 2026-09-09) Gold-path and store empties/completes, eleven motion components, a full /llms.txt catalog from the live indices, and a hosted Streamable HTTP MCP at /mcp. npm latest is 0.7.4. - magic-link--split, setup-checklist--complete, setup-wizard--done, welcome--complete, analytics--period - team--empty, stats--empty, usage-dashboard--empty, billing--empty, analytics--empty - user-management--empty, kanban-board--empty, audit-log--empty - sessions--empty, api-keys--empty - cart--empty, order-history--empty, reviews--empty, product-grid--empty - AnimatedCheckbox — spring check and strike-through label - SlideUpText — Spell stagger by word, character, or line - ImagesBadge — folder badge that fans previews on hover - Globe3D — textured globe with pins (optional three / r3f / drei) - NumberFlow — digits that roll to each new value - ExploreNav — Apple product bar that morphs into a family carousel - ScrollNav — sticky sidebar that tracks the section in view - BouncyAccordion — stacked rows that spring into a gapped card - TokenSwap — Aave-style ETH → AAVE swap - ReceiveButton — Family Receive pill that morphs into a confirm card - FamilyWallet — Family sign-in drawer: socials, OTP, passkey, wallets - Complete /llms.txt catalog for coding agents — site, docs, components, blocks, templates, MCP - Hosted Streamable HTTP MCP at /mcp (read-only catalog) and /docs/mcp client snippets ## v0.7.3 — settings workspace, otp split, usage period (Released, 2026-09-07) settings--workspace, otp--split, and usage-dashboard--period. Gold-path add-page and upgrade strip Dana Reyes from otp-split. saas /settings stacks workspace; /billing keeps the usage overview. - settings--workspace, otp--split, and usage-dashboard--period land in the catalog ## v0.7.2 — gold-path sqlite schema matches Better Auth 1.7.3 (Released, 2026-09-07) account.issuer is nullable — Better Auth never writes it, and 1.7.3 refuses a required column. upgrade --all and re-compose patch existing schemas without overwriting the rest of the file. - account.issuer is nullable; upgrade --all patches existing gold-path schemas ## v0.7.1 — gold-path auth and chrome are honest (Released, 2026-09-06) saas/admin split login/signup drop Dana Reyes / Northwind. The shell drops the no-op Notifications bell. Docs describe Items and Team as the live nav. - gold-path strips the Northwind testimonial and the dead Notifications bell ## v0.7.0 — create-cronus-app defaults to saas (Released, 2026-09-03) Omitting --template, the prompt, and --yes without --template scaffold the gold path. --template default remains the single-page starter. - breaking: create-cronus-app DEFAULT_TEMPLATE is saas (ADR 0007) ## v0.6.22 — gold-path nav drops catalog demo routes (Released, 2026-09-03) saas/admin sidebar is Items and Team plus add-page --nav entries. Catalog demo pages stay on disk, not in the nav. - saas/admin nav is Items and Team; upgrade and add-page re-strip catalog demo routes ## v0.6.21 — gold-path first-run db:push (Released, 2026-09-02) create-cronus-app --template saas (and admin) runs db:push after a successful install so sqlite has tables before bun dev. - saas/admin create-cronus-app runs db:push --force after install ## v0.6.20 — gold-path first-run .env (Released, 2026-09-02) saas/admin compose writes .env when missing, with a generated BETTER_AUTH_SECRET, and gitignores .env. Existing .env is never overwritten. - saas/admin compose writes .env with a generated Better Auth secret ## v0.6.19 — upgrade re-emits gold-path owned files (Released, 2026-09-02) cronus-ui upgrade --all on saas and admin rewrites compose always-true adapters and panels so CLI gold-path fixes reach existing apps. - saas/admin upgrade --all re-emits items, members, invite-member, session-user ## v0.6.18 — upgrade keeps gold-path home (Released, 2026-09-02) cronus-ui upgrade --all on saas and admin no longer restores catalog dashboard/stats on the shell home. - saas/admin upgrade re-applies ItemsPanel on (shell)/page.tsx ## v0.6.17 — upgrade keeps gold-path layout and team (Released, 2026-09-02) cronus-ui upgrade --all on saas and admin no longer restores an unauthenticated catalog layout or TeamBlock on /team. - saas/admin upgrade re-applies session gate and MembersPanel ## v0.6.16 — upgrade keeps gold-path chrome (Released, 2026-09-01) cronus-ui upgrade --all on saas and admin no longer restores Mara, WORKSPACES, or a demo InviteDialog on app-shell-chrome. - saas/admin upgrade re-applies WorkspaceMenu, InviteMember, SessionUser ## v0.6.15 — Invite-aware login copy (Released, 2026-09-01) create-cronus-app --template saas (and admin) /login?invitation= shows Join the workspace on classic and split login. Default welcome copy is unchanged. - login classic and split show Join the workspace when ?invitation= is present ## v0.6.14 — add-page keeps gold-path chrome (Released, 2026-09-01) cronus-ui add-page --nav on saas and admin grows the sidebar without restoring Mara, WORKSPACES, or a demo InviteDialog. - saas/admin add-page --nav re-applies WorkspaceMenu, InviteMember, SessionUser ## v0.6.13 — Invite-aware signup copy (Released, 2026-09-01) create-cronus-app --template saas (and admin) /signup?invitation= shows Join the workspace on classic and split signup. Default create copy is unchanged. - signup classic and split show Join the workspace when ?invitation= is present ## v0.6.12 — Home nav is Items (Released, 2026-09-01) create-cronus-app --template saas (and admin) labels `/` as Items in the sidebar, matching the live ItemsPanel heading. - saas and admin nav for / is Items, not Dashboard/Overview ## v0.6.11 — Gold-path home is items (Released, 2026-09-01) create-cronus-app --template saas (and admin) opens on the live ItemsPanel after signup. Catalog dashboard and stats stay installed, not rendered on /. - saas/admin / renders ItemsPanel only - Dashboard and stats blocks remain in the project for the catalog ## v0.6.10 — Invite link and admin signup (Released, 2026-09-01) create-cronus-app --template saas copies the invite URL in the dialog and lists pending invites on /team. admin compose installs signup--split so first-run and invite accept are not a 404. - InviteDialog stays open with a copyable URL when onInvite returns { url } - admin /signup uses signup--split; /users stays catalog demo ## v0.6.9 — Forgot-password split (Released, 2026-08-31) create-cronus-app --template saas (and admin) installs forgot-password--split: brand panel beside the reset form, sent state with the typed email. /reset-password stays the token form. - saas and admin /forgot-password use the split variant - /reset-password stays the token form ## v0.6.8 — Sign out on the gold path (Released, 2026-08-31) create-cronus-app --template saas (and admin) signs out from the chrome: SessionUser calls Better-Auth signOut and sends the browser to /login. - Sidebar footer SessionUser has a Sign out action - Compact header gets the same action as an icon button ## v0.6.7 — Password reset gold path (Released, 2026-08-31) create-cronus-app --template saas (and admin) completes forgot-password: sent state uses the typed email, /reset-password sets a new password from the Better-Auth token. - Request form switches to sent with the email the user typed - forgot-password--reset reads the token and sets the new password - Admin gets /forgot-password and /reset-password so split-login is not a 404 ## v0.6.6 — Signup split on saas (Released, 2026-08-31) create-cronus-app --template saas ships /signup in the same split chrome as /login. Workspace copy, no Polar trial; store stays on the classic card. - New signup--split variant pairs login--split - saas compose installs the variant; store keeps classic signup - No social buttons, no 14-day trial copy ## v0.6.5 — First-run gold path (Released, 2026-08-31) create-cronus-app --template saas signs up on whatever port Next prints. A stale session cookie no longer traps the shell. - Loopback on any port is a trusted Better-Auth origin - Shell layout redirects unsigned-in visitors after a real getSession - Middleware no longer bounces cookie-holders off /login ## v0.6.4 — Members list on the gold path (Released, 2026-08-31) create-cronus-app --template saas lists Better-Auth org members on /team. After invite accept, the invitee appears; another workspace does not. - saas /team emits MembersPanel scoped to the active org - Invite from the team page uses the same InviteMember as chrome - DashboardBlock, stats, and billing stay the catalog demo ## v0.6.3 — Items write on the gold path (Released, 2026-08-31) create-cronus-app --template saas creates and deletes workspace-scoped items. Members of the same org see the same list; another workspace does not. - saas and admin emit create/delete server actions scoped to the active org - ItemsPanel lists tenant data; DashboardBlock stays the catalog demo - Invitee sees the same items; a second workspace does not ## v0.6.2 — Authenticated gold path (Released, 2026-08-31) create-cronus-app --template saas signs up, creates a workspace, and accepts invites. SQLite + Drizzle + Better-Auth, chrome from the session. - saas and admin compose SQLite, Drizzle, Better-Auth, and protected shell - Login, signup, and forgot-password are real forms via auth-adapter - Signup creates a workspace; WorkspaceSwitcher and InviteDialog talk to Better-Auth - Invitee signs up from /accept-invitation and joins the same org - Compose records registry npm pins even with --no-install; drizzle-kit creates data/ ## v0.6.1 — Runnable stack, admin/docs, chrome (Released, 2026-08-30) create-cronus-stack emits Drizzle + SQLite and Better-Auth; InviteDialog and WorkspaceSwitcher land in the app shell; admin and docs compose from idle blocks. - Next + Drizzle + SQLite is a real scaffold; Better-Auth rides the same Drizzle path - InviteDialog and WorkspaceSwitcher in @cronus-ui/ui, wired into app-shell-chrome - OSS compose templates admin and docs — not landing-docs - upgrade skill and the compose → add-page → theme → upgrade loop - saas grows to 11 pages (forgot-password, welcome, setup, checklist) - Stack Builder Prompt badge for options the generator does not write ## v0.6.0 — Looks, Neutral chrome, Cronus Pro (Released, 2026-08-28) Material looks, Neutral landings, and an additive Pro origin — the engine stays OSS. - Looks: Default, Brutalist, Glass via data-cronus-look (Mauve is gone) - DESIGN.md taste file for agents (compact + extended, MCP get_design_context) - Charts catalog: AreaChart, LineChart, LiveLine, Bar, Composed, Candlestick, Funnel, Gauge, Pie, Ring, Radar, Scatter, Sankey, P/L, Choropleth, Sunburst, HeatmapChart - OSS and Pro landings share Neutral chrome; Aurora stays the generated-product flag - Cronus Pro at :4748 — mail, chat, finance pack, Maker/Studio list, not billed yet - compose -y with no template name composes saas, not lexicographic first ## v0.5.0 — App generator matures (Released, 2026-07-13) Block variants, a SaaS template, add-page, and shared demo-store / demo-saas libs — compose a product, then grow it one route at a time. - Installable block variants and a repeatable --variant flag on compose - create-cronus-app --template saas: app-shell chrome, dashboard, team, billing, settings, split login - cronus-ui add-page grows a composed app (blocks, nav, base snapshot, --dry-run) - Shared demo-store / demo-saas libs as registry:lib, installed transitively with add/compose ## v0.4.0 — Cronus Compose (Released, 2026-07-13) Generate a multi-page Next.js app from validated registry blocks. Every page is imports plus a
that stacks them. - cronus-ui compose