A Comprehensive Guide to Hyvä UI — What’s Included & Benefits

Hyvä theme, an improved Magento frontend, comes as a blank canvas that needs to be developed from scratch.

This required developers to build their storefronts from the ground up.

While this approach helped them ensure flexibility and speed, it also meant extra effort in designing and implementing UI components from scratch. However, in July 2023, Hyvä brought in a solution by introducing the “Hyvä UI library”.

In this guide, we’ll explore everything you need to know about Hyvä UI, from its key benefits to how to use it effectively for your Hyvä theme. We’ll talk about sections like:

• What it is, its versions, compatibility
• Its benefits
• What it includes
• How to use them for Hyvä theme development
• Does it still leave room for custom development
• # BONUS – A better alternative for cost reduction

… and more.

Let’s start.

; TLDR

• Hyvä UI is a ready-to-use component library designed for seamless integration with Hyvä Themes.
• It offers a collection of pre-built styles, templates, and UI elements to simplify storefront development with Hyvä. The library includes essential storefront elements such as headers, footers, product pages components, pop-ups, and more, all of which can be customized to match specific branding and design needs.
• Installation and customization are straightforward, enabling developers to implement and modify components for a tailored user experience quickly.
• It reduces development time and costs, making it easier to build a functional front without starting from scratch. However, it provides slightly less flexibility compared to fully custom-built solutions.
• InstaBuild, a Hyvä theme accelerator, could work better. Also, it’s a cost-effective solution. “A Bonus Section for this”.
• Need more customizations for your store? We’re Hyvä Gold Partners and have launched 25+ Hyvä-powered stores until now. We can help you design and develop your Hyvä theme to help you gain better benefits from it. Contact our experts today!

Understanding Hyvä UI

Here, we will talk about what Hyvä UI is, its key characteristics, and the different component versions available.

What is Hyvä UI?

Hyvä UI is a comprehensive library of pre-designed user interface components that facilitate Hyvä theme development.

It includes components like headers, menus, and banners that can be easily copied and pasted into a theme for quick customization. Hyvä UI also includes user interactions, backend functionalities, and a Figma file for styling and designing elements.

Hyvä UI can help developers build and launch stores faster with the Hyvä theme and cut down on development costs. It also helps create user-friendly websites with an intuitive design, easy navigation, and visually engaging interfaces.

# Its Characteristics

• It comes with a rich component library that includes a wide selection of elements like navigation menus, banners, product cards, and more, ensuring you have everything you need to create a modern eCommerce experience.
• The components follow a uniform style, keeping your storefront visually appealing without requiring extra design work.
• While the components are pre-built, they’re easy to tweak and adapt to match your brand’s design preferences.
• With reusable components, developers spend less time coding from scratch, reducing both development time and expenses.

Moreover, Hyvä UI is included free of charge with every Hyvä Themes license and also receives free updates.

Hyvä UI Component Versions

There are 5 versions of Hyvä UI available on Figma. Here’s the information on each version.

Versions	Status	Release Date
Hyvä UI V2.5.0	Current	January 10, 2025
Hyvä UI V2.4.0	Deprecated	July 3, 2024
Hyvä UI V2.3.0	Deprecated	April 26, 2024
Hyvä UI V2.1.0	Deprecated	December 1, 2023

Hyvä UI Component Version Compatibility

There are multiple versions of Hyvä UI components and Hyvä Themes, and you need to understand them before you choose to make a selection for your Magento project.

Each version of Hyvä UI introduces new components, enhancements, and fixes, but not all of them work with every Hyvä Theme version. Some of the UI components require Hyvä Themes v1.3, while others remain compatible with v1.2 and beyond.

To ensure a smooth integration of these UI library elements, always check the version badges included in each Hyvä UI component’s README.md file.

These badges help developers quickly identify which UI components can be integrated without conflicts and which may require an update to the Hyvä Theme, Tailwind CSS, or AlpineJS versions.

If you’re using an older version of Hyvä UI or Hyvä Themes, reviewing the Hyvä UI Changelog can help you understand what has changed and whether an upgrade is necessary.

By selecting the right versions, you ensure compatibility, performance, and access to the latest features without unnecessary development challenges.

;

Moving further, now let’s check the benefits of Hyvä UI library components for developers and Magento store owners.

What Are the Benefits of Hyvä UI?

