mojave Tailwind Templates

Mojave

A modern, fully-featured creative studio template built with Next.js 14, TypeScript, and Tailwind CSS

Mojave - Creative Studio Template

A modern, fully-featured creative studio template built with Next.js 14, TypeScript, and Tailwind CSS āš”ļø


Overview

Mojave is a professional creative studio template designed for agencies, freelancers, and creative professionals. Built with modern technologies and best practices, it provides everything you need to showcase your work and services effectively.

Key Features

  • šŸŽØ Modern, minimalist design
  • šŸ“± Fully responsive layout
  • šŸŒ“ Dark/light mode support
  • āš”ļø Next.js 14 App Router
  • šŸ’Ø Tailwind CSS for styling
  • šŸ”§ TypeScript for type safety
  • šŸ“ MDX support for rich content
  • šŸŽÆ SEO optimized
  • šŸ“Š Vercel Analytics integration
  • 🧩 Radix UI components
  • šŸ“‹ Form handling with react-hook-form
  • ✨ Modern animations

Quick Start

  1. Clone the repository:
git clone https://github.com/brijr/mojave.git
cd mojave
  1. Install dependencies:
pnpm install
  1. Run the development server:
pnpm dev
  1. Open http://localhost:3000 in your browser

Template Structure

mojave/
ā”œā”€ā”€ app/                # Next.js app directory
│   ā”œā”€ā”€ layout.tsx     # Root layout
│   └── page.mdx       # Home page
ā”œā”€ā”€ components/        # Reusable components
│   ā”œā”€ā”€ ui/           # UI components
│   ā”œā”€ā”€ theme/        # Theme components
│   ā”œā”€ā”€ craft.tsx     # Creative content components
│   └── portfolio.tsx # Portfolio components
ā”œā”€ā”€ lib/              # Utility functions
ā”œā”€ā”€ public/           # Static assets
└── styles/           # Global styles

Customization Guide

1. Branding & Content

  • Update site metadata in app/layout.tsx
  • Modify the home page content in app/page.mdx
  • Replace logos and images in the public directory

2. Styling

  • Customize colors and theme in tailwind.config.ts
  • Modify global styles in app/globals.css
  • Update component styles in individual component files

3. Portfolio

The portfolio section is fully customizable:

  • Edit components/portfolio.tsx to modify the portfolio grid
  • Add your projects and case studies as MDX files
  • Customize the portfolio filtering and sorting

4. Forms & Contact

The template includes pre-built form components with validation:

  • Customize form fields in the contact components
  • Update form submission handling
  • Modify success/error messages

5. Analytics

Vercel Analytics is pre-configured:

  • Add your Vercel Analytics ID in the environment variables
  • Customize tracking events
  • Access analytics in your Vercel dashboard

Development Tools

  • TypeScript for type safety
  • ESLint for code quality
  • Prettier for code formatting
  • Husky for git hooks
  • PostCSS and Autoprefixer

Performance

The template is optimized for performance:

  • Server-side rendering
  • Image optimization
  • Code splitting
  • Font optimization
  • Minimal bundle size

License

This project is licensed under the MIT License - see the LICENSE file for details.


Built by Bridger using Next.js and Tailwind CSS / Designed in the Desert šŸœļø

Top categories

Loading Svelte Themes