{"id":22224,"date":"2025-09-20T10:00:00","date_gmt":"2025-09-20T04:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=22224"},"modified":"2025-09-20T16:12:35","modified_gmt":"2025-09-20T10:42:35","slug":"hyva-ui-components","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/hyva-ui-components\/","title":{"rendered":"Hyv\u00e4 UI Components: What are They &amp; How to Use"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Unlike traditional Magento themes that rely on heavy JavaScript frameworks and extensive CSS, Hyv\u00e4&#8217;s approach is different with its UI components.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hyv\u00e4 UI components are the best to use if you know how to use them correctly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This blog explains what these components are, lists out the popular ones, and how to integrate them into your Magento store.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Exactly Are Hyv\u00e4 UI Components?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hyv\u00e4 UI components are a collection of pre-styled and pre-scripted UI elements designed to be the building blocks of your Hyv\u00e4-powered Magento frontend.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">They are not a separate, heavy library or a complex framework, but rather an integral part of the Hyv\u00e4 theme&#8217;s architecture.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s what defines them:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tailwind CSS for Styling<\/li>\n\n\n\n<li>Alpine.js for Interactivity<\/li>\n\n\n\n<li>Performance-First Design<\/li>\n\n\n\n<li>Not &#8220;Black Boxes&#8221;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Popular Hyv\u00e4 UI Components<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hyv\u00e4 provides a robust set of UI components to cover most typical e-commerce needs. Here are some of the most commonly used ones.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>UI Component<\/strong><\/td><td><strong>Purpose<\/strong><\/td><td><strong>Characteristics<\/strong><\/td><\/tr><tr><td><strong>Buttons<\/strong> (&lt;button&gt;, &lt;a&gt; with button styles)<\/td><td>Trigger actions, submit forms, navigate.<\/td><td>Styled with Tailwind for states and sizes; uses @click for Alpine.js interactions.<\/td><\/tr><tr><td><strong>Form Input Fields<\/strong> (&lt;input&gt;, &lt;select&gt;, &lt;textarea&gt;)<\/td><td>Gather user input.<\/td><td>Consistent styling; often uses x-model for data binding and data-validate for validation.<\/td><\/tr><tr><td><strong>Modals \/ Pop-ups<\/strong><\/td><td>Display transient information or confirmations.<\/td><td>An overlay triggered by a click; uses x-show with transitions.<\/td><\/tr><tr><td><strong>Tabs<\/strong><\/td><td>Organize content into distinct, navigable sections.<\/td><td>Allows switching between content panels without a page reload; uses Alpine.js to manage state.<\/td><\/tr><tr><td><strong>Accordions<\/strong><\/td><td>Present collapsible content sections.<\/td><td>Saves vertical space by showing one section at a time; uses Alpine.js&#8217;s x-show and x-collapse.<\/td><\/tr><tr><td><strong>Dropdowns<\/strong><\/td><td>Provide a list of options or a sub-menu.<\/td><td>Used for menus, currency\/language switchers, or complex filters.<\/td><\/tr><tr><td><strong>Messages<\/strong> (Success, Error, Info)<\/td><td>Provide feedback to the user after an action.<\/td><td>Dynamically displayed and dismissible; handled by window.dispatchMessages().<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add Hyv\u00e4 UI Components to Your Theme?&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Adding components in Hyv\u00e4 is straightforward because you&#8217;re working directly with HTML, Tailwind, and Alpine. There are three primary methods:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Direct HTML Inclusion in PHTML Files<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This is the simplest and most common way to add a component.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You find the component&#8217;s markup (either from the Hyva_Theme module, Hyva_Checkout if you&#8217;re using it, or from Hyv\u00e4&#8217;s documentation\/examples) and paste it directly into your PHTML template.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Example: A Simple Button<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;button type=\"button\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=\"bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@click=\"alert('Hello from Hyv\u00e4!')\">\n\n\u00a0\u00a0\u00a0\u00a0Click Me\n\n&lt;\/button><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Since Tailwind CSS is processed and Alpine.js is loaded globally by the Hyv\u00e4 theme, this button will immediately have the specified styles and interactive behavior.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Using template-parts for Reusability and Organization (Recommended)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For components you&#8217;ll reuse across multiple pages or for better code organization, Hyv\u00e4&#8217;s template-parts system is the best approach.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Create the Template Part<br><\/strong><br>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).<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;button type=\"button\"\n\u00a0 \u00a0 \u00a0 \u00a0 class=\"bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded\"\u00a0 \u00a0 \u00a0 \u00a0 @click=\"console.log('Component button clicked!')\">\n\n\u00a0\u00a0\u00a0\u00a0Reusable Button\n\n&lt;\/button><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Include the Template Part. In your main PHTML file, use Magento&#8217;s block system to render your template part:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;h1>My Page&lt;\/h1>\n\n&lt;?php\n\n\/** @var \\Magento\\Framework\\View\\Element\\Template $block *\/\n\necho $block->getLayout()\n\n\u00a0\u00a0\u00a0\u00a0->createBlock(\\Magento\\Framework\\View\\Element\\Template::class)\n\n\u00a0\u00a0\u00a0\u00a0->setTemplate('MyVendor_MyModule::template-parts\/my-custom-button.phtml')\n\n\u00a0\u00a0\u00a0\u00a0->toHtml();\n\n?><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This makes your component modular and easy to manage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Custom Alpine.js Components with JavaScript Files<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For components with more complex logic or global state management, you can define dedicated Alpine.js components in a separate JavaScript file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Define Your Alpine.js Component<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Create a JS file (e.g., MyVendor_MyModule\/view\/frontend\/web\/js\/my-counter.js):<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ MyVendor_MyModule\/view\/frontend\/web\/js\/my-counter.js\n\ndocument.addEventListener('alpine:init', () => {\n\n\u00a0\u00a0\u00a0\u00a0Alpine.data('myCounter', () => ({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0count: 0,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0increment() {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.count++;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0decrement() {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.count--;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0}));\n\n});<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2: Load the JavaScript File<br><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add your JS file in your layout XML (e.g., my_module\/view\/frontend\/layout\/default.xml):<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n\n\u00a0\u00a0\u00a0\u00a0&lt;body>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;head>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;script src=\"MyVendor_MyModule::js\/my-counter.js\"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/head>\n\n\u00a0\u00a0\u00a0\u00a0&lt;\/body>\n\n&lt;\/page><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Use the Component in PHTML<br><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Apply the component to your HTML using x-data:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div x-data=\"myCounter\">\n\n\u00a0\u00a0\u00a0\u00a0&lt;p>Current Count: &lt;span x-text=\"count\">&lt;\/span>&lt;\/p>\n\n\u00a0\u00a0\u00a0\u00a0&lt;button @click=\"increment\" class=\"bg-indigo-600 text-white py-1 px-3 rounded\">+&lt;\/button>\n\n\u00a0\u00a0\u00a0\u00a0&lt;button @click=\"decrement\" class=\"bg-red-600 text-white py-1 px-3 rounded\">-&lt;\/button>\n\n&lt;\/div><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This approach is ideal for encapsulating more intricate logic while maintaining a clean HTML structure.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrap Up<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hyv\u00e4 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\u2014whether directly in PHTML, via reusable template-parts, or as custom Alpine.js components\u2014you can efficiently craft beautiful, fast, and maintainable frontends. Embrace the Hyv\u00e4 way, and you&#8217;ll unlock a new level of productivity and performance in your Magento development.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Unlike traditional Magento themes that rely on heavy JavaScript frameworks and extensive CSS, Hyv\u00e4&#8217;s approach is different with its UI components.&nbsp; Hyv\u00e4 UI components are&#8230;<\/p>\n","protected":false},"author":5,"featured_media":22286,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5869],"tags":[],"class_list":["post-22224","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hyva-themes"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/22224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=22224"}],"version-history":[{"count":6,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/22224\/revisions"}],"predecessor-version":[{"id":22841,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/22224\/revisions\/22841"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media\/22286"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=22224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=22224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=22224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}