UI Library

Components

Component Library

Reusable components included with every InstanceIO installation. Each is a PHP class + HTML template + CSS file.

Core Components

SiteHeader Responsive navigation with mobile menu

Hero Animated hero with grid background and CTAs

Features Feature grid with asymmetric layout

CodeExample Tabbed code editor for PHP/HTML/CSS

CTASection Call-to-action with primary and secondary buttons

SiteFooter Footer with copyright and links

Documentation Components

DocsHero Page hero for docs/components/about pages

DocsContainer Sidebar + content layout for documentation

Creating Components

Scaffold a new component with the CLI:

php console/cmd.php Make component ComponentName

This creates three files in resources/components/ComponentName/:

ComponentName.php    # Class with logic and defaults
ComponentName.html   # HTML template with {%variables%}
ComponentName.css    # Scoped styles

Component Structure

class ComponentName extends Component
{
    public array $defaults = [
        'title' => 'Default Title',
        'content' => 'Default content'
    ];

    public function __construct(
        public array $params,
        public string $component = __DIR__ . '/ComponentName'
    ) {
        parent::__construct($this->params, $this->component);
    }
}

Using Components

Reference components in .iio templates with snake_case:

<component_name title="Hello" content="World" />

PascalCase class names become snake_case in templates. ComponentName → <component_name />

Start building

Scaffold a component in seconds with the CLI.

Read the docs View on GitHub