Drag-and-drop page builder with ready-to-use components and templates for
React
|
, and more.
Built with Tailwind CSS, fully responsive with RTL support and professional templates.
From visual design to production-ready code, WavyKits provides the complete toolkit for modern web development. Build faster, ship cleaner code, and scale your projects with our integrated platform designed specifically for developers who value quality and efficiency.
Design beautiful layouts visually and export clean Tailwind CSS + Alpine.js code. No more wrestling with CSS—just focus on creating the perfect user experience.
Professional templates available in React, Vue, Angular, and more. Same great design, adapted for your preferred framework. Launch faster with battle-tested layouts.
Extensive library of pre-built components across multiple frameworks. Copy, customize, and integrate seamlessly into your projects. Consistent design, maximum flexibility.
Full right-to-left language support built into all components and templates. Create websites for all the RTL languages without additional configuration or custom CSS.
Built-in SEO analyzer scores your content and suggests improvements. Optimize for search engines without leaving the builder. Better rankings, more organic traffic.
WavyKits's Tailwind page builder exports websites as clean HTML, Alpine.js, and Tailwind CSS.
Join thousands of developers who are already building faster with WavyKits
From concept to deployment in minutes, not hours. Our streamlined workflow lets you build professional websites without writing a single line of code.
Browse our extensive library of professional templates and components available in React, Vue, Angular, and Svelte. Each template is fully responsive and includes RTL support for global projects. Filter by category, framework, or industry to find the perfect foundation for your project. Preview designs instantly and select what matches your vision.
Drag, drop, and customize using our intuitive visual page builder. Modify layouts, swap components, adjust colors, and fine-tune spacing without touching code. Real-time preview shows exactly how your site will look across desktop, tablet, and mobile devices.
Never worry about SEO again with our intelligent built-in analyzer. Get real-time SEO scores as you build, with specific suggestions to improve your content, meta tags, and page structure. Our SEO tool guides you through optimizing titles, descriptions, headings, and image alt text. Launch with confidence knowing your site is search engine ready from day one.
Experience the quality of our Tailwind CSS components firsthand. Upload your own images to this interactive file uploader component and watch how it handles real content. On the right, you'll see the actual clean, production-ready code that powers this component. Every Wavykits component comes with the same attention to detail—beautiful design paired with maintainable code that developers love to work with.
JPG, PNG, GIF, WebP supported
<div class="relative z-10 flex items-center justify-center h-full p-8">
<div class="max-w-4xl w-full">
<!-- Main Upload Area -->
<div class="bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 p-6 shadow-2xl animate-scale-in">
<!-- Upload Zone -->
<div id="dropZone" class="border-2 border-dashed border-blue-300/50 rounded-xl p-8 text-center transition-all duration-500 hover:border-blue-400/80 hover:bg-blue-500/10 cursor-pointer min-h-96 relative group hover:shadow-xl hover:shadow-blue-500/20">
<input type="file" id="fileInput" class="hidden" multiple accept="image/*" required>
<!-- Empty State -->
<div id="emptyState" class="flex flex-col items-center justify-center h-full animate-bounce-gentle">
<div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-blue-700 rounded-full flex items-center justify-center mb-6 shadow-lg animate-pulse-glow">
<svg class="w-10 h-10 text-white drop-shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
</div>
<h3 class="text-2xl font-semibold text-blue-600 mb-3 animate-fade-in-up">Drop your images here</h3>
<p class="text-blue-200 mb-6 animate-fade-in-up-delay">JPG, PNG, GIF, WebP supported</p>
<button class="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-blue-500/50 animate-fade-in-final">
Select Images
</button>
</div>
<!-- Images Container -->
<div id="imageContainer" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 hidden">
<!-- Images will be inserted here -->
</div>
<!-- Add More Button -->
<button id="addMoreBtn" class="hidden absolute top-4 right-4 bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full transition-all duration-300 transform hover:scale-110 shadow-lg hover:shadow-blue-500/50 animate-float">
<svg class="w-6 h-6 drop-shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
</svg>
</button>
</div>
<!-- Action Buttons -->
<div id="actionButtons" class="hidden mt-6 flex justify-between items-center animate-slide-up">
<button id="clearAll" class="text-red-400 hover:text-red-300 transition-all duration-300 flex items-center space-x-2 hover:bg-red-500/10 px-4 py-2 rounded-lg transform hover:scale-105">
<svg class="w-5 h-5 drop-shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
</svg>
<span>Clear All</span>
</button>
<button id="uploadBtn" class="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-blue-500/50">
Upload Images
</button>
</div>
<!-- Upload Progress -->
<div id="uploadProgress" class="hidden mt-6 animate-fade-in">
<div class="flex items-center justify-between mb-3">
<span class="text-white font-medium">Uploading images...</span>
<span id="progressText" class="text-blue-200 font-semibold">0%</span>
</div>
<div class="w-full bg-white/20 rounded-full h-3 overflow-hidden">
<div id="progressBar" class="h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full transition-all duration-500 w-0 shadow-lg animate-pulse-glow"></div>
</div>
</div>
<!-- Error Message -->
<div id="errorMessage" class="hidden mt-4 p-4 bg-red-500/20 border border-red-500/50 rounded-lg animate-shake">
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<span class="text-red-300 font-medium" id="errorText"></span>
</div>
</div>
</div>
</div>
</div>
<script>
let selectedFiles = [];
let draggedElement = null;
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('fileInput');
const emptyState = document.getElementById('emptyState');
const imageContainer = document.getElementById('imageContainer');
const addMoreBtn = document.getElementById('addMoreBtn');
const actionButtons = document.getElementById('actionButtons');
const clearAllBtn = document.getElementById('clearAll');
const uploadBtn = document.getElementById('uploadBtn');
const uploadProgress = document.getElementById('uploadProgress');
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
const errorMessage = document.getElementById('errorMessage');
const errorText = document.getElementById('errorText');
// Security: Only accept images
const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'];
const maxFileSize = 10 * 1024 * 1024; // 10MB per file
const maxFiles = 20; // Maximum 20 files
// Click to select files
dropZone.addEventListener('click', (e) => {
if (e.target.closest('#addMoreBtn') || e.target.closest('.image-item')) return;
fileInput.click();
});
addMoreBtn.addEventListener('click', (e) => {
e.stopPropagation();
fileInput.click();
});
// Enhanced drag and drop with security
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
if (!e.dataTransfer.types.includes('Files')) return;
dropZone.classList.add('border-blue-400/80', 'bg-blue-500/20', 'shadow-xl', 'shadow-blue-500/30');
});
dropZone.addEventListener('dragleave', (e) => {
e.preventDefault();
if (e.relatedTarget && dropZone.contains(e.relatedTarget)) return;
dropZone.classList.remove('border-blue-400/80', 'bg-blue-500/20', 'shadow-xl', 'shadow-blue-500/30');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('border-blue-400/80', 'bg-blue-500/20', 'shadow-xl', 'shadow-blue-500/30');
if (e.dataTransfer.files.length > 0) {
const files = Array.from(e.dataTransfer.files);
handleFiles(files);
}
});
fileInput.addEventListener('change', (e) => {
const files = Array.from(e.target.files);
handleFiles(files);
});
function handleFiles(files) {
hideError();
// Security validation
const validationResult = validateFiles(files);
if (!validationResult.valid) {
showError(validationResult.message);
return;
}
files.forEach(file => {
if (!selectedFiles.some(f => f.name === file.name && f.size === file.size)) {
selectedFiles.push(file);
}
});
displayFiles();
}
function validateFiles(files) {
// Check file count
if (selectedFiles.length + files.length > maxFiles) {
return { valid: false, message: `Maximum ${maxFiles} files allowed` };
}
// Check each file
for (let file of files) {
// Check file type
if (!allowedTypes.includes(file.type.toLowerCase())) {
return { valid: false, message: `Only image files are allowed (JPG, PNG, GIF, WebP, SVG)` };
}
// Check file size
if (file.size > maxFileSize) {
return { valid: false, message: `File "${file.name}" is too large. Maximum size is 10MB` };
}
// Check file name for security
if (file.name.includes('../') || file.name.includes('..\\')) {
return { valid: false, message: `Invalid file name: "${file.name}"` };
}
}
return { valid: true };
}
function displayFiles() {
if (selectedFiles.length > 0) {
emptyState.classList.add('hidden');
imageContainer.classList.remove('hidden');
addMoreBtn.classList.remove('hidden');
actionButtons.classList.remove('hidden');
imageContainer.innerHTML = '';
selectedFiles.forEach((file, index) => {
const imageItem = createImageItem(file, index);
imageContainer.appendChild(imageItem);
});
} else {
emptyState.classList.remove('hidden');
imageContainer.classList.add('hidden');
addMoreBtn.classList.add('hidden');
actionButtons.classList.add('hidden');
}
}
function createImageItem(file, index) {
const div = document.createElement('div');
div.className = 'image-item relative bg-white/10 rounded-xl overflow-hidden cursor-move group border-2 border-transparent hover:border-blue-400/80 transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30 animate-scale-in';
div.draggable = true;
div.dataset.index = index;
div.style.animationDelay = `${index * 0.1}s`;
const img = document.createElement('img');
img.className = 'w-full h-32 object-cover transition-transform duration-300 group-hover:scale-110';
const reader = new FileReader();
reader.onload = (e) => {
img.src = e.target.result;
};
reader.readAsDataURL(file);
const overlay = document.createElement('div');
overlay.className = 'absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center backdrop-blur-sm';
const removeBtn = document.createElement('button');
removeBtn.className = 'bg-red-500/80 hover:bg-red-600 text-white p-2 rounded-full transition-all duration-200 transform hover:scale-110 shadow-lg glow-icon';
removeBtn.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>';
removeBtn.onclick = (e) => {
e.stopPropagation();
removeFile(index);
};
const fileName = document.createElement('div');
fileName.className = 'absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent text-white text-xs p-3 truncate';
fileName.textContent = file.name;
// Drag indicator
const dragIndicator = document.createElement('div');
dragIndicator.className = 'absolute top-2 right-2 text-white/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300';
dragIndicator.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>';
overlay.appendChild(removeBtn);
div.appendChild(img);
div.appendChild(overlay);
div.appendChild(fileName);
div.appendChild(dragIndicator);
// Enhanced drag events
div.addEventListener('dragstart', (e) => {
draggedElement = div;
div.classList.add('opacity-50', 'scale-95');
});
div.addEventListener('dragend', (e) => {
div.classList.remove('opacity-50', 'scale-95');
draggedElement = null;
});
div.addEventListener('dragover', (e) => {
e.preventDefault();
if (draggedElement && draggedElement !== div) {
div.classList.add('ring-2', 'ring-blue-400', 'ring-opacity-50');
}
});
div.addEventListener('dragleave', (e) => {
div.classList.remove('ring-2', 'ring-blue-400', 'ring-opacity-50');
});
div.addEventListener('drop', (e) => {
e.preventDefault();
div.classList.remove('ring-2', 'ring-blue-400', 'ring-opacity-50');
if (draggedElement && draggedElement !== div) {
const draggedIndex = parseInt(draggedElement.dataset.index);
const targetIndex = parseInt(div.dataset.index);
// Reorder files
const draggedFile = selectedFiles[draggedIndex];
selectedFiles.splice(draggedIndex, 1);
selectedFiles.splice(targetIndex, 0, draggedFile);
displayFiles();
}
});
return div;
}
function removeFile(index) {
selectedFiles.splice(index, 1);
displayFiles();
}
function showError(message) {
errorText.textContent = message;
errorMessage.classList.remove('hidden');
setTimeout(() => hideError(), 5000);
}
function hideError() {
errorMessage.classList.add('hidden');
}
clearAllBtn.addEventListener('click', () => {
selectedFiles = [];
displayFiles();
fileInput.value = '';
hideError();
});
uploadBtn.addEventListener('click', () => {
if (selectedFiles.length === 0) return;
uploadProgress.classList.remove('hidden');
uploadBtn.disabled = true;
uploadBtn.textContent = 'Uploading...';
// Simulate upload with progress
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 12;
if (progress >= 100) {
progress = 100;
clearInterval(interval);
setTimeout(() => {
uploadProgress.classList.add('hidden');
uploadBtn.disabled = false;
uploadBtn.textContent = 'Upload Complete!';
uploadBtn.className = uploadBtn.className.replace('from-blue-600 to-blue-700', 'from-green-600 to-green-700');
setTimeout(() => {
uploadBtn.textContent = 'Upload Images';
uploadBtn.className = uploadBtn.className.replace('from-green-600 to-green-700', 'from-blue-600 to-blue-700');
}, 3000);
}, 600);
}
progressBar.style.width = progress + '%';
progressText.textContent = Math.round(progress) + '%';
}, 150);
});
</script>
Professionally designed templates with full responsive design and RTL support. Perfect for landing pages, dashboards, or SaaS applications.
From quick prototypes to production-ready applications, get the components, AI, and SEO tools you need to build faster and rank higher.
A powerful starting point for your projects.
For professionals who need full power.
Pay once. Build forever.
Everything you need to know about our pricing and plans.
Can't find the answer you're looking for? Our team is here to help you.
Welcome to the BuildWithTail blog, where you'll find expert tips, tutorials, and updates to elevate your web development skills. From practical coding advice to the latest industry trends.
Oct 14, 2025
In today‘s fast-paced tech landscape, selecting the right tools is paramount. When it comes to the top 10 programming frameworks for app deve...
Oct 12, 2025
You love building dynamic, interactive user interfaces with React. The component-based architecture, the virtual DOM, the massive ecosystem—i...
Oct 12, 2025
Every Laravel developer knows the pain of environment setup. Conflicting PHP versions, database woes, or simply getting Xdebug to cooperate can eat...