Stiches

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

1. Create a new project using this template:

bunx create-next-app -e https://github.com/HxX2/stiches

2. Copy environment variables (optional):

cp .env.example .env

3. Run the development server:

bun dev

4. Open http://localhost:3000 in your browser

• bun dev - Start development server
• bun build - Build for production
• bun start - Start production server
• bun 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:

1. 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

2. 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.

• GitHub Repository
• Next.js Documentation
• HeroUI Documentation
• Tailwind CSS Documentation
• Bun Documentation
• React Icons
• Motion Documentation
• TypeScript Documentation