Installation

Install Cronus UI in the path that matches your project

New product: scaffold a composed SaaS. Existing app: run the CLI. Create Studio is for designing a visual preset first.

Recommended for a new product

Scaffold with npx create-cronus-app@latest my-app --template saas. Use Create Studio when you want to design a visual preset before you generate setup snippets.

Scaffold a SaaS app

create-cronus-app composes a Next.js app from validated blocks (auth, dashboard shell, billing), wires the theme, and ships the AI Kit.

Scaffold a SaaS app

bash

pnpm dlx create-cronus-app@latest my-app --template saas

Starting point

Scaffold a SaaS app

npx create-cronus-app my-app --template saas — a Next.js product composed from validated blocks, with theme and AI Kit.

Get started

Use Cronus Create

Build a preset visually, save it, and generate the setup snippets for your stack.

Open Create

Use Stack Builder

Compose an app stack and export a runnable default scaffold command, KICKOFF.md, and stack.json.

Open Stack Builder

Use the CLI

init, add, compose, add-page, diff, upgrade, theme, and ai — inside any project.

Read CLI docs

Choose your framework

Add tokens, providers, and components to an app you already created.

Choose framework

Use Create

Build your preset visually, preview the result, save it locally, and generate the command for your stack.

Open Create

Use the CLI

Create the app with your framework's official tool, then run init inside it. The CLI is framework-agnostic and acts on the current directory.

Initialize the current project

bash

pnpm dlx cronus-ui@latest init

Works in any project — including next, vite, tanstack-start, react-router, astro, and laravel apps.

Add components

After init, copy components from the registry into your app. Imports are rewritten to your local aliases.

Copy components into your app

bash

pnpm dlx cronus-ui@latest add button card dialog

Optional peer dependencies (npm package)

Using @cronus-ui/ui as a managed npm dependency instead of the CLI? A few heavy, component-specific libraries are optional peers and are not installed automatically — add them only when you import the component. CLI users skip this: add installs each item's dependencies.

Component(s)	Install
Chart	`npm i recharts`
RichTextEditor	`npm i @tiptap/react @tiptap/pm @tiptap/starter-kit`
Kanban	`npm i @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities`
DataTable	`npm i @tanstack/react-table`
Calendar	`npm i react-day-picker`
DatePicker, DateRangePicker	`npm i react-day-picker date-fns`
Scheduler	`npm i date-fns`
Form	`npm i react-hook-form zod @hookform/resolvers`

Choose your framework

Each adapter documents where the provider, token import, and accessibility handoff should live.

Next.js

App Router, RSC-safe provider placement, metadata, and route-level themes.

npx create-next-app@latest app && cd app && npx cronus-ui@latest init

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.

npm create vite@latest app && cd app && npx cronus-ui@latest init

Provider wraps <App />
semantic tokens in src/index.css
keyboard traps tested

TanStack Start

File routes, server functions, and persistent theme state across route transitions.

npm create @tanstack/start@latest app && cd app && npx cronus-ui@latest init

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.

npx create-react-router@latest app && cd app && npx cronus-ui@latest init

Root.tsx owns provider
forms expose field errors
links keep visible focus

Astro

Island components with shared CSS tokens and isolated interactive surfaces.

npm create astro@latest app && cd app && npx cronus-ui@latest init

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.

laravel new app && cd app && npx cronus-ui@latest init

Vite entry imports tokens
Blade/Inertia root owns provider
server errors map to FieldError