Wat is Hyvä UI? Componenten, licentie en kosten uitgelegd

Hyvä UI is de componentbibliotheek van Hyvä: kant-en-klare, werkende templates voor een Magento 2-winkel op een Hyvä theme, plus een Figma-bestand met dezelfde componenten. Sinds de Hyvä Theme in november 2025 gratis en open source werd, is Hyvä UI een los product. Dat roept vragen op: wat krijg je, wat kost het, wie heeft het al, en wanneer is het zonde van het geld? Dit artikel beantwoordt ze alle vier.

Wat is Hyvä UI precies?

Hyvä UI is een bibliotheek met vooraf gebouwde componenten voor Hyvä Themes. Gebouwd met Tailwind CSS en Alpine.js, HTML-first, met zo weinig JavaScript als mogelijk.

Het verschil met een gewone UI-kit: de componenten zijn geen losse HTML-snippets, maar functionele .phtml-templates met de Magento-logica erin. Een minicart toont echte cart-data, een categoriefilter werkt met de lagen-navigatie, een add-to-cart-knop doet een echte request. Hyvä noemt het zelf het functionele equivalent van Tailwind UI.

Je installeert Hyvä UI niet als dependency die je hele frontend overneemt. Je kopieert per component de template naar je eigen theme en past hem daar aan. Daarover meer verderop.

Hyvä UI, Hyvä Theme en Hyvä Commerce: wat is wat?

De productnamen lijken op elkaar en sinds de licentiewijziging van november 2025 is de verwarring alleen maar groter geworden.

De Hyvä Theme vervangt de Luma-stack (RequireJS, jQuery, Knockout) door Tailwind en Alpine. Dat is de grote ingreep en die is nu gratis. Hyvä UI is een gereedschapskist die je daar bovenop legt. Wie Hyvä UI koopt, krijgt geen theme; wie een Hyvä theme draait, krijgt Hyvä UI niet automatisch.

Hyvä Commerce bundelt Theme, Checkout en UI, aangevuld met onder meer Hyvä CMS, een admin-dashboard, een image editor en media-optimalisatie. Heb je Commerce, dan hoef je Hyvä UI dus niet apart te kopen.

Een uitgebreidere vergelijking van de keuzes vind je in Hyvä UI vs. Hyvä theme: wat kies je wanneer.

Licentie en kosten

Wat je krijgt

De Hyvä UI-licentie kost eenmalig 250 euro en geldt voor één Magento 2-installatie, met onbeperkt domeinen en storeviews. Daarvoor krijg je:

• Toegang tot de broncode van alle componenten
• Het Figma-bestand met alle componenten
• Gratis updates, inclusief nieuwe componenten zodra die uitkomen
• CMS-componenten voor content die je later blijft beheren
• Support via de Hyvä Slack-community en het klantportaal

Let op de licentie-eenheid: het is per Magento-installatie, niet per persoon in je team. Een bureau dat tien winkels bouwt, heeft tien licenties nodig. Controleer bij aankoop altijd de actuele voorwaarden op hyva.io, want die zijn in 2025 al eens fors gewijzigd.

Wie heeft het al?

• Licenties van vóór 10 november 2025. Wie toen een betaalde Hyvä Theme-licentie had, houdt toegang tot Hyvä UI en premium support.
• Hyvä Commerce. Hyvä UI zit in het pakket.
• Nieuwe winkels op de open source theme. Die hebben een losse Hyvä UI-licentie nodig als ze de componenten willen gebruiken.

Wat het niet kost

Geen abonnement en geen jaarlijkse verlenging. Updates zitten erbij. Voor een budgetgesprek met management of klant is het een eenmalige tool-investering per winkel, geen doorlopende post.

De terugverdienrekening

Je kunt dit simpel zelf narekenen. De vraag is: hoeveel uur kost het je team om de componenten die je nodig hebt zelf te bouwen, te testen en toegankelijk te maken? Een minicart, een mega-menu, een productgalerij met zoom en swipe, een sticky add-to-cart, een cookiemelding.

