Skip to main content
Learn how to customize and modify your used templates to perfectly match your project needs.

​
Getting Started

After using a template, you have full access to its source code. This guide will help you understand how to modify and customize these templates effectively.

​
What You Can Customize

Visual Design

Colors, fonts, spacing, layouts, and visual elements

Content

Text, images, icons, and placeholder content

Functionality

Behavior, interactions, and business logic

Structure

Template architecture and organization

​
File Structure Overview

Most templates follow a standard structure: 
template-name/
├── src/
│   ├── components/     # Main template files
│   │   ├── Template.tsx
│   │   ├── subcomponents/
│   │   └── index.ts
│   ├── styles/        # Styling files
│   │   ├── globals.css
│   │   └── components.css
│   ├── utils/         # Helper functions
│   │   ├── helpers.ts
│   │   └── constants.ts
│   └── types/         # TypeScript definitions
├── assets/
│   ├── images/        # Template images
│   └── icons/         # Icon files
├── public/            # Static assets
├── package.json       # Dependencies
├── tailwind.config.js # Tailwind configuration
├── README.md         # Usage instructions
└── preview.html      # Template preview

​
Common Customizations

​
1. Colors & Theming

  • Tailwind CSS
  • CSS Variables
/* Update Tailwind classes */
<div className="bg-blue-500 text-white">
  <!-- Change to -->
<div className="bg-purple-500 text-white">

/* Or modify tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#your-brand-color',
        secondary: '#your-secondary-color'
      }
    }
  }
}

​
2. Content & Text

Replace placeholder content with your own: 
// Before
<h1>Sample Heading</h1>
<p>Lorem ipsum placeholder text...</p>

// After
<h1>Your Actual Heading</h1>
<p>Your real content goes here...</p>

// For dynamic content
const content = {
  heading: "Your Dynamic Heading",
  description: "Your dynamic description"
}

<h1>{content.heading}</h1>
<p>{content.description}</p>

​
3. Images & Assets

1

Replace Images

Add your images to the /assets/images/ folder
2

Update References

Update image imports and src attributes
3

Optimize Images

Ensure images are optimized for web use
// Update image imports
import yourImage from '../assets/images/your-image.jpg'

// Update image usage
<img src={yourImage} alt="Your description" />

// For Next.js Image component
import Image from 'next/image'
<Image src={yourImage} alt="Your description" width={400} height={300} />

​
4. Layout & Structure

Modify template layouts: 
// Change from flex row to column
<div className="flex flex-row items-center">
  <!-- to -->
<div className="flex flex-col items-center">

// Update grid layouts
<div className="grid grid-cols-3 gap-4">
  <!-- to -->
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6">

// Modify spacing
<div className="p-4 m-2">
  <!-- to -->
<div className="p-8 m-4">

​
Advanced Customizations

​
Adding New Features

// Add state for interactions
const [isOpen, setIsOpen] = useState(false)
const [formData, setFormData] = useState({})

// Add event handlers
const handleClick = () => {
  setIsOpen(!isOpen)
}

const handleSubmit = (e) => {
  e.preventDefault()
  // Your form logic
}

// Add API calls
useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch('/api/your-endpoint')
      const data = await response.json()
      setData(data)
    } catch (error) {
      console.error('Error fetching data:', error)
    }
  }

  fetchData()
}, [])

// Extend template props
interface TemplateProps {
  title: string
  description?: string
  variant?: 'primary' | 'secondary'
  onAction?: () => void
  // Add your new props
  showIcon?: boolean
  customClass?: string
}

export function Template({
  title,
  description,
  variant = 'primary',
  onAction,
  showIcon = true,
  customClass
}: TemplateProps) {
  // Template logic
}

​
Framework-Specific Guides

  • React/Next.js
  • Vue/Nuxt
  • HTML/Vanilla JS
  • Use React hooks for state management
  • Leverage Next.js features like Image optimization
  • Add TypeScript types for better development
  • Use React patterns like compound components

​
Best Practices

​
Code Organization

Keep Original Structure

Maintain the template’s architecture to preserve functionality

Create Backup

Keep a copy of the original files before making major changes

Use Version Control

Use Git to track your changes and create branches for experiments

Document Changes

Keep notes of your customizations for future reference

​
Testing Your Changes

1

Test Locally

Always test changes in development before deploying
2

Check Responsiveness

Verify your changes work on different screen sizes
3

Browser Testing

Test in different browsers to ensure compatibility
4

Performance Check

Monitor performance impact of your modifications

​
Common Issues & Solutions

  • Check CSS specificity conflicts
  • Ensure Tailwind classes are valid
  • Verify CSS imports are correct
  • Check for typos in class names
  • Verify image paths are correct
  • Check image files are in the right directory
  • Ensure proper imports for bundled assets
  • Validate image file formats
  • Check for JavaScript errors in console
  • Verify all imports are correct
  • Ensure dependencies are installed
  • Check template prop requirements
  • Review breakpoint classes
  • Test on actual devices
  • Check viewport meta tag
  • Validate CSS media queries

​
Getting Help

Community Discord

Join our Discord for community help and tips

Template Documentation

Check the README.md file included with each template

Contact Creator

Reach out to the template creator for specific guidance

​
Next Steps

Once you’ve customized your template:
  1. Deploy: Deploy your customized template to production
  2. Share: Consider sharing your improvements with the community
  3. Iterate: Continue refining based on user feedback
  4. Scale: Apply learnings to other templates
Ready to start customizing? Download your used templates from My Templates and begin making them your own!
⌘I