@majordigital/create-acorn

Create Acorn is Major Digital's production-ready starter CLI for building headless CMS websites with Next.js 15 and the Acorn component system.

It eliminates the repetitive setup that comes with every new project — framework configuration, CMS integration, linting, commit conventions, and a full UI component library — so your team can skip straight to building.

Quick Start

npx @majordigital/create-acorn@latest

Note: Always use npx to run the CLI. Do not use npm install — this is a starter tool, not a library dependency.

The CLI prompts you for a project name, creates the directory, then walks you through selecting a headless CMS — generating a complete, opinionated project in seconds.

? What is the name of your project? (my-acorn-app)
? Which headless CMS would you like to use?
  1) Prismic
  2) Storyblok
  3) Dato
  4) No CMS

The project name is also used as the default CMS space/repository name.

What's Inside

Every Acorn project ships with a carefully curated stack:

• Next.js 15 — App Router, TypeScript, Tailwind CSS, and Turbopack
• Acorn Component Library — A battle-tested set of UI primitives, layout systems, and page sections built for Major Digital's design language
• Headless CMS Integration — First-class support for Prismic, Storyblok, and DatoCMS with pre-configured SDKs and environment templates
• Biome — Fast, unified linting and formatting with custom rules for React, Next.js, and Tailwind class sorting
• Lefthook + Commitlint — Pre-commit quality gates and conventional commit enforcement out of the box
• SVG-as-components — Inline SVG imports via @svgr/webpack for both Webpack and Turbopack
• Bundle Analysis — @next/bundle-analyzer ready to go with ANALYZE=true

Acorn Component Architecture

Acorn follows the atomic-design hierarchy defined in the MAJOR Engineering Handbook (Standards → Component Naming). Things lower in the list are composed by things higher: Atoms → Elements → Components → Sections → Templates, wrapped by Layouts.

src/
├── app/              # Next.js App Router (layout, pages, not-found, robots, sitemap)
├── icons/            # SVG assets imported as React components
├── lib/              # Utilities, fonts, config, metadata helpers, caching
├── styles/           # Global CSS and Tailwind directives
├── types/            # TypeScript definitions and SVG module declarations
└── ui/
    ├── atom/         # Indivisible primitives (Button, H, P, BlockQuote, Pill, Input, Textarea)
    ├── element/      # Single-purpose units composed of atoms (Card, Quote, Tooltip, Form, Container)
    ├── component/    # Editor-inserted blocks with logic (Accordion, Breadcrumbs, Pagination, CTA, ContactForm)
    ├── section/      # Full-width page bands (Section)
    ├── template/     # Page-level templates, one per content type (TemplatePage)
    └── layout/       # Route shells and chrome — master/ holds LayoutMaster, Header, Nav, Footer

Every generated project also ships repo-setup essentials from the handbook toolkit: .nvmrc, .github/workflows/{ci,mira}.yml, PULL_REQUEST_TEMPLATE.md, dependabot.yml, and CODEOWNERS.

Supported CMS Platforms

| CMS | Status | Setup | |-----|--------|-------| | Prismic | Full integration | Slice Machine init, repository connection, slicemachine script | | Storyblok | Full integration | Environment template, component generation support | | DatoCMS | Full integration | Environment template, API token configuration | | No CMS | Base scaffold only | Next.js 15 + Acorn components and tooling — no CMS wiring |

Non-Interactive Usage

For CI pipelines or scripted setups:

npx @majordigital/create-acorn@latest --name my-project --cms prismic --repo my-repo
npx @majordigital/create-acorn@latest --name my-project --cms storyblok
npx @majordigital/create-acorn@latest --name my-project --cms dato
npx @majordigital/create-acorn@latest --name my-project --cms none

Passing --cms runs non-interactively (no prompts).

Generated Project Files

Beyond the component library, every project includes:

| File | Purpose | |------|---------| | biome.jsonc | Linting, formatting, and import organisation rules | | lefthook.yml | Pre-commit checks and commit message validation | | commitlint.config.ts | Conventional commit enforcement | | next.config.ts | SVG loader, bundle analyser, image remote patterns | | postcss.config.js | Tailwind CSS and Autoprefixer | | tsconfig.json | TypeScript with @/* path aliases | | .env.example | CMS-specific environment variable template | | .npmrc | Legacy peer deps for React 19 compatibility | | README.md | Project-specific documentation based on CMS choice |

npm

Published at @majordigital/create-acorn

Changelog

See CHANGELOG.md for a full release history.