Deel 250 euro door je uurtarief en je weet bij hoeveel bespaarde uren de licentie quitte speelt. Bij een normaal Nederlands bureautarief is dat een handvol uren. Voor één goed werkend mega-menu ben je meestal al meer kwijt.

Drie argumenten die in een intern of klantgesprek werken:

1. Eenmalig bedrag versus uren bouwwerk. De rekensom hierboven, met jullie eigen tarief.
2. Minder discussie in review. Design en code starten vanuit hetzelfde component, dus minder rondes over afwijkende stijlen.
3. Geen doorlopende kosten. Niets om elk jaar opnieuw te verantwoorden.

Neem de licentie als aparte regel op in de projectbegroting. Transparant en verdedigbaar.

Het componenten-overzicht

Hyvä UI bevat tientallen componenten, de meeste in meerdere varianten (A, B, C). De actuele lijst staat in de Hyvä-documentatie; hieronder de indeling die wij hanteren.

Navigatie en layout

Overlays en feedback

• Modal en Popup (onder meer nieuwsbrief-popups met beeld of titel)
• Notification in een simpele en een volle-breedte-variant
• Cookie-notice in drie varianten
• Loaders: spinner, ping en "dancers"
• Minicart als klassieke drawer of als popover

Overlays zijn waar Luma het zwaarst weegt: een standaard quickview of minicart haalt Knockout en een stapel modules binnen. In Hyvä UI is een modal Alpine-state in de template zelf.

Commerce

• Product-card met swatches
• Gallery in vier varianten (fashion, fancy, grid en een Splide-slider)
• Swatches, Ajax-ATC (add-to-cart zonder page reload) en Sticky-ATC
• Product-data: specificaties, "accorditabs" en highlights
• Product-reviews in basis- en minimale variant
• Category-filter, standaard en een variant voor Elasticsuite
• Categories als grid met afbeeldingen of patronen
• Order-confirmation voor de bedankpagina

Content

Accordion, Banner (default, split, tekst), Card, Generic-content, Slider (basis, marquee, productslider), Testimonial, USP (iconen, cards, compact), Embed, Map, Error-page en een Dark-mode-toggle.

Welke componenten voor welk project

Een B2B-catalogus leunt op filters, product-data en snelle zoek. Een fashion-winkel op galerijen, swatches en banners. De basis is hetzelfde: HTML-first, Tailwind voor styling, Alpine voor interactie.

Hoe je een component gebruikt

Er is geen npm-pakket dat je importeert. De werkwijze volgens de Hyvä-documentatie:

1. Haal de bibliotheek op via Composer als dev-dependency, of download hem via het Hyvä Portal:

composer require --dev hyva-themes/hyva-ui

1. Open de README.md in de map van het component dat je wilt gebruiken. Daar staan de specifieke stappen en eventuele vereisten.
2. Kopieer de template naar je eigen Hyvä theme.
3. Pas indien nodig je Tailwind-configuratie aan, zoals de README aangeeft.

Kopieer nooit de hele bibliotheek naar je theme of Tailwind-scan. Dan genereert Tailwind classes voor componenten die je niet gebruikt, wordt styles.css onnodig groot en kan een update van Hyvä UI je winkel onverwacht veranderen.

Een simpel voorbeeld in Hyvä UI-stijl: een FAQ-accordeon. Sinds Hyvä 1.4 lost Hyvä inklapgedrag zoveel mogelijk op met het native details-element en CSS, zonder JavaScript:

<details class="group border-b border-gray-200">
  <summary class="flex cursor-pointer items-center justify-between px-4 py-3 font-medium">
    Wat kost levering?
    <svg class="h-5 w-5 transition-transform group-open:rotate-180" aria-hidden="true" viewBox="0 0 20 20" fill="currentColor">
      <path d="M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z"/>
    </svg>
  </summary>
  <div class="px-4 pb-4 text-sm text-gray-600">
    Levering is gratis boven een minimumbedrag. Daaronder geldt het standaardtarief.
  </div>
</details>

Geen framework, geen virtual DOM, geen extra bundle. Waar wel interactie nodig is, zit die als Alpine-component in dezelfde template. Hoe je zelf componenten in deze stijl bouwt, lees je in het artikel over Hyvä UI custom componenten.

