create-cronus-app 0.6.0

package/templates/dashboard/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "__APP_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@cronus-ui/theme": "^0.6.0",
+    "@cronus-ui/tokens": "^0.6.0",
+    "@cronus-ui/ui": "^0.6.0",
+    "@tanstack/react-table": "^8.21.3",
+    "lucide-react": "^0.577.0",
+    "next": "16.2.10",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "recharts": "^3.9.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^6.0.3"
+  }
+}

package/templates/dashboard/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/templates/dashboard/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "ES2022"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/default/README.md

@@ -0,0 +1,46 @@
+# __APP_NAME__
+
+A [Next.js](https://nextjs.org) (App Router) app built with
+[Cronus UI](https://www.npmjs.com/package/@cronus-ui/ui) — themeable, accessible React
+components on Tailwind v4.
+
+## Getting started
+
+```sh
+npm install   # or: pnpm install / yarn / bun install
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) and edit `app/page.tsx` — the page
+hot-reloads as you save.
+
+## How it's wired
+
+- **`app/globals.css`** imports Tailwind and the Cronus token CSS, plus the required
+  `@source "../node_modules/@cronus-ui/ui/dist/**/*.js";` line so Tailwind v4 emits the
+  component utility classes (it skips `node_modules` by default).
+- **`app/layout.tsx`** mounts `<CronusUIProvider>` (theme: Aurora) and the anti-flash
+  `<CronusThemeScript>` so the right theme is applied before hydration.
+- **`app/page.tsx`** is a sample dashboard using `Button`, `Card`, `Badge`, `Input`,
+  `Metric`, and `Table` from `@cronus-ui/ui`.
+
+## Add more components
+
+This app includes a `cronus-ui.json`, so you can pull any component from the registry:
+
+```sh
+npx cronus-ui add dialog tabs dropdown-menu
+```
+
+## Scripts
+
+| Script | Description |
+| --- | --- |
+| `dev` | Start the dev server. |
+| `build` | Production build. |
+| `start` | Serve the production build. |
+
+## Learn more
+
+- [Next.js documentation](https://nextjs.org/docs)
+- [Tailwind CSS v4](https://tailwindcss.com)

package/templates/default/app/globals.css

@@ -0,0 +1,16 @@
+@import "tailwindcss";
+@import "@cronus-ui/tokens/styles.css";
+
+/*
+ * REQUIRED on Tailwind v4.
+ *
+ * Tailwind v4 does not scan node_modules by default, and @cronus-ui/ui ships its
+ * Tailwind class strings baked into pre-compiled JS under dist. Without the
+ * @source below, none of the component utility classes (bg-primary, rounded-lg,
+ * bg-surface-raised, …) would be emitted and the components would render
+ * unstyled.
+ */
+@source "../node_modules/@cronus-ui/ui/dist/**/*.js";
+
+/* Scan this app's own source too. */
+@source "./**/*.{ts,tsx}";

package/templates/default/app/layout.tsx

@@ -0,0 +1,39 @@
+import { CronusThemeScript, CronusUIProvider } from "@cronus-ui/theme";
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "__APP_NAME__",
+  description: "A Next.js app built with Cronus UI.",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html
+      lang="en"
+      // CronusThemeScript mutates <html> (theme/mode/dark class) before hydration
+      // to prevent a flash of the wrong theme, so React must not warn about the
+      // resulting attribute mismatch.
+      suppressHydrationWarning
+    >
+      <head>
+        <CronusThemeScript
+          storageKey="theme"
+          defaultThemeName="__THEME__"
+          defaultModeName="__MODE__"
+        />
+      </head>
+      <body>
+        <CronusUIProvider
+          asRoot
+          defaultThemeName="__THEME__"
+          defaultModeName="__MODE__"
+          storageKey="theme"
+        >
+          {children}
+        </CronusUIProvider>
+      </body>
+    </html>
+  );
+}

package/templates/default/app/page.tsx

@@ -0,0 +1,112 @@
+import { Badge } from "@cronus-ui/ui/badge";
+import { Button } from "@cronus-ui/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@cronus-ui/ui/card";
+import { Input } from "@cronus-ui/ui/input";
+import { Metric, MetricDelta, MetricLabel, MetricValue } from "@cronus-ui/ui/metric";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@cronus-ui/ui/table";
+
+const stats = [
+  { label: "Revenue", value: "R$ 48.2k", delta: "+12.5%", trend: "up" as const },
+  { label: "Active users", value: "2,318", delta: "+4.1%", trend: "up" as const },
+  { label: "Churn", value: "1.8%", delta: "-0.3%", trend: "down" as const },
+  { label: "NPS", value: "72", delta: "+6", trend: "up" as const },
+];
+
+const orders = [
+  { id: "#1042", customer: "Ana Lima", status: "Paid", amount: "R$ 320,00" },
+  { id: "#1041", customer: "Bruno Sá", status: "Pending", amount: "R$ 89,90" },
+  { id: "#1040", customer: "Carla Reis", status: "Paid", amount: "R$ 1.249,00" },
+  { id: "#1039", customer: "Diego Melo", status: "Refunded", amount: "R$ 59,00" },
+];
+
+const statusVariant = {
+  Paid: "success",
+  Pending: "warning",
+  Refunded: "destructive",
+} as const;
+
+export default function Page() {
+  return (
+    <main className="mx-auto flex min-h-screen w-full max-w-5xl flex-col gap-8 px-6 py-12">
+      <header className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex flex-col gap-2">
+          <Badge variant="primary" className="w-fit">
+            Built with Cronus UI
+          </Badge>
+          <h1 className="text-3xl font-semibold tracking-tight text-fg">Dashboard</h1>
+          <p className="max-w-prose text-fg-secondary">
+            A starter wired with <code className="text-fg">@cronus-ui/ui</code>, tokens, and the
+            theme provider. Edit <code className="text-fg">app/page.tsx</code> to make it yours.
+          </p>
+        </div>
+        <div className="flex gap-3">
+          <Button variant="outline">Docs</Button>
+          <Button variant="primary">New project</Button>
+        </div>
+      </header>
+
+      <section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+        {stats.map((stat) => (
+          <Card key={stat.label}>
+            <CardContent className="pt-6">
+              <Metric>
+                <MetricLabel>{stat.label}</MetricLabel>
+                <MetricValue>{stat.value}</MetricValue>
+                <MetricDelta trend={stat.trend}>{stat.delta}</MetricDelta>
+              </Metric>
+            </CardContent>
+          </Card>
+        ))}
+      </section>
+
+      <section className="grid gap-6 lg:grid-cols-3">
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle>Recent orders</CardTitle>
+            <CardDescription>Latest activity across your store.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Order</TableHead>
+                  <TableHead>Customer</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead className="text-right">Amount</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {orders.map((order) => (
+                  <TableRow key={order.id}>
+                    <TableCell className="font-medium">{order.id}</TableCell>
+                    <TableCell>{order.customer}</TableCell>
+                    <TableCell>
+                      <Badge variant={statusVariant[order.status as keyof typeof statusVariant]}>
+                        {order.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-right">{order.amount}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Invite a teammate</CardTitle>
+            <CardDescription>Send an invite to collaborate.</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3">
+            <Input type="email" placeholder="name@company.com" aria-label="Teammate email" />
+            <Button className="w-full">Send invite</Button>
+            <p className="text-sm text-fg-secondary">
+              Add components anytime with <code className="text-fg">npx cronus-ui add</code>.
+            </p>
+          </CardContent>
+        </Card>
+      </section>
+    </main>
+  );
+}

package/templates/default/cronus-ui.json

@@ -0,0 +1,17 @@
+{
+  "aliases": {
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "blocks": "@/components/blocks"
+  },
+  "paths": {
+    "ui": "components/ui",
+    "lib": "lib",
+    "blocks": "components/blocks"
+  },
+  "registry": "https://raw.githubusercontent.com/pedrogbraz/cronus-ui/v0.6.0/registry",
+  "theme": {
+    "name": "__THEME__",
+    "mode": "__MODE__"
+  }
+}

package/templates/default/gitignore

@@ -0,0 +1,34 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# lockfiles (keep the one your package manager writes)
+# package-lock.json
+# pnpm-lock.yaml
+# yarn.lock
+# bun.lockb

package/templates/default/next.config.mjs

@@ -0,0 +1,11 @@
+/**
+ * @cronus-ui/ui ships ESM with its `"use client"` boundaries already in place,
+ * so no `transpilePackages` is needed when it's installed (the normal case).
+ *
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;

package/templates/default/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "__APP_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@cronus-ui/theme": "^0.6.0",
+    "@cronus-ui/tokens": "^0.6.0",
+    "@cronus-ui/ui": "^0.6.0",
+    "next": "16.2.10",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^6.0.3"
+  }
+}

package/templates/default/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/templates/default/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "ES2022"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/marketing/README.md

@@ -0,0 +1,65 @@
+# __APP_NAME__
+
+A landing site built with [Next.js](https://nextjs.org) (App Router) and
+[Cronus UI](https://www.npmjs.com/package/@cronus-ui/ui) — themeable, accessible React
+components on Tailwind v4.
+
+> **Screenshot placeholder** — run `npm run dev`, open http://localhost:3000, and drop a
+> capture here (e.g. `docs/screenshot.png`) so your repo landing page shows the site.
+
+## Getting started
+
+```sh
+npm install   # or: pnpm install / yarn / bun install
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) — the page hot-reloads as you save.
+
+## What's inside
+
+One landing page (`app/page.tsx`) composed from real sections under `components/`:
+
+| Section | File | Contents |
+| --- | --- | --- |
+| Header | `site-header.tsx` | Sticky translucent nav with anchor links and the CTA. |
+| Hero | `hero.tsx` | Announcement badge, display headline, CTAs, social proof. |
+| Features | `feature-grid.tsx` | Six capability cards with gradient icon chips. |
+| Pricing | `pricing.tsx` | Three tiers with a featured card. |
+| Testimonials | `testimonials.tsx` | Quote cards in a responsive grid. |
+| FAQ | `faq.tsx` | Single-open `Accordion`. |
+| Waitlist | `waitlist-cta.tsx` | Email capture with a joined confirmation state. |
+| Footer | `site-footer.tsx` | Brand, link columns, legal bar. |
+
+Every section is standalone — delete what you don't need, reorder freely, and swap the
+copy for your product.
+
+## How it's wired
+
+- **`app/globals.css`** imports Tailwind and the Cronus token CSS, plus the required
+  `@source "../node_modules/@cronus-ui/ui/dist/**/*.js";` line so Tailwind v4 emits the
+  component utility classes (it skips `node_modules` by default).
+- **`app/layout.tsx`** mounts `<CronusUIProvider>` and the anti-flash `<CronusThemeScript>`
+  so the right theme is applied before hydration.
+- Only `waitlist-cta.tsx` is a client component — everything else renders on the server.
+
+## Add more components
+
+This app includes a `cronus-ui.json`, so you can pull any component from the registry:
+
+```sh
+npx cronus-ui add dialog tabs marquee
+```
+
+## Scripts
+
+| Script | Description |
+| --- | --- |
+| `dev` | Start the dev server. |
+| `build` | Production build. |
+| `start` | Serve the production build. |
+
+## Learn more
+
+- [Next.js documentation](https://nextjs.org/docs)
+- [Tailwind CSS v4](https://tailwindcss.com)

package/templates/marketing/app/globals.css

@@ -0,0 +1,16 @@
+@import "tailwindcss";
+@import "@cronus-ui/tokens/styles.css";
+
+/*
+ * REQUIRED on Tailwind v4.
+ *
+ * Tailwind v4 does not scan node_modules by default, and @cronus-ui/ui ships its
+ * Tailwind class strings baked into pre-compiled JS under dist. Without the
+ * @source below, none of the component utility classes (bg-primary, rounded-lg,
+ * bg-surface-raised, …) would be emitted and the components would render
+ * unstyled.
+ */
+@source "../node_modules/@cronus-ui/ui/dist/**/*.js";
+
+/* Scan this app's own source too. */
+@source "./**/*.{ts,tsx}";

package/templates/marketing/app/layout.tsx

@@ -0,0 +1,39 @@
+import { CronusThemeScript, CronusUIProvider } from "@cronus-ui/theme";
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "__APP_NAME__",
+  description: "A landing site built with Cronus UI.",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html
+      lang="en"
+      // CronusThemeScript mutates <html> (theme/mode/dark class) before hydration
+      // to prevent a flash of the wrong theme, so React must not warn about the
+      // resulting attribute mismatch.
+      suppressHydrationWarning
+    >
+      <head>
+        <CronusThemeScript
+          storageKey="theme"
+          defaultThemeName="__THEME__"
+          defaultModeName="__MODE__"
+        />
+      </head>
+      <body>
+        <CronusUIProvider
+          asRoot
+          defaultThemeName="__THEME__"
+          defaultModeName="__MODE__"
+          storageKey="theme"
+        >
+          {children}
+        </CronusUIProvider>
+      </body>
+    </html>
+  );
+}

package/templates/marketing/app/page.tsx

@@ -0,0 +1,25 @@
+import { Faq } from "../components/faq";
+import { FeatureGrid } from "../components/feature-grid";
+import { Hero } from "../components/hero";
+import { Pricing } from "../components/pricing";
+import { SiteFooter } from "../components/site-footer";
+import { SiteHeader } from "../components/site-header";
+import { Testimonials } from "../components/testimonials";
+import { WaitlistCta } from "../components/waitlist-cta";
+
+export default function LandingPage() {
+  return (
+    <div className="min-h-screen bg-surface-base text-fg">
+      <SiteHeader />
+      <main id="main-content">
+        <Hero />
+        <FeatureGrid />
+        <Pricing />
+        <Testimonials />
+        <Faq />
+        <WaitlistCta />
+      </main>
+      <SiteFooter />
+    </div>
+  );
+}

package/templates/marketing/components/faq.tsx

@@ -0,0 +1,62 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@cronus-ui/ui/accordion";
+import { Badge } from "@cronus-ui/ui/badge";
+
+const FAQ_ITEMS = [
+  {
+    question: "What exactly do I get?",
+    answer:
+      "A production-ready product with a themeable design system underneath. Add what you need with the CLI and everything inherits your tokens, radius, and color scale automatically.",
+  },
+  {
+    question: "Does it work with my existing stack?",
+    answer:
+      "Yes. The components are React built on accessible primitives and Tailwind, so they drop into Next.js, Remix, Vite, or any modern React setup.",
+  },
+  {
+    question: "How do themes work?",
+    answer:
+      "Themes are driven entirely by CSS tokens. Swap a palette and every surface, border, and gradient updates live — no per-component overrides and no rebuild required.",
+  },
+  {
+    question: "Is everything accessible out of the box?",
+    answer:
+      "Accessibility is the default, not an add-on. Focus management, keyboard interaction, and ARIA semantics are built in, so you pass audits without a last-minute scramble.",
+  },
+  {
+    question: "Can I cancel anytime?",
+    answer:
+      "Absolutely. Plans are month-to-month with no lock-in, and anything you've already added to your codebase is yours to keep.",
+  },
+] as const;
+
+/** Single-open accordion of the questions prospects actually ask. */
+export function Faq() {
+  return (
+    <section id="faq" className="scroll-mt-16 px-6 py-20">
+      <div className="mx-auto max-w-2xl text-center">
+        <Badge variant="secondary">FAQ</Badge>
+        <h2 className="mt-4 font-display text-4xl font-semibold tracking-tight text-fg">
+          Frequently asked questions
+        </h2>
+        <p className="mt-4 text-balance text-fg-secondary">
+          Everything you need to know about the product and billing. Can&apos;t find an answer?
+          Reach out to our team.
+        </p>
+      </div>
+
+      <Accordion type="single" collapsible className="mx-auto mt-12 max-w-2xl">
+        {FAQ_ITEMS.map((item) => (
+          <AccordionItem key={item.question} value={item.question}>
+            <AccordionTrigger>{item.question}</AccordionTrigger>
+            <AccordionContent>{item.answer}</AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </section>
+  );
+}