@bloomneo/uikit 1.5.0

package/bin/templates/spa/src/App.tsx.template

@@ -0,0 +1,659 @@
+import React, { useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route, Link, useLocation, useNavigate } from 'react-router-dom';
+import { Button } from '@bloomneo/uikit/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@bloomneo/uikit/card';
+import { useTheme } from '@bloomneo/uikit/theme-provider';
+import { PageLayout } from '@bloomneo/uikit/page';
+import type { NavigationItem } from '@bloomneo/uikit';
+import { Home, Layout, Palette, BookOpen } from 'lucide-react';
+import { SEO } from './components/SEO';
+import { asset } from './utils/asset';
+
+// Page Components
+const HomePage: React.FC = () => {
+  const { theme } = useTheme();
+  
+  const themeDescriptions = {
+    base: 'Clean default configuration showcasing the base system',
+    elegant: 'Fresh sky blue theme with clean design', 
+    metro: 'Dark teal theme with bright yellow accents',
+    studio: 'Sophisticated neutral theme with golden accents',
+    vivid: 'Premium cursive theme with sophisticated typography'
+  };
+
+  return (
+    <>
+      <SEO
+        title="UIKit SPA Demo - Beautiful UI Components"
+        description="Professional React components with stunning themes, powered by OKLCH color science and cross-platform design"
+      />
+      <div className="space-y-12">
+        {/* Hero Section */}
+      <section className="text-center py-16 bg-gradient-to-b from-background to-muted/20 rounded-lg">
+        <div className="space-y-6">
+          <div className="mb-6">
+            <img
+              src={asset('/hero_spa.svg')}
+              alt="UIKit SPA Hero Illustration"
+              className="mx-auto max-w-md w-full h-auto"
+            />
+          </div>
+          <h1 className="voila-heading text-4xl md:text-6xl mb-6 text-accent">
+            Beautiful UI Components
+          </h1>
+          <p className="voila-subheading text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
+            Professional React components with stunning themes, powered by OKLCH color science and cross-platform design
+          </p>
+          <div className="inline-flex items-center gap-3 text-sm text-muted-foreground bg-muted/50 backdrop-blur px-6 py-3 rounded-full border">
+            <div className="w-2 h-2 bg-primary rounded-full animate-pulse"></div>
+            {themeDescriptions[theme as keyof typeof themeDescriptions]}
+          </div>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center mt-8">
+            <Button size="lg" asChild>
+              <Link to="/components">Explore Components</Link>
+            </Button>
+            <Button variant="secondary" size="lg" asChild>
+              <Link to="/themes">Browse Themes</Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Grid */}
+      <section className="space-y-6">
+        <div className="text-center">
+          <h2 className="text-3xl font-bold mb-4">Why Choose UIKit?</h2>
+          <p className="text-muted-foreground max-w-2xl mx-auto">
+            Built for modern applications with performance, accessibility, and developer experience in mind
+          </p>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
+            <CardHeader>
+              <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+                🎨
+              </div>
+              <CardTitle>5 Beautiful Themes</CardTitle>
+              <CardDescription>From elegant to vivid, find the perfect aesthetic for your application</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <ul className="text-sm space-y-2 text-muted-foreground">
+                <li>• Base - Clean default styling</li>
+                <li>• Elegant - Sky blue elegance</li>
+                <li>• Metro - Bold teal & yellow</li>
+                <li>• Studio - Sophisticated neutrals</li>
+                <li>• Vivid - Premium typography</li>
+              </ul>
+              <Button asChild className="w-full">
+                <Link to="/themes">Explore Themes</Link>
+              </Button>
+            </CardContent>
+          </Card>
+          
+          <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
+            <CardHeader>
+              <div className="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center mb-4">
+                🧩
+              </div>
+              <CardTitle>Rich Component Library</CardTitle>
+              <CardDescription>30+ production-ready components with consistent design language</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <ul className="text-sm space-y-2 text-muted-foreground">
+                <li>• Buttons, Cards, Forms</li>
+                <li>• Navigation & Layout</li>
+                <li>• Data Tables & Charts</li>
+                <li>• Dialogs & Overlays</li>
+                <li>• Fully accessible</li>
+              </ul>
+              <Button asChild className="w-full">
+                <Link to="/components">View Components</Link>
+              </Button>
+            </CardContent>
+          </Card>
+          
+          <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
+            <CardHeader>
+              <div className="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center mb-4">
+                📚
+              </div>
+              <CardTitle>Developer Experience</CardTitle>
+              <CardDescription>TypeScript-first with excellent documentation and tooling</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <ul className="text-sm space-y-2 text-muted-foreground">
+                <li>• Full TypeScript support</li>
+                <li>• CLI for quick setup</li>
+                <li>• Storybook integration</li>
+                <li>• Tree-shakeable imports</li>
+                <li>• Comprehensive docs</li>
+              </ul>
+              <Button asChild className="w-full">
+                <Link to="/docs">Read Documentation</Link>
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      {/* Color Palette Preview */}
+      <section className="space-y-6">
+        <div className="text-center">
+          <h2 className="text-2xl font-bold mb-2">Current Theme Colors</h2>
+          <p className="text-muted-foreground">OKLCH-based color system for perfect consistency</p>
+        </div>
+        
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="bg-primary text-primary-foreground p-6 rounded-lg text-center shadow-lg">
+            <div className="text-lg font-bold">Primary</div>
+            <div className="text-sm opacity-90 mt-1">Brand color</div>
+          </div>
+          <div className="bg-secondary text-secondary-foreground p-6 rounded-lg text-center shadow-lg">
+            <div className="text-lg font-bold">Secondary</div>
+            <div className="text-sm opacity-90 mt-1">Supporting</div>
+          </div>
+          <div className="bg-accent text-accent-foreground p-6 rounded-lg text-center shadow-lg">
+            <div className="text-lg font-bold">Accent</div>
+            <div className="text-sm opacity-90 mt-1">Highlights</div>
+          </div>
+          <div className="bg-muted text-muted-foreground p-6 rounded-lg text-center shadow-lg border">
+            <div className="text-lg font-bold">Muted</div>
+            <div className="text-sm opacity-90 mt-1">Subtle</div>
+          </div>
+        </div>
+      </section>
+
+      {/* Quick Start */}
+      <section className="bg-muted/30 rounded-lg p-8">
+        <div className="text-center space-y-4">
+          <h2 className="text-2xl font-bold">Ready to Get Started?</h2>
+          <p className="text-muted-foreground max-w-2xl mx-auto">
+            Install UIKit in your project and start building beautiful interfaces in minutes
+          </p>
+          <div className="bg-background border rounded-lg p-4 max-w-md mx-auto">
+            <code className="text-sm">npm install @bloomneo/uikit</code>
+          </div>
+          <div className="flex gap-3 justify-center">
+            <Button asChild>
+              <Link to="/docs">Installation Guide</Link>
+            </Button>
+            <Button variant="ghost" asChild>
+              <Link to="/components">Browse Components</Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+      </div>
+    </>
+  );
+};
+
+const ComponentsPage: React.FC = () => {
+  return (
+    <>
+      <SEO
+        title="Components - UIKit SPA Demo"
+        description="Explore our comprehensive collection of production-ready React components, designed for consistency and accessibility"
+      />
+      <div className="space-y-8">
+      <div className="text-center space-y-4">
+        <h1 className="voila-heading text-4xl">Component Library</h1>
+        <p className="voila-subheading text-muted-foreground max-w-3xl mx-auto">
+          Explore our comprehensive collection of production-ready React components, designed for consistency and accessibility
+        </p>
+      </div>
+      
+      {/* Buttons */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-primary/10 rounded flex items-center justify-center">
+              🔘
+            </div>
+            Buttons
+          </CardTitle>
+          <CardDescription>Interactive elements with multiple variants, sizes, and states</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="space-y-4">
+            <h4 className="text-sm font-medium text-muted-foreground">Variants</h4>
+            <div className="flex flex-wrap gap-3">
+              <Button size="lg">Primary</Button>
+              <Button variant="secondary" size="lg">Secondary</Button>
+              <Button variant="outline" size="lg">Outline</Button>
+              <Button variant="ghost" size="lg">Ghost</Button>
+              <Button variant="destructive" size="lg">Destructive</Button>
+            </div>
+          </div>
+          
+          <div className="space-y-4">
+            <h4 className="text-sm font-medium text-muted-foreground">Sizes</h4>
+            <div className="flex flex-wrap items-center gap-3">
+              <Button size="sm">Small</Button>
+              <Button>Default</Button>
+              <Button size="lg">Large</Button>
+            </div>
+          </div>
+          
+          <div className="space-y-4">
+            <h4 className="text-sm font-medium text-muted-foreground">States</h4>
+            <div className="flex flex-wrap gap-3">
+              <Button>Normal</Button>
+              <Button disabled>Disabled</Button>
+              <Button className="opacity-50 cursor-not-allowed">Loading...</Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Cards */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-secondary/10 rounded flex items-center justify-center">
+              📋
+            </div>
+            Cards
+          </CardTitle>
+          <CardDescription>Flexible containers for displaying content and actions</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <Card className="border-2">
+              <CardHeader>
+                <CardTitle className="text-lg">Simple Card</CardTitle>
+                <CardDescription>Basic card with header and content</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">
+                  Cards provide a flexible container for content with consistent spacing and styling.
+                </p>
+              </CardContent>
+            </Card>
+            
+            <Card className="border-2 bg-primary/5">
+              <CardHeader>
+                <CardTitle className="text-lg">Action Card</CardTitle>
+                <CardDescription>Card with interactive elements</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <p className="text-sm text-muted-foreground">
+                  Enhanced with buttons and other interactive components.
+                </p>
+                <Button size="sm" className="w-full">Take Action</Button>
+              </CardContent>
+            </Card>
+            
+            <Card className="border-2 border-dashed">
+              <CardHeader>
+                <CardTitle className="text-lg">Custom Styled</CardTitle>
+                <CardDescription>Customizable appearance</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">
+                  Easy to customize with different borders, backgrounds, and layouts.
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Form Elements */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-accent/10 rounded flex items-center justify-center">
+              📝
+            </div>
+            Form Elements
+          </CardTitle>
+          <CardDescription>Input fields and form controls with consistent styling and validation</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="space-y-4">
+            <h4 className="text-sm font-medium text-muted-foreground">Text Inputs</h4>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Standard Input</label>
+                <input 
+                  type="text" 
+                  placeholder="Enter your text"
+                  className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Email Input</label>
+                <input 
+                  type="email" 
+                  placeholder="your@email.com"
+                  className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+                />
+              </div>
+            </div>
+          </div>
+          
+          <div className="space-y-4">
+            <h4 className="text-sm font-medium text-muted-foreground">Selection Controls</h4>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Dropdown Select</label>
+                <select className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring">
+                  <option>Choose an option</option>
+                  <option>Option 1</option>
+                  <option>Option 2</option>
+                  <option>Option 3</option>
+                </select>
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Multi-select</label>
+                <select multiple size={3} className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring">
+                  <option>Option A</option>
+                  <option>Option B</option>
+                  <option>Option C</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          
+          <div className="space-y-4">
+            <h4 className="text-sm font-medium text-muted-foreground">Text Areas</h4>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Message</label>
+              <textarea 
+                placeholder="Enter your message here..."
+                rows={4}
+                className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Data Display */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-chart1/10 rounded flex items-center justify-center">
+              📊
+            </div>
+            Data Display
+          </CardTitle>
+          <CardDescription>Components for presenting structured information and metrics</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="space-y-4">
+            <h4 className="text-sm font-medium text-muted-foreground">Chart Colors</h4>
+            <div className="grid grid-cols-5 gap-3">
+              <div className="text-center">
+                <div className="w-full h-16 rounded-lg mb-2 bg-chart1 shadow-sm" />
+                <div className="text-xs text-muted-foreground font-medium">Chart 1</div>
+              </div>
+              <div className="text-center">
+                <div className="w-full h-16 rounded-lg mb-2 bg-chart2 shadow-sm" />
+                <div className="text-xs text-muted-foreground font-medium">Chart 2</div>
+              </div>
+              <div className="text-center">
+                <div className="w-full h-16 rounded-lg mb-2 bg-chart3 shadow-sm" />
+                <div className="text-xs text-muted-foreground font-medium">Chart 3</div>
+              </div>
+              <div className="text-center">
+                <div className="w-full h-16 rounded-lg mb-2 bg-chart4 shadow-sm" />
+                <div className="text-xs text-muted-foreground font-medium">Chart 4</div>
+              </div>
+              <div className="text-center">
+                <div className="w-full h-16 rounded-lg mb-2 bg-chart5 shadow-sm" />
+                <div className="text-xs text-muted-foreground font-medium">Chart 5</div>
+              </div>
+            </div>
+          </div>
+          
+          <div className="space-y-4">
+            <h4 className="text-sm font-medium text-muted-foreground">Status Indicators</h4>
+            <div className="flex flex-wrap gap-3">
+              <div className="inline-flex items-center gap-2 bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">
+                <div className="w-2 h-2 bg-green-600 rounded-full"></div>
+                Active
+              </div>
+              <div className="inline-flex items-center gap-2 bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">
+                <div className="w-2 h-2 bg-yellow-600 rounded-full"></div>
+                Pending
+              </div>
+              <div className="inline-flex items-center gap-2 bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">
+                <div className="w-2 h-2 bg-red-600 rounded-full"></div>
+                Inactive
+              </div>
+              <div className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
+                <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
+                Processing
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+      </div>
+    </>
+  );
+};
+
+const ThemesPage: React.FC = () => {
+  const { theme, setTheme, availableThemes } = useTheme();
+
+  return (
+    <>
+      <SEO
+        title="Themes - UIKit SPA Demo"
+        description="Explore 5 professional themes built with OKLCH color science for perfect accessibility and stunning design"
+      />
+      <div className="space-y-6">
+      <h1 className="voila-heading">Themes</h1>
+      
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+        <div className="bg-primary text-primary-foreground p-4 rounded-lg text-center">
+          <div className="text-sm font-medium">Primary</div>
+        </div>
+        <div className="bg-secondary text-secondary-foreground p-4 rounded-lg text-center">
+          <div className="text-sm font-medium">Secondary</div>
+        </div>
+        <div className="bg-accent text-accent-foreground p-4 rounded-lg text-center">
+          <div className="text-sm font-medium">Accent</div>
+        </div>
+        <div className="bg-muted text-muted-foreground p-4 rounded-lg text-center">
+          <div className="text-sm font-medium">Muted</div>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Available Themes</CardTitle>
+          <CardDescription>Switch between different theme styles</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {availableThemes.map(themeId => (
+              <Card key={themeId} className={theme === themeId ? 'ring-2 ring-primary' : ''}>
+                <CardHeader>
+                  <CardTitle className="text-lg capitalize">{themeId}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <Button 
+                    onClick={() => setTheme(themeId as any)}
+                    variant={theme === themeId ? 'default' : 'outline'}
+                    className="w-full"
+                  >
+                    {theme === themeId ? 'Active' : 'Select'}
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+      </div>
+    </>
+  );
+};
+
+const DocsPage: React.FC = () => {
+  return (
+    <>
+      <SEO
+        title="Documentation - UIKit SPA Demo"
+        description="Complete documentation for UIKit components, themes, and SPA routing patterns"
+      />
+      <div className="space-y-6">
+      <h1 className="voila-heading">Documentation</h1>
+      
+      <Card>
+        <CardHeader>
+          <CardTitle>Getting Started</CardTitle>
+          <CardDescription>How to use @bloomneo/uikit in your project</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <h3 className="font-semibold mb-2">Installation</h3>
+            <code className="bg-muted p-2 rounded block">npm install @bloomneo/uikit</code>
+          </div>
+          
+          <div>
+            <h3 className="font-semibold mb-2">Import Components</h3>
+            <code className="bg-muted p-2 rounded block text-sm">
+              {`import { Button } from '@bloomneo/uikit/button';
+import { Card } from '@bloomneo/uikit/card';`}
+            </code>
+          </div>
+          
+          <div>
+            <h3 className="font-semibold mb-2">Import Styles</h3>
+            <code className="bg-muted p-2 rounded block">import '@bloomneo/uikit/styles';</code>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Theme Provider</CardTitle>
+          <CardDescription>Wrap your app with the theme provider</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <code className="bg-muted p-4 rounded block text-sm">
+            {`import { ThemeProvider } from '@bloomneo/uikit/theme-provider';
+
+function App() {
+  return (
+    <ThemeProvider theme="elegant" mode="light">
+      <YourApp />
+    </ThemeProvider>
+  );
+}`}
+          </code>
+        </CardContent>
+      </Card>
+      </div>
+    </>
+  );
+};
+
+// Navigation configuration
+const navigationItems: NavigationItem[] = [
+  { key: 'home', label: 'Home', href: '/', icon: Home },
+  { key: 'components', label: 'Components', href: '/components', icon: Layout },
+  { key: 'themes', label: 'Themes', href: '/themes', icon: Palette },
+  { key: 'docs', label: 'Docs', href: '/docs', icon: BookOpen },
+];
+
+// Theme actions component
+const ThemeActions: React.FC = () => {
+  const { theme, mode, setTheme, availableThemes, toggleMode } = useTheme();
+
+  return (
+    <div className="flex items-center gap-3">
+      <select 
+        value={theme}
+        onChange={(e) => setTheme(e.target.value as any)}
+        className="bg-background border border-input rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+      >
+        {availableThemes.map(themeId => (
+          <option key={themeId} value={themeId}>
+            {themeId.charAt(0).toUpperCase() + themeId.slice(1)}
+          </option>
+        ))}
+      </select>
+      
+      <Button onClick={toggleMode} variant="outline" size="sm">
+        {mode === 'dark' ? '☀️' : '🌙'}
+      </Button>
+    </div>
+  );
+};
+
+// Logo component
+const Logo: React.FC = () => (
+  <div className="flex items-center gap-3">
+    <div className="w-8 h-8 bg-primary rounded flex items-center justify-center text-primary-foreground font-bold text-sm">
+      UI
+    </div>
+    <div>
+      <h3 className="voila-brand-logo text-xl font-bold">@bloomneo/uikit</h3>
+      <p className="text-xs text-muted-foreground">SPA Template</p>
+    </div>
+  </div>
+);
+
+// Component to handle scroll to top on route change
+const ScrollToTop: React.FC = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+};
+
+const SPAContent: React.FC = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const handleNavigation = (href: string, item: NavigationItem) => {
+    navigate(href);
+  };
+
+  return (
+    <PageLayout scheme="default" tone="subtle" size="xl">
+      <ScrollToTop />
+      <PageLayout.Header
+        navigation={navigationItems}
+        currentPath={location.pathname}
+        onNavigate={handleNavigation}
+        logo={<Logo />}
+        actions={<ThemeActions />}
+        position="sticky"
+      />
+
+      <PageLayout.Content>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/components" element={<ComponentsPage />} />
+          <Route path="/themes" element={<ThemesPage />} />
+          <Route path="/docs" element={<DocsPage />} />
+        </Routes>
+      </PageLayout.Content>
+
+      <PageLayout.Footer 
+        copyright="@bloomneo/uikit SPA Template • React Router Navigation"
+      />
+    </PageLayout>
+  );
+};
+
+function App() {
+  return (
+    <Router basename="/">
+      <SPAContent />
+    </Router>
+  );
+}
+
+export default App;

package/bin/templates/spa/src/index.css.template

@@ -0,0 +1,7 @@
+/**
+ * Main Styles Entry Point
+ * Tailwind CSS v4+ with UIKit integration
+ */
+
+/* Tailwind CSS v4+ - REQUIRED */
+@import "tailwindcss";

package/bin/templates/spa/src/main.tsx.template

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ThemeProvider } from '@bloomneo/uikit/theme-provider';
+import App from './App';
+import './index.css';
+import '@bloomneo/uikit/styles';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ThemeProvider theme="base" mode="light" forceConfig={true}>
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>
+);