Hyvä UI is designed to simplify Magento frontend development with Hyvä themes, making it faster, more efficient, and cost-effective.

Whether you’re a developer looking for an easy-to-use solution or a business owner wanting a high-performance eCommerce store, Hyvä UI brings multiple advantages that help you improve your overall website experience.

Let’s take a detailed look at how Hyvä UI can benefit your Magento store.

1# Ease of Development

One of the biggest challenges in Hyvä’s theme development is that the theme comes as a blank canvas.

This, however, brings complete freedom for developers and store owners to create a fully customized storefront; it requires them to design and develop every UI element from scratch. This requires additional development efforts.

Hyvä UI completely changes this by providing a library of pre-built, reusable components that are specifically designed to work with Hyvä Themes. These components include:

Hyvä UI Components Library Elements
✔️ Navigation Elements	✔️ Product Detail Page Elements
✔️ Content Elements	✔️ Cart & Checkout Elements
✔️ Shop Elements	✔️ Attention Grabbers
✔️ Product Category Page Elements	✔️ Additional Page Elements
✔️ Product Listing Page Elements	✔️ Styling Elements

… and more of Hyvä customizable storefront elements.

Using these ready-made components, developers can focus on customization and business-specific requirements rather than reinventing the entire UI structure from scratch. This significantly reduces the efforts needed to build a feature-rich Magento store.

Moreover, Hyvä UI comes with detailed documentation, so, it’s easier for both beginners and experienced developers to quickly adapt and start building without facing complexity.

2# Developer-Friendly & Modern Tech Stack

Hyvä UI is developer-friendly as it’s built with modern, efficient, and lightweight technologies, which makes it easy to work with, scalable, and optimized for performance. As you know, the Hyvä theme is built on AlpineJS and Tailwind CSS, which are lightweight and utility-first frameworks. They happen to be faster, easier, and more maintainable.

Developers no longer need to write excessive CSS, making the codebase cleaner. Also, the reliance on heavy JS libraries is reduced with it. By using this modern tech stack, Hyvä UI ensures:

✔️ Less CSS → No need for excessive custom styling, leading to a cleaner codebase.

✔️ Fewer Dependencies → Reduces reliance on heavy JavaScript libraries.

✔️ Easier Customization → More flexible and straightforward modifications.

✔️ Simplified Maintenance → Brings in development efficiency as no complex JavaScript-heavy frontend to manage.

For developers, this means a better workflow, fewer bugs, and an easier learning curve compared to traditional Magento frontends.

3# Free Access and Updates

One of the standout benefits of Hyvä UI is that it is free for all Hyvä Theme license holders. So, if you’ve already invested in the Hyvä ecosystem, you get access to all Hyvä UI components without any additional costs.

Additionally, Hyvä UI is actively maintained and updated by the Hyvä team. These updates include:

✔️ New UI components to enhance functionality
✔️ Bug fixes and performance improvements
✔️ Security updates to keep your store safe
✔️ Compatibility updates with Magento and Hyvä Themes

4# Reduction in Development Cost

Custom Hyvä theme development goes expensive as it comes as a blank theme, needing you to develop each element separately.

Hyvä UI helps reduce development costs in multiple ways:

✔️ Instead of coding everything from scratch, these ready-made UI elements cut down really well on development hours.

✔️ Since Hyvä UI does not rely on Knockout.js or RequireJS, the amount of JS and technical needs are lesser over time.

✔️ Hyvä UI is easy to work with, meaning development teams can complete projects faster, leading to lower costs.

5# Faster Time to Market

When building a Magento store with Hyvä Theme, developers usually start with a blank slate, meaning they need to design and code every UI component from scratch. Hyvä UI removes this hurdle by providing a ready-to-use library of pre-built components, allowing developers to focus on applying basic customizations only.

This helps you get your Magento store live within weeks and not months.

6# Better User Experience and Accessibility

Lastly, each Hyvä UI is designed with users in mind. A store with greater aesthetics isn’t great, it needs to be easy to navigate, intuitive to use, and accessible to all users, including those with disabilities.

• First Hyvä UI is built with mobile-first principles, ensuring that the store looks and functions great on any device.
• Its well-structured UI design makes it easier for customers to find what they need.
• Hyvä UI follows best practices for web accessibility, ensuring that your store is usable by people with disabilities.

Overall, each UI element follows standard practices that improve user experience.

;

