Hyvä UI bevat tientallen kant-en-klare componenten, geordend in categorieën: forms, navigatie, overlays en commerce. Voor eenmalig ~250 euro haal je een volledig design system inclusief Figma-bestand — geen abonnement, geen lock-in.
Het Hyvä UI componenten-overzicht
Hyvä UI bevat tientallen kant-en-klare componenten, geordend in categorieën: forms, navigatie, overlays en commerce. Voor eenmalig ~250 euro haal je een volledig design system inclusief Figma-bestand — geen abonnement, geen lock-in. Dit overzicht laat zien welke componenten er zijn, wanneer je ze inzet en wanneer je er beter omheen kunt lopen.
Wat is Hyvä UI precies?
Hyvä UI is het officiële design system en de componentbibliotheek van Hyvä. Gebouwd op Tailwind CSS en Alpine.js. HTML-first, minimale JavaScript.Dat laatste is geen marketingpraatje. Luma draait op RequireJS, jQuery en Knockout — dat stapelt op. Hyvä UI gaat de andere kant op: alleen JavaScript waar het echt nodig is. Resultaat: ~95% minder JavaScript dan een standaard Luma-setup.
Hyvä UI is ook geen Hyvä theme. Een Hyvä theme vervangt de volledige Magento 2 frontend. Hyvä UI is een losse componentbibliotheek. Je kunt hem gebruiken bovenop een Hyvä theme, maar ook in Laravel, een headless setup of een statische site. Framework-agnostisch.
De componentcategorieën
Hieronder een overzicht van de belangrijkste categorieën met de beschikbare componenten en wanneer je ze inzet.
Forms
| Component | Gebruik je wanneer... |
|---|---|
| Text input | Standaard tekstvelden: naam, e-mail, zoek |
| Textarea | Langere vrije tekst, zoals opmerkingen bij een bestelling |
| Select / dropdown | Keuze uit een vaste lijst, bijv. landkeuze of sortering |
| Checkbox / radio | Meervoudige of enkelvoudige keuze |
| Toggle / switch | Aan/uit-keuze, bijv. nieuwsbrief opt-in |
| Form validation states | Visuele feedback bij fouten of succes, inclusief Alpine-koppeling |
Forms zijn het meest gebruikte onderdeel in checkout-flows en accountpagina's. De validatiestates zijn direct bruikbaar met Alpine.js zonder extra build-stap.
Navigatie
- Header navigation — horizontale menubar, geschikt voor desktop
- Mobile menu — slide-in of fullscreen overlay, triggered via Alpine
- Breadcrumbs — categoriepaden in Magento of Laravel-routes
- Pagination — productoverzichten, bloglijsten
- Tabs — productdetails, specificaties of filtercategorieën
- Sidebar navigation — filterpanelen, accountmenu's
Navigatie-componenten zijn waar Alpine.js het meest opvalt. State (open/dicht, actieve tab) zit direct in de HTML via x-data en x-show. Geen aparte JavaScript-module, geen bundler nodig.
Overlays
- Modal / dialog — bevestigingsschermen, quickviews, formulieren
- Drawer / slide-over — minicart, filterpanelen op mobiel
- Tooltip — hover-informatie bij icons of labels
- Notification / toast — tijdelijke systeemmeldingen
- Dropdown menu — contextmenus, user account-acties
Overlays zijn de categorie waar Luma het zwaarst telt. Een standaard Magento quickview laadt een volledige module inclusief Knockout. In Hyvä UI is een modal een paar regels Alpine.js en een focus-trap utility. Dat scheelt aantoonbaar in Time to Interactive.
Commerce
- Product card — productafbeelding, naam, prijs, CTA
- Product gallery — hoofdafbeelding + thumbnails, zoom
- Add to cart button — met loading state en feedback
- Price display — incl. BTW, kortingsprijzen, price ranges
- Review stars — reviewscore weergave
- Quantity selector — +/- input met min/max validatie
Dit zijn de componenten die in vrijwel elke Magento 2- of e-commerce build terugkomen. Ze zijn visueel consistent met de Figma-bestanden, dus een designer kan direct meewerken zonder dat er een vertaalslag nodig is tussen scherm en code.
Figma Community-bestand: design en code synchroon
Hyvä UI wordt geleverd met een Figma Community-bestand. Dat klinkt als een bijzaak, maar het is praktisch relevant.
Design tokens in Figma matchen 1-op-1 met de Tailwind-configuratie. Een kleurwissel in het ontwerp doorvoeren kost één aanpassing in tailwind.config.js. Geen handmatig nalopen van klassen in templates.
Voor teams waarbij een designer en developer samenwerken is dit het grootste voordeel. De component in Figma ziet er uit zoals de component in de browser. Geen interpretatie, geen "dat had ik anders bedoeld."
Hoe je een component gebruikt
Hyvä UI heeft geen npm-package en geen component library die je importeert. Je kopieert de HTML-template naar je project en past aan waar nodig. Dat voelt ouderwets, maar het is een bewuste keuze: geen versieconflicten, geen tree-shaking nodig, geen abstractielaag.
Een voorbeeld van een modale overlay in Hyvä UI-stijl:
<div x-data="{ open: false }">
<button @click="open = true" class="btn btn-primary">
Open modal
</button>
<div
x-show="open"
x-trap="open"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
>
<div class="bg-white rounded-lg p-6 max-w-md w-full">
<h2 class="text-lg font-semibold mb-4">Bevestigen</h2>
<p class="text-sm text-gray-600 mb-6">Weet je het zeker?</p>
<div class="flex gap-3 justify-end">
<button @click="open = false" class="btn btn-secondary">Annuleren</button>
<button class="btn btn-primary">Bevestigen</button>
</div>
</div>
</div>
</div>Dit is de volledige implementatie. Geen extra JavaScript-file, geen module-import. x-trap zorgt voor focus management; @keydown.escape sluit de modal bij Escape. Dat zijn toegankelijkheidseisen die hier gratis meekomen.
Meer over componenten zelf bouwen en aanpassen lees je in dit artikel over Hyvä UI custom componenten.
Performance in de praktijk
De claim "~95% minder JavaScript dan Luma" is geen marketingcijfer. Het komt uit de vergelijking tussen een standaard Luma-pagina (RequireJS + jQuery + Knockout + alle modules) en een Hyvä-pagina (Alpine.js als enige JavaScript-runtime).
Wat wij zien bij klanten die overstappen van Luma:
- Lighthouse Performance score van 40-60 naar 90-98 op productdetailpagina's
- Total Blocking Time daalt van 800-2000ms naar onder de 200ms
- Largest Contentful Paint onder de 2,5 seconden, ook op mobiel
Hyvä UI draagt hieraan bij door Alpine.js alleen te activeren op elementen die interactie nodig hebben. Een statische productcard heeft nul JavaScript. Een productcard met quickview-modal laadt Alpine pas als het element in het DOM zit.
Lighthouse 95+ is haalbaar. Maar: het hangt ook af van je hosting, je afbeeldingen en je third-party scripts. Hyvä UI is een onderdeel van het plaatje, niet de volledige oplossing.
Wanneer Hyvä UI niet de juiste keuze is
Hyvä UI is niet voor iedereen. Een paar situaties waarin je beter kunt kiezen voor een andere aanpak:
Je hebt een sterk afwijkend custom design. De componenten zijn een startpunt, geen eindpunt. Als je ontwerp fundamenteel afwijkt van de standaardcomponenten, ben je meer tijd kwijt aan aanpassen dan aan bouwen. In dat geval begin je beter vanaf nul met Tailwind. Je werkt volledig headless met een React of Vue frontend. Alpine.js en React of Vue werken niet goed samen in hetzelfde DOM-element. Hyvä UI is gebouwd voor Alpine.js. In een Next.js of Nuxt-setup gebruik je andere componentbibliotheken. Je wilt geen eenmalige kosten. De licentie is per ontwikkelaar of per project, eenmalig ~250 euro. Voor freelancers of kleine projecten is dat snel terugverdiend. Voor grote enterprises met tientallen developers kan de licentiestructuur vragen opleveren — check dat vooraf. Je zit vast aan Luma-extensies die jQuery vereisen. Hyvä UI werkt prima naast een Hyvä theme. Maar als jouw projectstack afhankelijk is van Luma-modules die jQuery of Knockout gebruiken, heb je een compatibiliteitsprobleem dat verder gaat dan de componentbibliotheek.Hyvä UI naast een Hyvä theme
De meeste projecten waarbij wij Hyvä UI inzetten, combineren het met een Hyvä theme. Dat is ook de bedoelde setup: de theme regelt de Magento-integratie, Hyvä UI levert de componentlaag.
Maar de scheiding is bewust. Je kunt Hyvä UI inzetten in een Laravel-project zonder Magento. Of als designsysteem voor een statische marketingsite die Tailwind gebruikt. De Figma-bestanden en de HTML-templates zijn niet gebonden aan Magento.
Wij hebben dit ook gedaan voor een klant met een aparte landingspagina-setup naast hun Magento-winkel: zelfde design tokens, zelfde componenten, consistente huisstijl over twee technische omgevingen.
Samengevat: welke componenten voor welk project
| Categorie | Primair gebruik |
|---|---|
| Forms | Checkout, accountpagina's, contactformulieren |
| Navigatie | Headermenus, filters, productcategorieën |
| Overlays | Minicart, quickview, bevestigingsdialogen |
| Commerce | Productlijsten, PDP, add-to-cart flows |
De keuze voor specifieke componenten hangt af van je projecttype. Een B2B-catalogus gebruikt andere componenten dan een fashion DTC-store. Maar de basis is overal hetzelfde: HTML-first, Tailwind voor styling, Alpine voor interactie.
Meer weten of twijfels?
Hyvä UI is een goede keuze voor de meeste Magento 2- en Laravel-projecten. Maar of het past bij jouw situatie hangt af van je stack, je design en je teamsamenstelling.
Wij doen regelmatig een gratis Tech Check voor teams die twijfelen: een kort gesprek over je huidige setup en wat er wel of niet haalbaar is. Geen verkoopgesprek, gewoon technisch advies. Neem contact op via /contact.
Geschreven door Ruthger Idema
15+ jaar ervaring in e-commerce development. Gespecialiseerd in Magento, Shopify en Laravel maatwerk.
Meer over ons team →