Templates & Examples
Get started quickly with our curated collection of templates and examples. Simply copy a prompt and paste it into the chat!
🎨 Landing Page Templates
Modern SaaS Landing Page
Build a modern SaaS landing page with:
- Hero section with gradient background and animated elements
- Features section with icons and descriptions (3 columns)
- Pricing table with 3 tiers (Basic, Pro, Enterprise)
- Testimonials carousel
- FAQ accordion
- Contact form with validation
- Responsive navbar with mobile menu
- Dark mode toggle
Use Next.js, Tailwind CSS, and Framer Motion for animations
Portfolio Website
Create a portfolio website with:
- Animated hero section with typing effect for job titles
- About section with photo and bio
- Project gallery with hover effects and modal popups
- Skills section with progress bars
- Experience timeline
- Contact form with email validation
- Smooth scroll navigation
Use React, Tailwind CSS, and React Icons
E-Commerce Product Page
Build an e-commerce product page featuring:
- Image gallery with thumbnails and zoom on hover
- Product details with size and color selector
- Quantity picker and add to cart button
- Product reviews with star ratings
- Related products carousel
- Sticky buy now button on scroll
- Shopping cart sidebar
Use React, Tailwind CSS, and React Query for state management
⚡ Full-Stack Applications
Task Management App
Create a full-stack task management app with:
- User authentication (email/password and Google OAuth)
- Dashboard with task statistics
- Kanban board with drag-and-drop (To Do, In Progress, Done)
- Task creation modal with priority, due date, and tags
- Filter and search functionality
- Dark mode support
- Real-time updates across devices
Backend: Firebase Authentication, Firestore database
Frontend: React, Tailwind CSS, React DnD
Real-Time Chat Application
Build a real-time chat application with:
- User authentication with Firebase
- Channel list sidebar
- Message input with emoji picker
- Real-time message updates
- User presence indicators (online/offline)
- Image upload and preview
- Message reactions
- Search messages functionality
- Responsive mobile design
Use React, Firebase Firestore, Firebase Storage, and Tailwind CSS
Blog Platform
Create a full-stack blog platform with:
- Homepage with featured posts and categories
- Markdown editor with live preview for writing posts
- Rich text formatting (bold, italic, headings, lists, code blocks)
- Image upload with drag-and-drop
- Post tags and categories
- Comment system with nested replies
- User profiles with avatar
- Search and filter posts
- Reading time estimate
Backend: Firebase Firestore, Firebase Storage
Frontend: Next.js, Tailwind CSS, React Markdown
📱 Mobile App Templates
Fitness Tracker App
Build a React Native fitness tracker app with:
- Onboarding screens with swipeable carousel
- Dashboard showing today's activity
- Workout logging with exercise library
- Progress charts (weekly/monthly)
- Goal setting and tracking
- Profile screen with settings
- Dark mode support
- Bottom tab navigation
Use React Native, Expo, React Native Paper, and React Native Chart Kit
Weather App
Create a weather app with React Native featuring:
- Location detection using device GPS
- Current weather with animated icons
- 7-day forecast with daily high/low
- Hourly forecast horizontal scroll
- Weather alerts and notifications
- Search cities with autocomplete
- Save favorite locations
- Beautiful gradient backgrounds based on weather
Use React Native, Expo, OpenWeather API, and React Native Animated
Social Media Feed
Build a social media feed app with:
- Instagram-like feed with infinite scroll
- Photo upload with filters
- Like, comment, and share functionality
- User profiles with follower counts
- Stories feature with auto-advance
- Notifications screen
- Search and explore page
- Direct messaging
Backend: Firebase Authentication, Firestore, Firebase Storage
Frontend: React Native, Expo, React Native Image Picker
🔧 Utility & Tool Templates
Color Palette Generator
Create a color palette generator tool with:
- Generate random color palettes
- Color harmony modes (complementary, triadic, analogous)
- Copy hex/RGB/HSL values with one click
- Export palette as JSON or CSS variables
- Save favorite palettes to local storage
- Contrast checker for accessibility
- Gradient generator between colors
- Dark mode interface
Use React, Tailwind CSS, and Colord library
Markdown Editor
Build a markdown editor with:
- Split view: editor on left, preview on right
- Syntax highlighting in editor
- Live preview with GitHub-flavored markdown
- Toolbar with formatting buttons
- Export to HTML/PDF
- Save to local storage auto-save
- File upload and download
- Keyboard shortcuts (Ctrl+B for bold, etc.)
- Word and character count
Use React, CodeMirror, React Markdown, and Tailwind CSS
Invoice Generator
Create an invoice generator with:
- Company logo upload
- Client information form
- Line items table (add/remove rows)
- Tax calculation (percentage-based)
- Discount support
- Automatic total calculation
- Invoice number auto-increment
- PDF export functionality
- Save drafts to local storage
- Professional invoice templates
Use React, Tailwind CSS, and jsPDF library
📊 Dashboard Templates
Analytics Dashboard
Build an analytics dashboard with:
- Overview cards (revenue, users, growth, engagement)
- Line chart for revenue over time
- Bar chart for user activity
- Pie chart for traffic sources
- Recent transactions table with pagination
- Top products/pages list
- Date range picker
- Export data to CSV
- Responsive grid layout
- Dark mode support
Use React, Recharts, Tailwind CSS, and date-fns
Admin Panel
Create an admin panel with:
- Sidebar navigation with collapsible menu
- User management (CRUD operations)
- Data tables with sorting, filtering, and pagination
- Form validation for create/edit
- Role-based access control
- Activity log
- Settings page
- Notifications system
- Modal dialogs for confirmations
Backend: Firebase Firestore
Frontend: React, Tailwind CSS, React Table, React Hook Form
🎮 Game Templates
Memory Card Game
Build a memory card game with:
- Grid of face-down cards (4x4, 6x6 configurable)
- Flip animation when clicked
- Match detection and card removal
- Move counter and timer
- Difficulty levels (easy, medium, hard)
- High score tracking
- Restart game button
- Victory animation
- Sound effects
Use React, Tailwind CSS, and Framer Motion
Quiz Application
Create a quiz app with:
- Question progress indicator
- Multiple choice questions
- Timer per question
- Score calculation
- Results page with correct/incorrect answers
- Restart quiz functionality
- Question categories
- Difficulty levels
- Leaderboard
- Share results feature
Use React, Tailwind CSS, and Trivia API
How to Use Templates
- Copy the Prompt: Click the copy button next to any template
- Paste in Chat: Paste the prompt into the VibeKaro.ai chat
- Customize: Modify the prompt to fit your specific needs
- Generate: Press Enter and watch the AI build your project!
Pro Tips
Combine Templates
Mix features from different templates:
Combine the authentication from the Task Management App
with the UI design of the Modern SaaS Landing Page
Add Integrations
Enhance templates with additional services:
Add Stripe payment integration to the E-Commerce Product Page
Change Tech Stack
Request different frameworks:
Convert the Task Management App from React to Vue.js
Request Custom Templates
Need a specific template? Contact Support and we'll add it to our collection!