And yes, that was all for the benefits of Hyvä UI. Now, let’s check what the Figma files of Hyvä UI include.

Hyvä UI in a Nutshell — What You Get With it?

Firstly, Hyvä UI comes in as a figma file which includes all Hyvä UI elements, making the design process much more efficient.

Within this file, you get each element under defined layers, making it easy for designers and developers to collaborate and stay aligned to bring in efficiency. Also, each of the UI elements come with several variants and can be adjusted to suit your needs.

Now, let’s take a closer look at these key UI components and understand what it actually brings for you.

1. Fixed Elements

Fixed elements include UI designs for headers and footers. And you know how essential these sections are in your website. Let’s explore more about the designs provided by Hyvä UI for the header and footer.

# Headers

There are three header variations in Hyvä UI:

1. Clean: A minimal design where the search bar and notifications float within the layout.
2. Compact: Features a taller container to highlight the search bar.
3. Stacked: Displays multiple USPs on larger screens, reducing to one on smaller viewports.

# Footers

Hyvä UI offers two footer options:

1. Clean: A simple, stacked layout.
2. 4-Column Newsletter: A structured four-column design that collapses into a single column, with the newsletter form spanning full width on smaller screens.

2. Navigational Elements

Next, Hyvä UI offers a range of navigational elements designed for ease of use and consistency across all screen sizes.

# Buttons

It includes four button styles to fit different design needs, such as Default, Primary, Secondary, and Flat.

# Menus

There are four menu variations in Hyvä UI:

• Menu A: With simple static links.
• Menu B: Four-column mega menu.
• Menu C: Vertical dropdown with four columns.
• Menu D: Shop dropdown.

# Mobile Menu

Two mobile-friendly menu styles:

• Scroll: Continuous scrolling navigation design.
• Tabs: Tabbed navigation designs for better organization.

# Pagination

For pagination, Hyvä UI offers six clean and simple design styles that are optimized for all screen sizes, from extra-small phones to large desktop displays.

# Breadcrumbs

It offers five simple and clean breadcrumb designs for intuitive navigation.

# Shortcuts

There are four streamlined shortcut designs for quick access to key actions.

# Scroll-to-top

It offers two types of scroll-to-top buttons, each with three design variations.

• First, there are simple designs that offer basic scroll-to-top functionality.
• And you also get action-oriented designs for back-to-top buttons with enhanced interaction.

3. Content Elements

Hyvä UI provides structured and adaptable content elements that ensure readability, clarity, and engagement across all screen sizes. Each element is optimized for responsiveness, maintaining a balanced visual hierarchy and seamless user experience.

Let’s explore them each.

# Content Blocks

There are two general content block styles:

• General Content A: Text-based, with title and pre-title sizes adapting to the viewport size.
• General Content B: Visual-focused, featuring a split image layout.

# Banners

There are four banner styles for different content layouts:

1. Single: A full-width banner.
2. Split: A two-part banner layout.
3. Grid [2]: Two banners in a grid format.
4. Grid [4]: Four banners in a grid format.

# CTA

You’ll find around three CTA styles designed to drive the utmost engagement.

1. Image-based CTA with a background image.
2. Text-only banner with a button.
3. Split layout for a structured CTA presentation.

# Sliders

There are two slider types for dynamic content display.

• Basic: Simple image slider, with two variations for different viewports.
• Carousel: Auto-scrolling slider with timed intervals.

# Accordion

It includes two clean and simple designs for collapsible content.

# Testimonials

Two layout styles for showcasing customer reviews.

• Simple: Minimal design with two variations.
• Card: Card-based layout with two variations.

# USPs

Lastly, you’ll find three styles for highlighting key selling points.

1. Icons: Displayed with or without a background shape.
2. Cards: Organized in a card-style layout.
3. Compact: Stacked and space-saving design.

4. Shop Elements

For shop elements, Hyvä UI provides a design option for “Product Swatches” displaying text, color, and images.

5. Product Category Page Elements

As product category page elements, Hyvä UI offers two different elements with variant options.

• Grid Images: Display categories in a grid or slider format.
• Grid Patterns: Organized grid layouts for better visual presentation.

6. Product Listing Page Elements

Hyvä UI provides product listing page elements with intuitive filtering and product cards.

Filters come in two clean designs, focusing on making navigation effortless, while product cards are available in both vertical and horizontal layouts.

7. Product Detail Page Elements

