npm package: @majordigital/create-acorn
Description: Interactive starter CLI for Acorn with Storyblok/Prismic/DatoCMS, TypeScript, and Tailwind.
Latest version: 1.5.8

# @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

```bash
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
```

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

The Acorn library follows a layered component hierarchy designed for consistency and reuse across projects:

```
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/
    ├── elements/     # Atomic building blocks (Button, Chip, Tooltip, form inputs, typography)
    ├── components/   # Composed features (Nav, Card, Accordion, CTA, Quote, ContactForm)
    ├── layout/       # Structural wrappers (Container, PageSection)
    └── sections/     # Full-width page regions (Header, Footer)
```

## 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 |

## Non-Interactive Usage

For CI pipelines or scripted setups:

```bash
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
```

## 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

[![npm version](https://img.shields.io/npm/v/@majordigital/create-acorn)](https://www.npmjs.com/package/@majordigital/create-acorn)

Published at [@majordigital/create-acorn](https://www.npmjs.com/package/@majordigital/create-acorn)

## Changelog

See [CHANGELOG.md](CHANGELOG.md) for a full release history.