Het Figma-bestand

Bij Hyvä UI hoort een Figma-bestand met alle componenten, te vinden via het Hyvä-profiel op Figma. Het bestand werkt met text-, colour- en effect-styles, shared components en varianten, en de meeste componenten zijn met Auto Layout opgebouwd. Pas je een style aan, dan verandert die overal in de bibliotheek.

Het praktische voordeel: designer en frontend starten vanuit hetzelfde component. De designer weet wat er al bestaat, het team weet wat er bedoeld wordt. Dat scheelt review-rondes over spacing en states. De Figma-styles en je Tailwind-config blijven wel twee plekken die je samen bijhoudt; hoe je die koppelt, staat in Hyvä UI als design system in Figma en in design tokens koppelen aan Tailwind.

Performance: waarom maakt dit uit?

Hyvä UI volgt dezelfde filosofie als de Hyvä Theme: alleen JavaScript waar het echt nodig is. Een statische product card heeft geen JavaScript nodig. Een card met swatch-selectie krijgt een klein Alpine-component, geen RequireJS-module met een Knockout-binding.

Wat dat in jouw winkel oplevert, hangt af van meer dan de componentbibliotheek: hosting, afbeeldingen, third-party scripts en extensies tellen allemaal mee. Hyvä UI voorkomt vooral dat je zelf componenten bouwt die alsnog zware JavaScript binnenhalen. Meet het effect zelf, het liefst met echte gebruikersdata (RUM) in plaats van alleen Lighthouse in het lab.

Kun je Hyvä UI buiten Magento gebruiken?

Niet zoals het bedoeld is. De componenten zijn Magento-templates voor Hyvä Themes en de licentie geldt per Magento-installatie. Voor een Laravel-applicatie of een statische site kun je dezelfde technieken gebruiken (Tailwind en Alpine), maar dan bouw je je eigen componenten. Draai je een React- of Vue-frontend, dan is Hyvä UI sowieso geen logische keuze.

Wanneer Hyvä UI niet de juiste keuze is

Je draait op Luma en gaat niet over. Hyvä UI vraagt een Hyvä theme. Op Luma met RequireJS, jQuery en LESS heb je er niets aan. Een migratie naar Hyvä is dan de eerste stap.

Je hebt al een volwassen eigen componentenset. Werkt je team al jaren met een goed gedocumenteerde eigen set voor Hyvä, dan voeg je een tweede systeem toe dat je moet synchroniseren.

Je design wijkt fundamenteel af. De componenten zijn een startpunt. Moet elk component volledig anders, dan ben je meer tijd kwijt aan ombouwen dan aan bouwen.

Je hebt Hyvä Commerce of een oude Theme-licentie. Dan heb je Hyvä UI al. Niet dubbel kopen.

Je team kent Alpine en Tailwind niet. De leercurve is laag, maar een krappe deadline is niet het moment om een nieuwe stack te introduceren. Begin dan met een proof-of-concept.

Je hangt aan Luma-extensies die jQuery of Knockout vereisen. Dat is een compatibiliteitsprobleem van je theme-keuze, niet van de componentbibliotheek. Los dat eerst op.

Hyvä UI in combinatie met een Hyvä theme

De bedoelde setup: de Hyvä theme regelt de Magento-integratie, Hyvä UI levert de componentlaag. Je krijgt:

• Een Magento 2-frontend zonder RequireJS- en Knockout-bagage
• Kant-en-klare componenten in dezelfde stack
• Een Figma-bestand dat aansluit op wat er in de code bestaat

Wij zetten dit in bij Magento 2-projecten waar UI-kwaliteit en snelheid allebei tellen. Header, PDP en categoriepagina's komen uit dezelfde component-set. Dat beperkt technische schuld en houdt onderhoud voorspelbaar.

Hyvä UI vs. andere component-libraries

Het onderscheid zit in de Magento-logica. Tailwind UI, Flowbite en DaisyUI leveren markup; Hyvä UI levert componenten die al met Magento praten. Voor een project buiten Magento zijn die andere libraries dus vaak de betere keuze.