Hyvä UI offers multiple product detail page elements, including design elements for product data, reviews, image gallery, sticky add-to-cart button, and more.

Let’s explore the offerings in detail.

# Product Data

It includes three different design styles to display product data.

1. Basic: Displays product specifications in a structured format.
2. AccordiTabs: Tab-based layout with an accordion-style option.
3. Highlights: Image-focused highlights for key product features.

# Reviews

There are two design options available for the review section on the product detail page.

• Basic: Includes text reviews only.
• Minimal: A minimal review with user avatars.

# Gallery

In Hyvä UI, you’ll find four image gallery design options to place in your product visuals.

1. Basic image gallery with horizontal and vertical layout options.
2. Fancy image gallery with enhanced layout.
3. Continuous scroll gallery, flowing layout ideal for showcasing high-quality imagery.
4. Splide gallery that brings in a smooth and interactive image browsing experience.

# Sticky add-to-cart

Hyvä UI includes a simple Sticky Add-to-Cart design to keep the button visible on the product detail page for better accessibility.

8. Cart & Checkout Elements

Next in the Hyvä UI library, you get intuitive and responsive design elements for the cart and checkout page.

First, you’ll get Mini Cart designs, which are basic cart drawers for a structured layout and a mini cart pop-over for quick access.

Additionally, the AJAX Add-to-Cart feature design provides a seamless shopping experience with a simple notification and modal combination, confirming successful product additions.

9. Attention Grabbers

Hyvä UI provides versatile UI elements for user engagement, mostly to keep them hooked.

1. Cookies: Three cookies notice banner styles are available. Including full-width banners, overlay banners, and simple/elegant banners.
2. Modals: A clean design with optional icons and secondary action buttons, stacking buttons on smaller screens.
3. Notifications: Two types of design are available. Simple text-based or full-width compact for better visibility.
4. Pop-ups: Two newsletter styles are available. One with a featured image (vertical & horizontal) and another with a large headline.

10. Additional Page Elements

Then, with Hyvä UI, you get some additional page elements for order confirmation and error page messaging.

# Order Confirmation

• A modern, improved layout over the standard Magento order confirmation page.

# Error Page

There are two available styles.

1. Simple, combining text-based messaging with a widget area
2. and Split, featuring additional design elements for a more polished look.

11. Styling Elements

Hyvä UI also has styling elements to ensure a cohesive and customizable design system throughout the website.

1. First, it comes with a Tailwind CSS color palette, including gradient styles, all available in Figma.
2. Then Typography elements that follow Tailwind’s standard properties for consistency.
3. Followed by breakpoints, margins, and padding that adhere to Tailwind’s responsive system, ensuring adaptability across devices.
4. Additionally, element styles such as shadow, border radius, and backdrop blur.

12. Shared Components

Lastly, you’ll find a few shared UI components in the Hyvä library. It offers components to maintain consistency and flexibility across the interface. It includes buttons, input fields, dropdowns, checkboxes and radio buttons, icons, shop components, image frames, and more to help create a better design structure.

These shared components ensure design consistency, usability, and adaptability across various elements of Hyvä UI.

;

And that was all on UI elements you get with the Hyvä UI components library. Now, let’s check how you make actual use of it.

How To Use Hyvä UI Library Components for Hyvä Theme Development?

Each Hyvä UI library component is designed for easy integration. To use Hyvä UI library components easily when you develop a Hyvä theme. Here’s an overview on how you use it.

1. Pick a Component – Select the UI elements that fit your store’s design.
2. Follow Simple Steps – Each component includes a guide on how to implement it. Each Hyvä UI component includes a dedicated README.md file within its folder, providing clear, detailed instructions for implementation. In most cases, using a Hyvä UI component is as simple as copying the template file into your Hyvä theme, with possible minor adjustments to the Tailwind configuration.
3. Integrate & Adjust – Copy the component into your Hyvä theme. You may need to add some minor styling customizations to match your design preferences.

However, make sure that you don’t clone the Hyvä UI repository directly into your Magento project or theme.

This can cause issues such as:

• Unnecessary bloat – Extra Tailwind classes may increase your styles.css file size.
• Potential site breakages – Future updates might remove or modify components, leading to compatibility issues.

💡 Copy only the necessary templates into your project and customize them as needed.

For a detailed explanation, you can refer to Hyvä UI Demo Videos.

