Instantly scaffold a professional Next.js project
Built-in TailwindCSS · shadcn/ui · Themes · ESLint · TypeScript
- Overview
- Features
- Requirements
- Quick Start
- Usage
- Configuration
- Project Structure
- Contributing
- License
- Author
- Roadmap
create-next-vault is a powerful CLI tool that scaffolds a fully configured Next.js project with modern tooling and best practices pre-wired. Skip the tedious setup and start building your application immediately with a production-ready foundation.
Perfect for developers who want to:
- 🚀 Get started with Next.js quickly
- 🎨 Use TailwindCSS with zero configuration
- 🧱 Leverage shadcn/ui components
- 🌓 Implement dark/light theme support
- 💫 Add smooth animations with Framer Motion
- 🧹 Maintain code quality with ESLint and Prettier
- ⚡ Next.js 14+ with TypeScript — Latest Next.js with App Router and TypeScript preconfigured
- 🎨 TailwindCSS — Utility-first CSS framework ready to use
- 🧱 shadcn/ui — Beautiful, accessible UI components built with Radix UI
- 🌗 Theme Support — Dark/light theme switching via
next-themes - 💫 Framer Motion (optional) — Smooth animations and transitions
- 🧹 ESLint + Prettier — Code formatting and linting configured
- 🪄 Git Auto-Init — Optional Git repository initialization with initial commit
- ✅ App Router — Uses Next.js 13+ App Router by default
- ✅ TypeScript — Full TypeScript support out of the box
- ✅ Modern Tooling — Latest versions of all dependencies
- ✅ Best Practices — Follows Next.js and React best practices
- ✅ Accessibility — shadcn/ui components are built with accessibility in mind
Before using create-next-vault, ensure you have the following installed:
- Node.js ≥ 18 (LTS version recommended)
- npm, pnpm, or yarn package manager
- Git (optional, for version control)
Create a new Next.js project in seconds:
npx create-next-vault my-next-app
cd my-next-app
npm run devThat's it! Your development server will be running at http://localhost:3000.
When you run create-next-vault, you'll be prompted with several options:
- Project Name — Name of your project (default:
my-next-app) - Add shadcn/ui components? — Install and configure shadcn/ui (default:
yes) - Add dark/light theme support? — Set up
next-themesfor theme switching (default:yes) - Add framer-motion animations? — Install Framer Motion for animations (default:
no) - Initialize git repository? — Create a Git repo and make an initial commit (default:
yes)
$ npx create-next-vault my-awesome-app
📁 Project name: my-awesome-app
🧱 Add shadcn/ui components? Yes
🌓 Add dark/light theme support? Yes
💫 Add framer-motion animations? No
🪄 Initialize git repository? Yes
🚀 Creating Next.js project...
✅ Next.js project created.
🎨 Installing Tailwind CSS...
✅ TailwindCSS installed.
🧩 Installing extra dependencies...
✅ Extra dependencies installed.
🧱 Setting up shadcn/ui...
✅ shadcn/ui initialized.
🪄 Initializing git...
✅ Git repository initialized.
✅ Project "my-awesome-app" created successfully!
Next steps:
cd my-awesome-app
npm run dev
✨ Happy hacking with Next Vault!TailwindCSS is automatically configured with the following content paths:
./app/**/*.{js,ts,jsx,tsx,mdx}./pages/**/*.{js,ts,jsx,tsx,mdx}./components/**/*.{js,ts,jsx,tsx,mdx}
If you enabled theme support, the Providers component is automatically added to your root layout. You can use it in your components:
"use client";
import { useTheme } from "next-themes";
export function ThemeToggle() {
const { theme, setTheme } = useTheme();
return (
<button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
Toggle theme
</button>
);
}After initialization, you can add shadcn/ui components:
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialogVisit the shadcn/ui documentation for more components.
After scaffolding, your project will have the following structure:
my-next-app/
├── app/
│ ├── layout.tsx # Root layout with Providers (if theme enabled)
│ ├── page.tsx # Home page
│ ├── globals.css # Global styles with Tailwind
│ └── providers.tsx # Theme provider (if theme enabled)
├── components/ # Your React components
├── public/ # Static assets
├── tailwind.config.js # Tailwind configuration
├── tsconfig.json # TypeScript configuration
├── next.config.js # Next.js configuration
└── package.json # Dependencies
Contributions are welcome and greatly appreciated! Here's how you can help:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Make your changes
- Commit your changes
git commit -m "Add some amazing feature" - Push to the branch
git push origin feature/amazing-feature
- Open a Pull Request
- Follow the existing code style
- Add tests for new features (if applicable)
- Update documentation as needed
- Ensure all tests pass
- Be respectful and constructive in discussions
If you find a bug or have a suggestion, please open an issue on GitHub.
This project is licensed under the MIT License - see the LICENSE file for details.
Omkar Bagul
- 🌐 GitHub: @youknowom
- 💼 LinkedIn: Omkar Bagul
- 📧 Email: youknowom@users.noreply.github.com
If you find this project useful, consider supporting its development on GitHub Sponsors.
Your support helps fund:
- ✨ New features and improvements
- 🐛 Bug fixes and maintenance
- 📚 Documentation updates
- 🧪 Testing and CI/CD
- 🚀
--fastflag for instant, non-interactive setup - 📦 Option to use
pnpmorbunfor faster installs - 🎨 Pre-configured theme presets
- 📱 Mobile-first component templates
- 🔌 Plugin system for extensibility
- 🌐 Internationalization (i18n) support
- 🧪 Testing setup (Jest, Vitest, or Playwright)
- 🔐 Authentication templates
- 💾 Database integration examples
- 🚀 Deployment configurations
- 📊 Analytics integration
- 🎯 Performance optimizations
- Next.js for the amazing framework
- TailwindCSS for the utility-first CSS
- shadcn/ui for the beautiful components
- next-themes for theme support
- Framer Motion for animations
Made with ❤️ by Omkar Bagul
⭐ Star this repo if you find it helpful!