How to use Ready made hyva UI components in your theme?

Hyvä UI makes Magento 2 frontend development faster, cleaner, and easier. Many developers, however, get confused when first exploring Hyvä UI components—especially at first glance regarding where they are located, how to use them correctly, and what Hyvä actually provides.

To clear this up, this guide explains everything step by step in a simple and clear way. Consequently, after reading this guide, you’ll understand exactly how Hyvä UI components work and how to implement them safely in your project.

What Is Hyvä UI?

In short, Hyvä UI is a ready-made component library built specifically for the Hyvä Theme ecosystem. Fundamentally, it provides reusable frontend components that follow best practices for performance and maintainability.

Specifically, Hyvä UI components are built using:

• Tailwind CSS for styling
• Alpine.js for interactivity
• Magento PHTML and layout XML

Moreover, rather than starting from scratch, developers can instead reuse these well-structured UI patterns and adapt them to their store.

---

Where Are Hyvä UI Components Located?

First and foremost, all Hyvä UI components are available inside your Magento installation at:

vendor/hyva-themes/hyva-ui/components

In general, this directory contains different component categories such as:

• Menus
• Accordions
• Tabs
• Modals

Figure 1: Folder structure of Hyvä UI components in Magento vendor directory.

---

Example: Exploring a Menu Component

To illustrate, let’s take a menu component as an example. Navigate to:

vendor/hyva-themes/hyva-ui/components/menu

Once inside this directory, you’ll find multiple menu design variations. For example, this includes a four-column mega menu:

vendor/hyva-themes/hyva-ui/components/menu/B-4-column-megamenu

Essentially, each folder represents a complete design option that you can implement in your theme.

---

Understanding the Component Folder Structure

Fortunately, every Hyvä UI component follows a consistent and easy-to-understand structure.

1. Most importantly, the README.md file

In particular, the README.md file contains full implementation instructions, including:

• Theme requirements
• Which files to copy
• Where to place them
• Layout XML instructions
• Configuration options

Therefore, always read the README before copying anything.

2. media/ Directory

Next, the media directory contains screenshots showing how the component looks after implementation. As a result, this helps you visually understand the final result before using it.

Figure 2: Example of Hyvä UI menu component screenshots.

3. src/ Directory

Finally, the src directory contains the actual source files required to implement the component. These files should be copied into your custom Hyvä theme or module.

---

Important Rule: Never Edit Vendor Files

Although Hyvä UI components are located inside the vendor directory, you should never modify vendor files directly.

Instead, follow this correct workflow:

• Read files from vendor/
• Next, copy required files from the src/ directory
• Paste them into your custom Hyvä theme or module

---

Are Hyvä UI Components Plug-and-Play?

No — and surprisingly this is intentional. Specifically, Hyvä UI components are reference implementations, not automatic installers. Specifically, they usually require:

• Copying PHTML and layout XML files
• Adding layout updates
• Passing block arguments
• Optional Tailwind CSS customization

Because of this, developers have full control over the final output.

---

Minimal Code Example (Menu Layout)

For instance, below is a simple example of how a menu component might be added via layout XML:

<referenceBlock name="header.menu">
    <block class="Magento\Framework\View\Element\Template"
           name="custom.hyva.menu"
           template="Vendor_Theme::menu/custom-menu.phtml" />
</referenceBlock>

Overall, the actual implementation details depend on the component README.

---

Hyvä Theme vs Hyvä UI (Important Difference)

Frequently, many developers confuse these two concepts.

• Hyvä Theme – Core frontend framework (required)
• Hyvä UI – Optional component library

In other words, you can use Hyvä Theme without Hyvä UI, or selectively use only the UI components you need.

---

What Hyvä UI Includes (And What It Doesn’t)

What’s Included in Hyvä UI

• For instance, it features ready-made UI patterns
• Alpine.js-based interactivity
• Tailwind CSS styling
• Best-practice frontend examples

What’s Not Included in Hyvä UI

• One-click installation
• Drag-and-drop UI builder
• Zero-configuration setup

---

Final Thoughts

In conclusion, Hyvä UI is designed for developers who want speed without losing flexibility. Furthermore, once you understand that Hyvä UI is a reference component library, not a plugin system, it becomes very easy to use.

Ultimately, by following the README instructions and copying components correctly into your theme, you can build fast, maintainable, and upgrade-safe Magento 2 storefronts.