Does It Still Require Custom Development Of Hyvä Theme?

Yes, custom development is still necessary.

While Hyvä UI provides a rich set of ready-made components, they are individual ready-made UI components rather than a complete frontend solution. These components need to be assembled, styled, and integrated to match the specific design and functionality of your store.

Developers will still need to configure layouts, adjust Tailwind CSS settings, and ensure seamless interaction between different elements to create a fully functional Hyvä-based frontend for your Magento store.

Shall I introduce you to a Hyvä theme accelerator that reduces the scope of custom development?

I’ve added a bonus section just for it. Come in.

#BONUS — InstaBuild For Hyvä – Alternative to Custom Hyvä Theme Development

Okay, at this point, you’ve so many questions about what is InstaBuild for Hyvä, what it brings in, its cost, and everything.

And here, I’m sharing information on each of them.

What is InstaBuild for Hyvä?

InstaBuild for Hyvä is a theme accelerator that provides ready-made templates to enable merchants to launch their Hyvä-based Magento stores in a fraction of the typical development time.

It comes with a ready-made template library, available for various eCommerce business niche.

Unlike traditional Hyvä theme development, which involves building a custom theme from scratch, these templates offer a faster and more accessible way to gain the benefits of Hyvä Themes:

• Lightweight and fast-loading templates for improved performance.
• Responsive design for optimal viewing across all devices.
• Customizable to match brand identity.

InstaBuild Hyvä Themes vs. Custom Hyvä Theme Development

Let’s also compare InstaBuild with custom Hyvä theme development to figure out a more convenient option.

Feature	InstaBuild for Hyvä	Custom Hyvä Theme Development
Cost	Affordable, one-time cost of $550	Way expensive
Time to Market	Quicker	Slower
Customization	Quick to customize	Requires time and effort
Expertise Required	Requires a basic understanding of design side & on Hyvä	Requires proficiency in Hyvä development and frontend technologies
Maintenance	Handled by the template provider	Ongoing maintenance is needed
Performance	Pre-optimized	Custom optimization is needed

Know more on InstaBuild for Hyvä Themes.

If you’re looking for a convenient and affordable solution, InstaBuild is your way to develop a Hyvä theme for your Magento store.A perfect option for Hyva theme development cost reduction.

And if you’re looking for a more scalable and custom solution, custom development would be better.

WRAP TIME 🌯

And that’s all for introducing you to Hyvä UI.

I hope the information guided you enough on what it is, the benefits of usage, what it brings in, and how you can use it. And also, the alternative solution for it – the InstaBuild.

Further, I hope you make a good decision on what works better for you. Either custom development of the Hyvä theme with the usage of these UI components or the suggested accelerator.

But yes, our Hyvä theme experts are happy to consult you for your queries.

Book Your Free Consultation Call here.

;

Meanwhile, keep reading to solve your additional queries.

Additional FAQs – Hyvä UI

# What Is Hyvä UI Companion 01?

vä UI Companion 01 is a Figma File released by the Hyvä team, which contains a collection of payment method icons. These icons are designed to integrate into the Hyvä theme-based checkout process. These icons act as a ready-to-use component for enhancing the checkout experience on a Hyvä-powered Magento website.

Here are a few more questions about it, for which you can find answers.

Is it a part of Hyvä UI?

This companion file is considered an extension of the Hyvä UI library, which provides pre-built user interface components for developers working with Hyvä themes.

Why is it introduced?

The primary function of this companion is to offer a wide range of payment icons that can be directly implemented into a checkout page. The icons come in multiple styles (like light, dark, and outline), allowing for customization to match the overall design of a store.

# How Do You Upgrade Hyvä UI Components?

Upgrading Hyvä UI components involves a manual process, as these components are not automatically updated with new Hyvä UI library releases. To ensure your customizations remain intact while benefiting from the latest enhancements, follow these steps:

1. Review Hyvä’s documentation for version-specific changes.
2. Identify your custom components and compare them with the latest versions.
3. Also, you need to update selectively. For that, replace PHP/JavaScript files while keeping your Alpine.js tags unchanged.
4. Ensure your current custom styles don’t conflict with new updates.
5. Update the Theme Module – Run: “composer update Hyvä-themes/magento2-theme-module”

It’s suggested to keep a Hyvä developer on your side when you work around it, for better safety of your online presence.

For More: Hyvä UI Answers