Hyvä UI vs Hyvä Theme — wat is het verschil?

Hyvä UI vs Hyvä Theme — wat is het verschil?

Twee producten, één naam, eindeloze verwarring. Hyvä Theme is de volledige Magento 2 frontend die Luma vervangt. Hyvä UI is een losse componentbibliotheek die je daar bovenop — of compleet los van — gebruikt. Wij zien bij klanten regelmatig dat ze denken dat één licentie het andere insluit. Dat is niet zo.

Hyvä Theme: de volledige Magento 2 frontend

Hyvä Theme vervangt de volledige Luma-stack in Magento 2. Dat betekent: geen RequireJS, geen jQuery, geen Knockout. In plaats daarvan: Tailwind CSS, Alpine.js en een sterk vereenvoudigde template-laag.

Wat je krijgt:

• Volledige vervanging van Luma-frontend (layout XML, templates, checkout)
• Tailwind + Alpine als enige JavaScript-afhankelijkheden
• Eigen checkout-module (los verkrijgbaar als Hyvä Checkout)
• Compatibility modules voor populaire extensies
• Lighthouse-scores van 95+ op productieomgevingen — haalbaar, niet gegarandeerd
• Circa 95% minder JavaScript dan Luma

Hyvä Theme is een Magento-specifiek product. Je kunt het niet los van Magento 2 gebruiken. Dat is de kern van het verschil met Hyvä UI.

Hyvä UI: design system + componentbibliotheek

Hyvä UI levert:

• Kant-en-klare UI-componenten: buttons, forms, modals, dropdowns, accordions, navigatie, tabs, product cards
• Design tokens die 1-op-1 matchen met een Figma Community-bestand
• Framework-agnostisch gebruik: Magento 2, Laravel, headless setups, statische sites
• Eenmalige licentie van circa 250 euro per ontwikkelaar/project, geen abonnement

De kern van Hyvä UI is het Figma-bestand. Designers werken in Figma met exact dezelfde tokens als de code gebruikt. Geen interpretatiestap tussen design en implementatie.

Vergelijkingstabel

Wanneer kies je welk product?

• Je een bestaande Magento 2 store heeft die vastloopt op Luma-performance
• Je klaar bent met RequireJS en jQuery als bouwstenen voor je frontend
• Je een volledige frontend-rebuild wilt met bewezen resultaten
• Je extensies gebruikt die al Hyvä-compatible zijn

• Je al op Hyvä werkt en consistente componenten wil voor je team
• Je een Laravel-project, headless setup of statische site bouwt
• Designers en developers in hetzelfde design system willen werken
• Je losse componenten wil hergebruiken zonder een volledige Magento-migratie

• Je een Hyvä Theme store bouwt met een eigen design system
• Je maatwerk UI-componenten wil die consistent zijn met je Figma-designs
• Je een team hebt waarbij designer en developer hetzelfde startpunt nodig hebben

Wij zien bij klanten dat de combinatie het meest rendeert bij grotere Magento 2 stores waar design en development gelijktijdig lopen. Hyvä UI zorgt dat de Figma-designs direct te vertalen zijn naar template-code zonder vertaalslag.

Wat levert het op in de praktijk?

Luma laadt gemiddeld 300–500 KB JavaScript per pagina. Een Hyvä Theme-store zit op 20–40 KB. Dat verschil is zichtbaar in Lighthouse, maar ook in conversie. Langzame mobiele pagina's kosten omzet — niet alleen een slechte score.

Hyvä UI voegt hier nog een laag aan toe. Componenten zijn al geoptimaliseerd voor minimale JavaScript. Geen third-party UI-frameworks, geen build-step die megabytes toevoegt aan je bundle. Je voegt wat Tailwind-classes en een Alpine-directive toe, klaar.

Wat wij in de praktijk meten op Hyvä-projecten:

• Lighthouse Performance: structureel 90–98 op mobiel
• Time to Interactive (TTI): onder de 2 seconden op matige verbindingen
• Core Web Vitals (LCP, CLS, INP): groen in Search Console na migratie

Dit zijn geen verkooppraatjes. Dit zijn resultaten die wij op productiesites meten. Met Luma halen dezelfde stores zelden boven de 40.

