Production-ready Next.js 15 boilerplate with Tailwind CSS v4, shadcn/ui, and TypeScript. Includes dark mode, route groups, and pre-configured layouts with modern tooling.
This skill helps you work with a production-ready Next.js 15+ boilerplate featuring Tailwind CSS v4.1, shadcn/ui components, TypeScript, and next-themes for dark mode support.
When working with this boilerplate, follow this organization:
- **`(Main)/`** - Route group with MainLayout wrapper (doesn't affect URLs)
- **`ui/`** - shadcn/ui components
- **`layouts/`** - Layout components (Header, Footer, MainLayout)
- **`theme/`** - Theme components (ThemeProvider, ModeToggle)
- **`common/`** - Shared components
Always use the `@/*` alias pointing to `src/*`:
```typescript
import { cn } from '@/lib/utils';
import { Header } from '@/components/layouts/Header';
```
This boilerplate uses a three-tier layout structure:
1. **Root Layout** (`src/app/layout.tsx`) - Wraps the entire app with ThemeProvider
2. **Main Layout** (`src/app/(Main)/layout.tsx`) - Applies MainLayout to pages in the (Main) route group
3. **MainLayout Component** (`src/components/layouts/MainLayout.tsx`) - Contains Header, main content area, and Footer
When creating new pages:
The project uses next-themes with class-based dark mode:
- `--header-height: 64px`
- `--container-max-width: 1200px`
- `--container-px: 16px`
When adding theme-aware styles:
The project is pre-configured for shadcn/ui. To add new components:
```bash
npx shadcn@latest add [component-name]
```
Components are configured to:
When using shadcn/ui components:
This boilerplate uses Tailwind CSS v4.1 with modern conventions:
When writing styles:
1. Prefer Tailwind utility classes
2. Use `cn()` for conditional/merged classes
3. Follow the 80-character line width limit
4. Let Prettier handle class sorting
Follow these conventions:
Run linting and formatting:
```bash
yarn lint # Check ESLint issues
yarn prettier # Check Prettier formatting
```
Routes are centralized in `src/constants/routes.ts`:
Standard commands:
```bash
yarn dev # Start dev server (http://localhost:3000)
yarn build # Build production bundle
yarn start # Start production server
yarn lint # Run ESLint
yarn prettier # Check code formatting
```
When building new features:
1. Create components in appropriate `src/components/` subdirectories
2. Use TypeScript for type safety
3. Follow the existing file structure and naming conventions
4. Ensure dark mode support for new UI components
5. Test in both light and dark modes
```typescript
// src/app/(Main)/about/page.tsx
export default function AboutPage() {
return (
<div className="container mx-auto px-4 py-8">
<h1 className="text-3xl font-bold dark:text-white">About Us</h1>
<p className="mt-4 text-gray-600 dark:text-gray-400">
Welcome to our application.
</p>
</div>
);
}
```
```typescript
// src/components/common/Card.tsx
import { cn } from '@/lib/utils';
interface CardProps {
children: React.ReactNode;
className?: string;
}
export function Card({ children, className }: CardProps) {
return (
<div
className={cn(
'rounded-lg border bg-white p-6 shadow-sm dark:bg-gray-800 dark:border-gray-700',
className
)}
>
{children}
</div>
);
}
```
```typescript
// src/constants/routes.ts
export const NAV_LIST = [
{ name: 'Home', href: '/' },
{ name: 'About', href: '/about' },
{ name: 'Contact', href: '/contact' }, // New link
];
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/nextjs-15-boilerplate-setup/raw