Hyvä UI buiten Magento (Laravel & headless)

Hyvä UI buiten Magento (Laravel & headless)

Hyvä UI kost eenmalig circa 250 euro en werkt in elk project waar Tailwind en Alpine.js draaien — ook buiten Magento. Dat betekent: dezelfde componenten, dezelfde design tokens, dezelfde Figma-bestanden, in je Laravel-maatwerk of headless frontend. Hier leggen we uit hoe dat in de praktijk werkt en waar de grenzen liggen.

Wat is Hyvä UI eigenlijk?

Veel developers kennen Hyvä als de snelle Magento 2 frontend die Luma vervangt. Dat is het Hyvä theme — een volledige frontend-stack voor Magento 2 die RequireJS, jQuery en Knockout.js weggooit.

Hyvä UI is iets anders. Het is een losstaand design system en componentbibliotheek, gebouwd op:

• Tailwind CSS voor styling
• Alpine.js voor interactiviteit
• HTML-first structuur, minimale JavaScript

Geen framework-lock-in. Geen vendor-specifieke build-pipeline. Je kopieert componenten in je project, past tokens aan en bouwt verder.

Het bijgeleverde Figma Community-bestand bevat alle design tokens en componenten die 1-op-1 matchen met de code. Dat scheelt handmatig uitzoeken wat een border-radius of kleur-variabele heet in het design versus de implementatie.

Hyvä UI in een Laravel-project

Wij bouwen maatwerk in Laravel. Webshops, portals, dashboards, configurators. De standaard setup is Laravel + Vite + Tailwind. Hyvä UI past daar vrijwel direct in.

1. Laravel-project met Vite en Tailwind CSS
2. Alpine.js (via npm of CDN)
3. Hyvä UI licentie (~250 euro eenmalig, per developer/project)

# Tailwind en Alpine.js al aanwezig? Dan voeg je Hyvä UI toe als bronbestanden
npm install alpinejs

# In je app.js of bootstrap.js:
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

Daarna kopieer je componenten uit Hyvä UI direct in je Blade-templates of partials. Een accordion in een FAQ-sectie, een modal voor een bevestiging, een dropdown in een navigatiebalk — allemaal copy-paste en aanpassen.

<div x-data="{ open: false }">
    <button @click="open = true" class="btn btn-primary">
        Open modal
    </button>

    <div x-show="open" x-cloak class="fixed inset-0 z-50 flex items-center justify-center">
        <div class="bg-white rounded-lg shadow-xl p-6 max-w-md w-full">
            <h2 class="text-lg font-semibold mb-4">Bevestiging</h2>
            <p class="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 standaard Alpine.js-syntaxis. Niets Magento-specifiek. Werkt in elke Blade-template.

Hyvä UI in een headless of statische frontend

Framework-agnostisch betekent ook: bruikbaar in een headless setup. Denk aan een React of Vue frontend die via API communiceert met een backend — maar waar je Hyvä UI gebruikt voor de HTML/CSS/JS-laag van statische of gedeeltelijk statische pagina's.

Dat klinkt tegenstrijdig: Hyvä UI is HTML-first, React is component-based. Toch zijn er scenario's waar het werkt:

• Statische landingspagina's naast een React-app (HTML + Tailwind + Alpine, apart gebouwd)
• Email-templates of transactionele pagina's waar Alpine de interactiviteit afhandelt
• Server-side rendered pagina's (Next.js met raw HTML output, Astro, Laravel Blade)

In een puur React of Vue project heeft Hyvä UI minder toegevoegde waarde. Alpine.js en React naast elkaar draaien kan, maar is niet netjes. Dan kies je beter voor een React-native component library.

Wat zit er in de bibliotheek?

Hyvä UI bevat onder andere:

Alle componenten volgen dezelfde design tokens: kleur, typografie, spacing, radius. Je past tokens eenmalig aan in je Tailwind-config, en de hele bibliotheek volgt mee.

Performance: wat levert het op buiten Magento?

De performance-filosofie van Hyvä is: ~95% minder JavaScript dan een traditionele Luma-setup, met Lighthouse-scores van 95+ als realistisch doel. Dat cijfer is Magento-specifiek — Luma is berucht zwaar.