Hyvä UI technisch bekeken

Hyvä UI is HTML-first. Dat betekent: componenten zijn stukken HTML met Tailwind-classes en Alpine.js-directives. Geen NPM-package die je installeert, geen virtual DOM, geen build-step verplicht (al kun je Tailwind wel via een build-pipeline draaien).

Een eenvoudig voorbeeld van een Hyvä UI accordion in gebruik:

<div x-data="{ open: false }">
  <button @click="open = !open" class="flex w-full justify-between py-4 font-medium">
    Vraag of sectietitel
    <span x-text="open ? '−' : '+'"></span>
  </button>
  <div x-show="open" x-cloak class="pb-4 text-gray-600">
    Antwoord of inhoud van de sectie.
  </div>
</div>

Geen dependencies. Geen framework. Gewoon HTML, Tailwind en Alpine. Dat is de filosofie van Hyvä UI.

Meer achtergrond over wat Hyvä UI is en doet lees je in dit artikel.

Wanneer Hyvä UI niet de juiste keuze is

Eerlijk is eerlijk. Hyvä UI past niet bij elk project.

• Je een React- of Vue-project bouwt. Hyvä UI is Alpine-gebaseerd. Componenten zijn niet direct bruikbaar in component-frameworks met virtual DOM.
• Je een team heeft dat al een eigen design system draait. Een tweede systeem introduceren kost meer dan het oplevert.
• Je minimale maatwerk doet. Als je een standaard Hyvä Theme installeert met weinig UI-aanpassingen, is de extra componentbibliotheek overbodig.
• Je geen designers in je proces heeft. Het Figma-bestand is het sterkste argument voor Hyvä UI. Zonder designer die Figma gebruikt, mis je de helft van de waarde.

Hyvä UI is ook geen vervanging voor een goede frontend-architect. De componenten zijn een startpunt, geen volledige oplossing. Je combineert ze, past tokens aan op je huisstijl en bouwt maatwerk bovenop.

Hyvä Theme + Hyvä UI: de combinatie

Veel Hyvä-projecten starten met het theme en gebruiken Hyvä UI als componentbibliotheek voor maatwerk. De voordelen van die combinatie:

• Consistentie: design tokens in Figma komen overeen met Tailwind-configuratie in code
• Snelheid: componenten zijn al gebouwd, getest en performance-geoptimaliseerd
• Onderhoud: één systeem voor zowel designers als developers
• Schaalbaarheid: nieuwe pagina's of features bouwen op bestaande componenten

De workflow ziet er dan zo uit: designer maakt scherm in Figma met Hyvä UI-componenten. Developer neemt de HTML-structuur uit de Hyvä UI-documentatie en past Tailwind-classes aan op de tokens uit het Figma-bestand. Resultaat: design en code zijn synchroon, zonder aparte vertaalstap.

Veelgestelde vragen

Nee. De licentie kost eenmalig circa 250 euro per ontwikkelaar of project. Er is geen abonnement, geen jaarlijkse verlenging.

Nee. Hyvä UI werkt in elke omgeving die Tailwind en Alpine ondersteunt. Magento 2, Laravel, statische HTML — het maakt niet uit.

Nee. Luma vervang je met Hyvä Theme. Hyvä UI is een componentbibliotheek bovenop welke frontend dan ook.

Hyvä UI is geen Magento-module. Het zijn HTML/Tailwind/Alpine-componenten. Compatibility met Magento-extensies is niet van toepassing — dat speelt op Hyvä Theme-niveau.

Wat doen wij bij coding.nl?

Wij zijn Hyvä Certified senior developers. We bouwen Magento 2 stores op Hyvä Theme, werken met Hyvä UI als design system en koppelen dat aan Laravel-maatwerk waar nodig. Klein team, geen projectmanagers, geen tussenlagen.

We werken voor merchants door heel Nederland. Geen uurtje-factuurtje. Wel duidelijke afspraken over scope en resultaat.

Twijfel je over welke keuze past bij jouw project — Hyvä Theme, Hyvä UI, of allebei? Vraag een gratis Tech Check aan via /contact. We kijken mee in je huidige setup en geven direct advies.