skills.rest
Happy-Horizon
Happy-HorizonOFFICIAL
Explore all skills by this author →
WebsiteGitHub

hyva-ui-component

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

Updated Mar 12, 2026
Search Tags:#frontend#theme#magento#hyva-ui#component-copy
One-click install
npx skills add https://github.com/Happy-Horizon/cursor-marketplace --skill hyva-ui-component-happy-horizon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyva-ui-component
Source: https://github.com/Happy-Horizon/cursor-marketplace/tree/main/plugins/hyva-ai-tools/skills/hyva-ui-component
Command: npx skills add https://github.com/Happy-Horizon/cursor-marketplace --skill hyva-ui-component-happy-horizon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Hyva UI components are frequently distributed across multiple sources; this skill provides a streamlined way to add, install, or apply non-CMS Hyva UI components to a Hyvä Magento theme, ensuring consistency and faster UI delivery.

Core Features & Use Cases

  • Discover and apply non-CMS Hyva UI components from the Hyva UI package to a Hyvä theme
  • View available component variants and integrate them correctly into the destination theme
  • Use case: add a header, footer, or gallery component to an existing Hyvä theme with minimal manual wiring

Quick Start

Select a theme with hyva-theme-list, then apply a Hyva UI component by copying the chosen variant into the theme directory.

Frequently Asked Questions about hyva-ui-component

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

FAQPage Schema
How do I add a Hyva UI component to my Magento Hyvä theme?▼

You can add a Hyva UI component by copying the desired template-based component variant from the Hyva UI package located at vendor/hyva-themes/hyva-ui into your target theme directory, streamlining integration without manual wiring.

What is the fastest way to integrate a new header or footer variant into an existing Hyvä theme?▼

The fastest way is to discover and apply non-CMS Hyva UI components by selecting an available variant from the Hyva UI package and copying its templates directly into the destination theme directory for minimal manual wiring.

Do I need the hyva-exec-shell-cmd workflow to install Hyva UI components?▼

Yes, you need the hyva-exec-shell-cmd workflow to execute environment commands, and you must have access to the Hyva UI package at vendor/hyva-themes/hyva-ui to copy the template-based component variants successfully.

Can I use this approach to apply gallery or menu components to a Hyvä theme?▼

Yes, you can apply gallery or menu components by locating the specific component variant within the Hyva UI package and copying it into your theme directory, ensuring correct integration of these UI elements into your existing Hyvä theme.

What are the limitations when copying Hyva UI components into a Magento theme?▼

A limitation is that this method applies only to non-CMS Hyva UI components distributed via the Hyva UI package, requiring correct variant selection and copying of template-based files, meaning components outside that package cannot be integrated using this approach.

Related Skills

Explore More Software Engineering Skills→
Happy-HorizonHappy-Horizon

hyva-compile-tailwind-css

Compile Tailwind CSS for Hyvä themes in Magento 2.

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
hyva-themeshyva-themes
78

hyva-ui-component

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

Official
Intermediate