In een Laravel-project of headless frontend is je startpunt al schoner. Maar de filosofie blijft waardevol: geen jQuery, geen zware UI-frameworks voor dingen die pure HTML en Alpine aankunnen, geen onnodige build-complexity.

Wij zien bij klanten met Laravel-maatwerk dat een Tailwind + Alpine stack consistent onder de 200 KB aan JavaScript blijft voor de initiële load — zonder hero-images, zonder zware fonts. Hyvä UI voegt daar weinig overhead aan toe: componenten zijn HTML en inline Alpine-attributen, geen aparte JavaScript-bundels.

Licentie: wat kost het en wat mag je ermee?

De licentie van Hyvä UI is eenmalig circa 250 euro, per developer of per project (check de actuele voorwaarden op de Hyvä-website). Geen abonnement, geen maandelijkse kosten.

Dat is opmerkelijk goedkoop voor een volwassen design system met Figma-integratie. Ter vergelijking: de meeste commerciële component libraries kosten 500-2000 euro per jaar per seat.

Wat je wel moet weten:

• De licentie is niet open source — je mag de bronbestanden niet doorverkopen of publiceren
• Je gebruikt Hyvä UI in projecten voor klanten, maar de licentie is voor jou als developer, niet per klant
• Combineer Hyvä UI altijd met een eigen design layer — gebruik design tokens om huisstijl door te voeren, niet als-is

De koppeling met het Hyvä theme

Als je op een later moment toch een Magento 2 webshop bouwt naast je Laravel-backend of headless frontend, heb je een voordeel: het Hyvä theme en Hyvä UI delen dezelfde design-taal.

Dat betekent:

• Dezelfde Figma-componenten voor Magento-checkout én Laravel-portal
• Dezelfde Tailwind-tokens, consistente huisstijl zonder extra sync
• Developers die Hyvä UI kennen, komen snel op snelheid in een Hyvä theme

Voor bedrijven die meerdere kanalen bouwen — webshop, klantportaal, interne tool — is dat een concreet voordeel. Één design system, twee implementaties.

Meer over onze Magento- en Hyvä-ervaring vind je op /hyva-ui.

Wanneer Hyvä UI niet de juiste keuze is

Eerlijk is eerlijk: Hyvä UI is niet voor elk project de beste keuze.

• Je een React of Vue frontend bouwt — Alpine.js naast een virtual DOM-framework is wrijving, geen voordeel. Kies dan voor Radix UI, shadcn/ui of een ander React-native library.
• Je geen Tailwind CSS wil of mag gebruiken — Hyvä UI is diep afhankelijk van Tailwind's utility classes. Zonder Tailwind bouw je Hyvä UI feitelijk opnieuw.
• Je team Alpine.js niet kent en er geen tijd is voor onboarding — Alpine heeft een lage leercurve, maar nul leercurve bestaat niet.
• Je een volledig custom design system nodig hebt dat afwijkt van de Hyvä-tokens — dan betaal je voor iets dat je toch grotendeels overgooit.
• Je project heeft geen bouw-stap (build-step) — Tailwind vereist een build-proces (Vite, Webpack, PostCSS). In een volledig serverside-rendered omgeving zonder frontend-tooling werkt dit niet out-of-the-box.

Wij adviseren Hyvä UI het sterkst in projecten die toch al Tailwind draaien en waar Alpine.js de interactiviteitslaag verzorgt. Dan is de meerwaarde direct: een volwassen componentset die je niet zelf hoeft te bouwen of onderhouden.

Hyvä UI versus zelf bouwen

De vraag is soms: waarom een library kopen als Tailwind en Alpine al in het project zitten?

Vergelijk het zo:

Voor een Laravel-project van 3+ maanden, met meerdere UI-componenten en een designer die Figma gebruikt, verdient Hyvä UI zichzelf terug in de eerste sprint.

Conclusie

Hyvä UI is een volwassen design system dat buiten Magento prima werkt, mits je stack Tailwind en Alpine bevat. De eenmalige licentieprijs is laag, de Figma-koppeling spaart ontwerp-developers-sync, en de componentkwaliteit is hoog.

Ben je een CTO of developer die een Laravel-project of headless frontend bouwt en wil je weten of Hyvä UI in jouw stack past? We kijken graag een uur mee via een gratis Tech Check. Geen verkooppraatje, gewoon een eerlijk gesprek over architectuur. Neem contact op via /contact.