A modern Next.js template with beautiful animations and a comprehensive UI component library.
- Next.js 16 - React framework with App Router
- React 19 - UI library
- HeroUI v2 - Component library
- Tailwind CSS 4 - Utility-first CSS framework
- Motion - Animation library (successor to Framer Motion)
- TypeScript 5.6 - Type safety
- Bun - Fast JavaScript runtime and package manager
- React Icons - Icon library
- next-themes - Dark mode support
stiches/
├── app/ # Next.js App Router pages
│ ├── layout.tsx # Root layout with providers
│ ├── page.tsx # Home page
│ ├── providers.tsx # Theme and UI providers
│ └── void/ # Void page
├── components/ # React components
│ └── ...
├── config/ # Configuration files
│ ├── fonts.ts # Font definitions
│ └── site.ts # Site metadata and navigation
├── consts/ # Constants
│ └── primitives.ts # tailwind variants premitives
├── public/ # Static assets
│ └──...
├── styles/ # Global styles
│ └── globals.css # Tailwind directives and custom styles
├── types/ # TypeScript type definitions
├── .env.example # Environment variables template
├── .prettierrc # Code formatting config
├── eslint.config.mjs # ESLint configuration
├── next.config.js # Next.js configuration
├── postcss.config.js # PostCSS configuration
├── tsconfig.json # TypeScript configuration
└── tailwind.config.mjs # Tailwind configuration
- Motion Animations: Smooth, performant animations with spring physics, hover effects, and keyframe animations
- React Icons: Access to 50,000+ icons from Heroicons, Font Awesome, Simple Icons, Material Design, and more
- Tailwind CSS 4: Utility-first styling with custom color scheme, responsive design, and dark mode support
- Tailwind Variants: Type-safe variant management with predefined design system primitives
- HeroUI Components: Comprehensive React component library with pre-built, accessible, theme-aware components
- Theme Support: Dark and light mode with seamless transitions using next-themes
- Type Safety: Full TypeScript coverage with strict mode
- Modern Tooling: Bun for fast installs and development
- Bun installed on your system
- Create a new project using this template:
bunx create-next-app -e https://github.com/HxX2/stiches- Copy environment variables (optional):
cp .env.example .env- Run the development server:
bun dev- Open http://localhost:3000 in your browser
bun dev- Start development serverbun build- Build for productionbun start- Start production serverbun lint- Run ESLint with auto-fix
The project uses a custom color scheme with secondary (#B10F2E) as the brand color. Modify colors in tailwind.config.mjs.
For comprehensive theme customization, use the HeroUI Theme Builder to generate a complete color palette and design system for your entire team.
Fonts are configured in config/fonts.ts. The project uses system fonts with fallbacks.
The project uses Motion for animations. Here are common patterns:
Basic animation:
import { motion } from "motion/react";
<motion.div animate={{ x: 100, opacity: 1 }} transition={{ duration: 0.5 }}>
Content
</motion.div>;See Motion documentation for advanced animations and API reference.
To add new icons from the React Icons library:
- Import the icon from the desired icon pack:
import { HiSparkles, HiBolt } from "react-icons/hi2"; // Heroicons 2
import { SiGithub, SiDocker } from "react-icons/si"; // Simple Icons
import { FaReact, FaNodeJs } from "react-icons/fa"; // Font Awesome- Use the icon component with optional props:
<HiBolt size={24} className="text-primary" />See React Icons documentation for the complete icon library.
The project uses HeroUI v2 components including:
- Navbar, Button, Card, Input
- Modal, Dropdown, Tooltip
- Badge, Avatar, Progress
- And many more...
See HeroUI documentation for full component list.
- next.config.js - Next.js configuration
- tailwind.config.mjs - Tailwind CSS customization
- tsconfig.json - TypeScript compiler options
- eslint.config.mjs - Linting rules
- .prettierrc - Code formatting rules
Licensed under the MIT license.
Contributions are welcome! Feel free to open issues or submit pull requests.