skills.rest
hyva-themes
hyva-themesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

hyva-ui-component

Install Hyva UI template-based components into a Hyvä theme.

78|16|Updated Jan 22, 2026
Search Tags:#Magento#component-variants#hyva#hyva-ui#theme-installation#XML-merge
One-click install
npx skills add https://github.com/hyva-themes/hyva-ai-tools --skill hyva-ui-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyva-ui-component
Source: https://github.com/hyva-themes/hyva-ai-tools/tree/main/skills/hyva-ui-component
Command: npx skills add https://github.com/hyva-themes/hyva-ai-tools --skill hyva-ui-component

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill enables developers to apply Hyva UI template-based components to a Hyvä theme by sourcing component files from a Hyva UI package and placing them into the theme directory, accelerating UI customization without manual file-by-file setup.

Core Features & Use Cases

  • Theme-aware installation: Identify the target Hyvä theme under app/design/frontend and prepare it for component installation.
  • Component discovery & variants: List available non-CMS components and their variants, read each component's README for dependencies and requirements, and present viable options.
  • Safe file operations: Copy component source files into the theme while preserving existing files, merging XML/layout changes when necessary, and tracking which files were created vs updated.
  • Dependency handling: Automatically apply required plugin and component dependencies, as documented by the component READMEs.
  • Output & verification: Produce a clear summary of modified files and any new configuration options added to view.xml.

Quick Start

Use this skill to install a non-CMS Hyva UI component into your Hyvä theme by selecting your theme, choosing a component and variant, then following the prompts to copy files and apply dependencies. The skill will report created and updated files and will prompt about optional Tailwind or asset recompilation if applicable.

Note: this Quick Start is a high-level guide; follow on-screen prompts for exact commands and paths.

To see all steps, refer to the component README provided with the Hyva UI package.

Frequently Asked Questions about hyva-ui-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install Hyva UI components into a Magento theme?▼

To install Hyva UI components, select a target theme under app/design/frontend, choose a component variant, and the tool copies source files while merging XML configurations and handling dependencies automatically.

What is the best way to add Hyva UI template variants to my Hyva theme?▼

Adding Hyva UI template variants involves listing available non-CMS components, reading their READMEs for dependencies, and copying variant source files into your theme directory while preserving existing files.

Can I install Hyva UI components without overwriting my existing Magento theme files?▼

Yes, installing Hyva UI components preserves existing theme files by tracking created versus updated files, safely merging necessary XML layout changes instead of performing destructive overwrites.

Does the Hyva UI component installation process handle Magento dependencies automatically?▼

Yes, Hyva UI component installation handles dependencies automatically by reading each component's README and applying required plugin and component dependencies during the file copy process.

What happens to view.xml configuration when I add new Hyva UI components?▼

When adding new Hyva UI components, the installation process merges necessary XML configurations and produces a clear summary of modified files alongside any new configuration options added to view.xml.

Do I need to manually recompile Tailwind assets after installing a Hyva UI component?▼

After installing a Hyva UI component, the tool prompts about optional Tailwind or asset recompilation if applicable, ensuring your theme styles reflect the newly added component variants.

Related Skills

Explore More Software Engineering Skills→
Happy-HorizonHappy-Horizon

hyva-ui-component

Copy Hyva UI components from the package into a Hyvä theme.

Official
Intermediate
InchooInchoo
18

hyva-ui-component-css

Develop themeable Hyva Magento 2 UI components with Tailwind CSS and Alpine.js.

Official
Intermediate
InchooInchoo
18

Hyvä Theme: Setup & Alpine.js Components

Create Hyvä child themes and Alpine.js components in Magento 2.

Official
Intermediate
Happy-HorizonHappy-Horizon

hyva-compile-tailwind-css

Compile Tailwind CSS for Hyvä themes in Magento 2.

Official
Intermediate