Component Library

Hyvä
UI.

Kant-en-klare UI componenten voor je Magento webshop. Sliders, modals, tabs, galleries — gebouwd met Alpine.js en Tailwind CSS. Toegankelijk, lichtgewicht en klaar om te kopieren naar je theme.

Bespreek je Hyvä project Gratis Quick-scan
06 372 698 35 · Direct contact
Componenten

Beschikbare componenten

De meest gebruikte UI patterns voor e-commerce, klaar om te gebruiken in je Hyvä webshop. Geen external dependencies, geen performance overhead.

Slider / Carousel

Responsive product- en content sliders met touch support en lazy loading. Gebouwd op Alpine.js, geen externe dependencies.

Accordion

Inklapbare content secties met smooth animaties. ARIA-compliant voor screenreaders en keyboard navigatie.

Tabs

Tabbed navigatie voor product informatie, specificaties en reviews. Toegankelijk en customizable.

Modal / Dialog

Modale vensters voor quick view, formulieren en notificaties. Focus trapping en escape-to-close ingebouwd.

Gallery

Product image gallery met zoom, thumbnails en fullscreen. Geoptimaliseerd voor mobile met swipe gestures.

Toast notifications

Tijdelijke meldingen voor cart updates, formulier bevestigingen en systeemberichten. Automatisch verdwijnend.

Dropdown

Navigatie en filter dropdowns met keyboard support. Sluit automatisch bij klik buiten het element.

Form elementen

Gestylede inputs, selects, checkboxes en radio buttons. Consistent design met ingebouwde validatie feedback.

Voordelen

Waarom kant-en-klare componenten?

Je kunt alles zelf bouwen. Maar waarom zou je als er geteste, toegankelijke componenten beschikbaar zijn die naadloos werken met je Hyvä theme?

Tijd besparen

Waarom een slider of modal zelf bouwen als er een geteste, toegankelijke versie klaarligt? Meer tijd voor wat je webshop uniek maakt.

Consistent design

Alle componenten volgen dezelfde design taal. Tailwind CSS zorgt ervoor dat alles samenhangt — zonder handmatig te tweaken.

Toegankelijk uit de doos

ARIA attributen, keyboard navigatie, focus management. Je voldoet aan accessibility standaarden zonder extra werk.

Lichtgewicht

Geen jQuery, geen zware libraries. Puur Alpine.js en vanilla JavaScript. Je pagina blijft snel, ook met meerdere componenten.

Hoe het werkt

Hyvä UI in je theme

Hyvä UI is een aparte component library die je via Composer installeert. Je kopieert de componenten die je nodig hebt naar je child theme — "Copy. Paste. Done." is het motto.

Alle interactie draait op Alpine.js, alle styling op Tailwind CSS. Dezelfde stack als de rest van je Hyvä webshop. Consistentie zonder moeite.

Hyvä development bekijken

Zo werkt het

  • 1

    Installatie via Composer

    Hyvä UI wordt geinstalleerd als Composer dependency in je Magento project. Licentie kost €250 per store, of is inbegrepen bij Hyvä Commerce.

  • 2

    Componenten kopieren

    Je kopieert de .phtml bestanden van de componenten die je nodig hebt naar je child theme. Copy, paste, done.

  • 3

    Tailwind CSS customization

    Elk component is gestyled met Tailwind utility classes. Pas kleuren, spacing en typografie aan via je tailwind.config.js.

  • 4

    Alpine.js interactie

    Alle interactieve logica draait op Alpine.js. Compact, leesbaar en makkelijk uit te breiden met custom functionaliteit.

Tech stack

Gebouwd op moderne technologie

Geen jQuery, geen Bootstrap, geen externe UI frameworks. Hyvä UI gebruikt dezelfde stack als het Hyvä Theme zelf.

Alpine.js

Reactieve interactie (~14KB gzipped)

Tailwind CSS

Utility-first styling

ARIA attributen

Toegankelijk by default

Geen dependencies

Geen jQuery of Bootstrap

Diensten

Gerelateerde Hyvä diensten

Hyvä development

Nieuwe Hyvä webshops bouwen en Luma migraties

Hyvä support

Onderhoud, bugfixes en updates voor je Hyvä webshop

Wat is Hyvä?

Alles over het moderne Magento 2 frontend thema
FAQ

Veelgestelde vragen

Hyvä UI kost €250 per store (eenmalig). Het is ook inbegrepen bij Hyvä Commerce (€3.000/jaar). Het Hyvä Theme zelf is sinds november 2025 gratis en open source, maar UI is een apart betaald product.

Absoluut. Alle componenten zijn gebouwd met Tailwind CSS utility classes. Je past kleuren, spacing, borders en typografie aan via je Tailwind configuratie. De HTML structuur kun je ook aanpassen in je theme templates.

Ja. De UI componenten zijn consistent met de Hyvä Checkout styling. Dezelfde Tailwind classes, dezelfde Alpine.js patterns. Je hele webshop — van productpagina tot checkout — ziet er samenhangend uit.

De componenten bevatten ARIA attributen, keyboard navigatie en focus management. Ze vormen een goede basis voor accessibility, maar voor volledige WCAG-compliance is het altijd verstandig om je specifieke implementatie te testen.

Uiteraard. Hyvä UI is een startpunt, geen beperking. Je kunt eigen Alpine.js componenten bouwen die naadloos samenwerken met de bestaande library. Zolang je Tailwind en Alpine.js gebruikt, past alles bij elkaar.

Hyvä UI is specifiek gebouwd voor Magento en het Hyvä Theme. De componenten zijn afgestemd op e-commerce: product galleries, cart notificaties, filter dropdowns. Headless UI is generiek — Hyvä UI is voor webshops.

Hyvä webshop laten bouwen?

We bouwen Magento webshops met het volledige Hyvä ecosysteem: Theme, UI, Checkout. Laten we kijken wat jouw shop nodig heeft.

Plan een gesprek Gratis Quick-scan
Cases

Uitgelichte cases

Hildering Groenkunst
B2B

B2B Hyvä rebuild in 2 maanden

B2B multistore in 3 talen, volledig Hyvä rebuild binnen 2 maanden. Configureerbare maatwerk producten met B2B offerte-integratie.

Magento 2HyväMultistore