Unlike traditional Magento themes that rely on heavy JavaScript frameworks and extensive CSS, Hyvä’s approach is different with its UI components.
Hyvä UI components are the best to use if you know how to use them correctly.
This blog explains what these components are, lists out the popular ones, and how to integrate them into your Magento store.
What Exactly Are Hyvä UI Components?
Hyvä UI components are a collection of pre-styled and pre-scripted UI elements designed to be the building blocks of your Hyvä-powered Magento frontend.
They are not a separate, heavy library or a complex framework, but rather an integral part of the Hyvä theme’s architecture.
Here’s what defines them:
- Tailwind CSS for Styling
- Alpine.js for Interactivity
- Performance-First Design
- Not “Black Boxes”
Popular Hyvä UI Components
Hyvä provides a robust set of UI components to cover most typical e-commerce needs. Here are some of the most commonly used ones.
| UI Component | Purpose | Characteristics |
| Buttons (<button>, <a> with button styles) | Trigger actions, submit forms, navigate. | Styled with Tailwind for states and sizes; uses @click for Alpine.js interactions. |
| Form Input Fields (<input>, <select>, <textarea>) | Gather user input. | Consistent styling; often uses x-model for data binding and data-validate for validation. |
| Modals / Pop-ups | Display transient information or confirmations. | An overlay triggered by a click; uses x-show with transitions. |
| Tabs | Organize content into distinct, navigable sections. | Allows switching between content panels without a page reload; uses Alpine.js to manage state. |
| Accordions | Present collapsible content sections. | Saves vertical space by showing one section at a time; uses Alpine.js’s x-show and x-collapse. |
| Dropdowns | Provide a list of options or a sub-menu. | Used for menus, currency/language switchers, or complex filters. |
| Messages (Success, Error, Info) | Provide feedback to the user after an action. | Dynamically displayed and dismissible; handled by window.dispatchMessages(). |
How to Add Hyvä UI Components to Your Theme?
Adding components in Hyvä is straightforward because you’re working directly with HTML, Tailwind, and Alpine. There are three primary methods:
1. Direct HTML Inclusion in PHTML Files
This is the simplest and most common way to add a component.
You find the component’s markup (either from the Hyva_Theme module, Hyva_Checkout if you’re using it, or from Hyvä’s documentation/examples) and paste it directly into your PHTML template.
Example: A Simple Button
<button type="button"
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
@click="alert('Hello from Hyvä!')">
Click Me
</button>
Since Tailwind CSS is processed and Alpine.js is loaded globally by the Hyvä theme, this button will immediately have the specified styles and interactive behavior.
2. Using template-parts for Reusability and Organization (Recommended)
For components you’ll reuse across multiple pages or for better code organization, Hyvä’s template-parts system is the best approach.
Create the Template Part
Create a PHTML file for your component within a template-parts directory in your module or theme (e.g., MyVendor_MyModule/view/frontend/templates/template-parts/my-custom-button.phtml).
<button type="button"
class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" @click="console.log('Component button clicked!')">
Reusable Button
</button>
Include the Template Part. In your main PHTML file, use Magento’s block system to render your template part:
<h1>My Page</h1>
<?php
/** @var \Magento\Framework\View\Element\Template $block */
echo $block->getLayout()
->createBlock(\Magento\Framework\View\Element\Template::class)
->setTemplate('MyVendor_MyModule::template-parts/my-custom-button.phtml')
->toHtml();
?>
This makes your component modular and easy to manage.
3. Custom Alpine.js Components with JavaScript Files
For components with more complex logic or global state management, you can define dedicated Alpine.js components in a separate JavaScript file.
Define Your Alpine.js Component
Create a JS file (e.g., MyVendor_MyModule/view/frontend/web/js/my-counter.js):
// MyVendor_MyModule/view/frontend/web/js/my-counter.js
document.addEventListener('alpine:init', () => {
Alpine.data('myCounter', () => ({
count: 0,
increment() {
this.count++;
},
decrement() {
this.count--;
}
}));
});
Step 2: Load the JavaScript File
Add your JS file in your layout XML (e.g., my_module/view/frontend/layout/default.xml):
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <head> <script src="MyVendor_MyModule::js/my-counter.js"/> </head> </body> </page>
Use the Component in PHTML
Apply the component to your HTML using x-data:
<div x-data="myCounter"> <p>Current Count: <span x-text="count"></span></p> <button @click="increment" class="bg-indigo-600 text-white py-1 px-3 rounded">+</button> <button @click="decrement" class="bg-red-600 text-white py-1 px-3 rounded">-</button> </div>
This approach is ideal for encapsulating more intricate logic while maintaining a clean HTML structure.
Wrap Up
Hyvä UI components are a cornerstone of building high-performance Magento 2 stores. By understanding their foundation in Tailwind CSS and Alpine.js, and by following the clear methods for adding them—whether directly in PHTML, via reusable template-parts, or as custom Alpine.js components—you can efficiently craft beautiful, fast, and maintainable frontends. Embrace the Hyvä way, and you’ll unlock a new level of productivity and performance in your Magento development.
