Learn how to customize and modify your purchased components to perfectly match your project needs.

​
Getting Started

After purchasing a component, you have full access to its source code. This guide will help you understand how to modify and customize these components 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

Component architecture and organization

​
File Structure Overview

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

​
Common Customizations

​
1. Colors & Theming

/* 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 component 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 component props
interface ComponentProps {
  title: string
  description?: string
  variant?: 'primary' | 'secondary'
  onAction?: () => void
  // Add your new props
  showIcon?: boolean
  customClass?: string
}

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

​
Framework-Specific Guides

  • 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 component’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 component 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

Component Documentation

Check the README.md file included with each component

Contact Creator

Reach out to the component creator for specific guidance

​
Next Steps

Once you’ve customized your component:
  1. Deploy: Deploy your customized component 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 components
Ready to start customizing? Download your purchased components from My Purchases and begin making them your own!