Launch your SaaS in days, not months.
A production-ready Next.js 14 starter template with landing page, dashboard, auth, pricing, and more — all beautifully designed with TailwindCSS and TypeScript.
一套开箱即用的 SaaS 启动模板，助你快速上线产品。
👆 Replace this with an actual screenshot of your project
| Feature | Description | |
|---|---|---|
| 🔐 | Authentication | Login, Register, Forgot Password with form validation |
| 💰 | Pricing Page | 3-tier pricing with monthly/yearly toggle |
| 📊 | Dashboard | Stats cards, revenue chart, recent activity feed |
| ⚙️ | Settings | Profile management, password change, billing info |
| 🎨 | Landing Page | Hero, Features, Pricing, Testimonials, FAQ, Footer — 6 polished sections |
| 🌗 | Dark / Light Mode | System-aware theme with smooth transitions |
| 📱 | Fully Responsive | Mobile-first design that looks great on every device |
| ♿ | Accessible | Semantic HTML, ARIA labels, keyboard navigation |
| ⚡ | Blazing Fast | Next.js 14 App Router with optimized performance |
| 🧩 | Modular | Clean component architecture, easy to extend and customize |
💡 Zero config needed — No environment variables, no database setup, no API keys. Clone and run.
开箱即用，无需配置数据库或 API 密钥。
# Clone the repository
git clone https://github.com/Lifa-su/saas-starter.git
cd saas-starter
# Install dependencies
npm install
# Start development server
npm run dev
# 🎉 Open http://localhost:3000That's it! You're up and running in under 60 seconds.
👉 https://lifa-su.github.io/saas-starter
| Technology | Purpose |
|---|---|
 |
React framework with App Router |
 |
Type-safe development |
 |
Utility-first CSS framework |
 |
Beautiful icon library |
 |
Conditional class names |
src/
├── app/ # Next.js App Router
│ ├── page.tsx # 🏠 Landing page
│ ├── auth/ # 🔐 Login / Register / Forgot Password
│ ├── dashboard/ # 📊 Dashboard with sidebar layout
│ ├── settings/ # ⚙️ Profile, password, billing
│ └── pricing/ # 💰 Pricing page
├── components/
│ ├── ui/ # 🧩 Reusable primitives (Button, Input, Card...)
│ ├── landing/ # 🎨 Landing sections (Hero, Features, Pricing...)
│ └── dashboard/ # 📊 Dashboard components (Sidebar, Header...)
├── hooks/ # 🪝 useAuth, useTheme
├── lib/ # 📚 Auth logic, demo data store
└── types/ # 📝 TypeScript definitions
7 pages · 14 components · Dark/Light mode · Full responsive
🎨 Change Brand Colors
Edit tailwind.config.js:
theme: {
extend: {
colors: {
primary: {
50: '#f0f4ff',
500: '#5c7cfa', // Your brand color
900: '#364fc7',
},
},
},
}🔐 Connect Real Authentication
Replace src/lib/auth.ts with your auth provider (NextAuth.js, Clerk, Supabase Auth, Firebase, etc.):
// Example with NextAuth.js
import { signIn, signOut } from 'next-auth/react'
export async function login(email: string, password: string) {
const result = await signIn('credentials', { email, password, redirect: false })
return { success: !result?.error, error: result?.error }
}💳 Add Stripe Payments
npm install stripe @stripe/stripe-jsCreate API routes in src/app/api/ and update CTA buttons in src/components/landing/Pricing.tsx.
📝 Update Content & Copy
All demo content is centralized in src/lib/store.ts — features, pricing plans, testimonials, FAQ items. One file to rule them all.
Contributions are welcome! 欢迎贡献代码！
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Please make sure to:
- Follow the existing code style
- Write meaningful commit messages
- Test your changes before submitting
If this project helped you, give it a ⭐ on GitHub — it means a lot!
如果这个项目对你有帮助，请给个 Star ⭐ 支持一下！
This project is licensed under the MIT License. Use it for anything — personal, commercial, whatever you want.
Built with ❤️ for indie hackers and startup founders.
为独立开发者和创业者而生。