Extensions
Extensions are modular add-ons you apply on top of a template to layer in additional features — UI libraries, state management, testing setups, and more.
What is an extension?
An extension is a self-contained package that adds files, dependencies, and scripts to a scaffolded project. Extensions are composable: you can apply multiple compatible extensions in a single command and they are merged intelligently.
Each extension declares which template types it is compatible with (e.g. react, nestjs-backend), so the CLI only shows you relevant options for your chosen template.
npx create-awesome-node-app my-app --template react-vite-boilerplate --addons react-zustand react-tailwindcss react-testing-library-with-vitestExtension categories
Extensions are organized into 12 categories covering the most common project needs.
- · Material UI
- · Tailwind CSS
- · Shadcn/UI
- · Semantic UI
- · Mantine
- · Zustand
- · Redux Toolkit
- · Recoil
- · Jotai
- · Vitest + Testing Library
- · Jest + Testing Library
- · Playwright
- · Drizzle + PostgreSQL
- · Drizzle + SQLite
- · Mongoose
- · Prisma
- · React Query
- · Apollo Client
- · SWR
- · tRPC
- · NextAuth.js
- · Clerk
- · Auth0
- · Supabase Auth
- · Storybook
- · GitHub Setup
- · Million.js
- · Electron
- · Vercel
- · Docker
- · GitHub Actions
- · Serverless
- · Sentry
- · OpenTelemetry
- · Datadog
- · LogRocket
- · i18next
- · react-intl
- · next-intl
- · Lingui
- · Axios
- · Ky
- · OpenAPI Generator
- · GraphQL Codegen
- · Electron
- · Tauri
- · Capacitor
- · React Native Web
Choosing a styling extension
Pick the styling model that fits how your team works. Tailwind provides utility classes in markup; StyleX provides typed styles that compile to atomic CSS during the build.
Use Tailwind when you want to compose styles in markup and use the existing Tailwind utility and plugin ecosystem. Browse the React Vite and Next.js extensions.
Use StyleX when you want style definitions checked in TypeScript and compiled into atomic CSS. The React Vite integration registers its Vite plugin before React to preserve Fast Refresh; the Next.js integration uses Babel and PostCSS. See the React Vite and Next.js guides. Turbopack supports the Babel and PostCSS setup in Next.js 16 and later; use Webpack with earlier versions. See the Next.js compatibility table.
Using StyleX and Tailwind together in Next.js
The extensions can be combined. Keep @stylexjs/postcss-plugin before @tailwindcss/postcss and autoprefixer in the generated config.plugins map. The addons preserve this order whichever is selected first, and the base PostCSS config is applied before their additions. Keep each extension's config contribution and avoid assigning the same visual property to both systems on one component. The combined setup passed lint, type-check, and production build; see the validation details.
How extensions work
When the CLI applies an extension it performs a deep merge of the extension's files and package.json fields into the scaffolded project:
- Files — source files from the extension are copied or appended to the project. Filenames ending in
.templateare processed as EJS templates before being written. - Dependencies —
package/dependencies.jsandpackage/devDependencies.jsentries are merged into the project'spackage.json. - Scripts — any
scriptsdefined by the extension are merged with existing scripts. - Incompatibilities — extensions declare
incompatibleWithslugs so the CLI prevents conflicting combinations (e.g. two different test runners).
Extension file structure
Extensions live in the extensions/ directory of the cna-templates repository:
extensions/
└── your-extension-name/
├── [src]/ # Source files merged into the project's src/
├── package/
│ ├── dependencies.js # Runtime deps to add
│ └── devDependencies.js # Dev deps to add
├── package.json # Extension metadata
└── README.mdListing available extensions
npx create-awesome-node-app --list-addonsOr browse the full catalogue on the Extensions page, where you can filter by template type and category.