Vanilla Stack is a Next.js web starter template for personal use that ships an example website rebuilt from scratch as a vanilla-extract implementation of Tailwind UI's Salient template, orchestrated as a Turborepo monorepo.
What is Vanilla Stack?
Vanilla Stack is a Next.js web starter template for personal use. It takes a GitHub repository URL as its bootstrap input through the npx create-next-app@latest -e [github-url] command and produces a TypeScript monorepo containing a Next.js web app, an ESLint configuration package, shared TypeScript configs, and a Storybook integration. The project is managed with Turborepo and npm, and every package is 100% TypeScript. The starter includes an example website template that is rebuilt from scratch and based on Tailwind UI's template "Salient".
What makes Vanilla Stack stand out?
Vanilla Stack stands out by implementing a Tailwind UI design without Tailwind, using vanilla-extract instead, and by packaging the whole project as a typed Turborepo monorepo with Storybook included.
- vanilla-extract styling — The
webapp uses vanilla-extract for CSS-in-TypeScript styling, so the Salient-based design is implemented without Tailwind CSS. - Storybook integration — The
webpackage includes Storybook, started withnpm run storybook, alongside the Next.js dev server started withnpm run dev. - Turborepo monorepo — The repository is split into
web,eslint-config-custom, andtsconfigpackages, all orchestrated by Turborepo and npm. - 100% TypeScript — Every app and package in the monorepo is written in TypeScript, with shared
tsconfig.jsonfiles used throughout. - Ready-made linting and formatting — ESLint is preconfigured in
eslint-config-customwitheslint-config-nextandeslint-config-prettier, and Prettier handles code formatting. - Design references — The visual system draws from Shopify Polaris, Material Design 3, Open Props, and Utopia Fluid Responsive Design.
- Single-command bootstrap — The whole starter scaffolds with
npx create-next-app@latest -e [github-url].
Who is it for?
Vanilla Stack is aimed at developers and designers who want a personal-use Next.js starter with a prebuilt layout and a modern toolchain.
- Individual developers — spin up a personal Next.js site with a prebuilt example landing page and a clean monorepo layout.
- Developers learning vanilla-extract — study a working integration of vanilla-extract, Storybook, TypeScript, and Next.js in one project.
- Turborepo beginners — see a minimal monorepo where a web app, ESLint config, and tsconfig package are separated and built together with
npm run build. - Frontend designers — inspect a from-scratch rebuild of Tailwind UI's Salient landing page and compare how the same visual design is expressed with vanilla-extract.
What can you do with Vanilla Stack?
The template supports a complete workflow from scaffolding to build through the commands documented in the repository.
- Scaffold a new project — run
npx create-next-app@latest -e [github-url]to generate the full monorepo from the template. - Develop the web app — run
npm run devin thewebapp to serve the example website locally. - Work on components in isolation — run
npm run storybookto open the Storybook instance and iterate on UI components. - Build everything — run
npm run buildto build all apps and packages through Turborepo in one pass.
How does Vanilla Stack work?
The template is bootstrapped with npx create-next-app@latest -e [github-url], which clones the starter and installs its npm dependencies. Development happens through two commands: npm run dev for the Next.js app and npm run storybook for component previews. All apps and packages build together with npm run build.
Pricing
Free — the repository states there is no confusing license; the code is free to use as inspiration, with the author requesting that you do not copy it directly and that you credit the author or resource.
Alternatives
- create-t3-app — an opinionated Next.js starter that bundles tRPC, Prisma, Tailwind, and NextAuth.
- Tailwind UI Salient — the paid Tailwind CSS template this starter rebuilds from scratch in vanilla-extract.
FAQ
Is Vanilla Stack free to use?
The repository states there is no confusing license: the code is free to use as inspiration, but the author asks that you do not copy it directly and that you credit the author or resource if you use it.
Does Vanilla Stack use Tailwind CSS?
No. Although the example website is based on Tailwind UI's Salient template, the styling is implemented from scratch with vanilla-extract, a CSS-in-TypeScript library, rather than Tailwind CSS. The vanilla-extract integration is a core part of the web app.
How do I start a new project from Vanilla Stack?
Run npx create-next-app@latest -e [github-url] in your terminal, replacing [github-url] with the repository URL. This scaffolds the full Turborepo monorepo, including the web app, eslint-config-custom, and tsconfig packages, and installs npm dependencies.
What packages are inside the monorepo?
The monorepo contains three packages: web, a Next.js app with Storybook and vanilla-extract integration; eslint-config-custom, which bundles eslint-config-next and eslint-config-prettier; and tsconfig, which holds shared TypeScript configurations used across the repository.
