AgentiveApp POC Template
A complete Next.js starter with themes, lead capture, and UI components ready to go
Live Theme Switcher
Switch themes in real-time to see how your app will look
This template includes 6 professionally designed themes. Each theme has carefully chosen colors optimized for different app categories.
Primary
Secondary
Accent
Muted
Destructive
Card
Interactive Preview
See how UI elements look with the current theme
DefaultSecondaryOutlineDestructive
All Available Themes
6 pre-configured themes for different app categories
Productivity
Focus Indigo & Energy Cyan
Perfect for task managers, note-taking apps, and workflow tools
Education
Scholar Blue & Wisdom Purple
Ideal for learning platforms, course apps, and educational tools
Social
Community Coral & Trust Teal
Great for community apps, social networks, and messaging platforms
Finance
Wealth Green & Professional Navy
Designed for banking apps, investment tools, and financial dashboards
Creator
Creative Purple & Passion Orange
Built for content creation, design tools, and artistic platforms
Wellness
Calm Sage & Vitality Lime
Optimized for health apps, meditation tools, and fitness trackers
How to Use Themes
Quick guide to implementing theme switching in your app
1. Import the ThemeSwitcher component:
import { ThemeSwitcher } from '@/components/ThemeSwitcher';2. Add it to your layout or settings page:
<ThemeSwitcher onChange={(theme) => console.log(theme)} />3. Theme files are located in:
/public/themes/*.css