Component Declaration

component.php

<?php return [

    'render' => function($prop) {
        // render the component 
    },
    
    'about' => 'A floating theme switcher button that toggles between light and dark themes',

];

Example Components

hero-section

Landing page hero with CTA buttons

features-grid

3-column feature showcase

stats-section

Animated statistics display

testimonials

Customer testimonial carousel

cta-section

Call-to-action with background

pricing-table

Responsive pricing tiers

brands-showcase

Logo grid with animations

theme-switcher

Light/dark theme toggle

Usage Examples

usage-examples.php

// Basic component
<?php component('components/example/hero-section'); ?>

// Component with data
<?php component('components/example/stats-section', [
    'title' => 'Our Growth',
    'stats' => [
        ['number' => '50K+', 'label' => 'Users'],
        ['number' => '99.9%', 'label' => 'Uptime'],
        ['number' => '24/7', 'label' => 'Support']
    ]
]); ?>

Theme Info

This starter pack includes a light and a dark theme

Light Theme

themes/light/css/style.css

Dark Theme

themes/dark/css/style.css

variables.css

CSS Variables

/* Core theme variables */
--bg-color, --bg-secondary, --surface
--text-primary, --text-secondary, --text-muted
--primary, --primary-dark, --primary-light
--border, --border-hover
--shadow-sm, --shadow-md, --shadow-lg

Component System