R&D project: UI-componenten met ShadCN (Vue) en Storybook

De aanleiding

Bij Divtag zoeken we continu naar manieren om onze front-endontwikkeling efficiënter, consistenter en beter schaalbaar te maken. Voor toekomstige projecten wilden we onderzoeken of een combinatie van ShadCN (Vue) en Storybook ons kan helpen bij het opzetten van een generieke UI-bibliotheek.

Wat hebben we onderzocht?

We hebben tijdens de R&D-dag geëxperimenteerd met:

• ShadCN (Vue): een moderne componentenbibliotheek gebaseerd op Radix UI, bekend uit de React-wereld, maar vertaald naar het Vue-ecosysteem. Het biedt kant-en-klare, gestileerde en toegankelijke UI-componenten die je snel en consistent kunt hergebruiken in projecten.
  
• Storybook: een open source tool waarmee je UI-componenten los van je applicatie kunt ontwikkelen, testen en documenteren. Je bouwt als het ware een visuele componentenbibliotheek, compleet met interactief overzicht en documentatie.
  

Samen vormen deze tools een krachtige basis voor een design system of component library die meerdere projecten kunnen ondersteunen.

Wat hebben we gebouwd?

We hebben een setup opgezet waarin we componenten ontwikkelden met ShadCN (Vue), en deze beschikbaar maakten in Storybook. Zo konden we starten met het bouwen van een generieke, herbruikbare UI-bibliotheek. Denk aan knoppen, modals, formulieren en inputs – stuk voor stuk componenten die we vaak in maatwerksoftware gebruiken.

Hoe verliep het proces?

Omdat beide tools nieuw waren binnen ons team, vergde het even wat opstarttijd. Vooral het gebruik van de allernieuwste (alpha) versie van Storybook bracht wat instabiliteit met zich mee. Toch zijn we erin geslaagd om circa tien basiscomponenten op te zetten – een mooie eerste stap richting een centrale UI-bibliotheek. De samenwerking verliep goed en leverde waardevolle inzichten op in de ontwikkelworkflow van dit type tools.

Wat zijn de inzichten?

• ShadCN (Vue) biedt een stevige, flexibele basis voor consistente UI-componenten, met goede ondersteuning voor theming, accessibility en uitbreidbaarheid.
  
• Storybook is krachtig als documentatie- en ontwikkeltool, maar de alpha-versie is nog niet stabiel genoeg voor productiegebruik.
  
• Het werken met een componentenbibliotheek dwingt ons na te denken over structuur, herbruikbaarheid en design-consistentie – iets wat uiteindelijk veel tijd en technische schuld bespaart.
  

De potentie voor de toekomst

We verwachten dat Storybook versie 9 binnenkort uitkomt en een stabiele basis zal bieden om componenten breed intern te documenteren en te testen. Deze aanpak biedt veel voordelen:

• Versnelling van front-endontwikkeling in nieuwe projecten
  
• Minder dubbel werk door hergebruik van gestandaardiseerde componenten
  
• Betere samenwerking tussen developers en designers
  
• Meer consistentie en kwaliteit in de UI van onze software
  

ShadCN (Vue) is nu al klaar voor gebruik in productieprojecten. We overwegen om deze stack structureel in te zetten in toekomstige maatwerkprojecten, vooral wanneer schaalbaarheid, onderhoudbaarheid en snelle iteratie belangrijk zijn.

Tot slot

Deze R&D-dag bevestigt opnieuw de waarde van experimenteren en onderzoeken binnen Divtag. Door te investeren in tools als ShadCN en Storybook bouwen we verder aan een stabiele, moderne en schaalbare front-endstack die onze klanten uiteindelijk nóg betere software oplevert.

Wil je ook efficiënter software bouwen met een krachtige, consistente front-end? Of ben je benieuwd hoe we dit toepassen binnen maatwerkprojecten? Neem contact met ons op – we denken graag met je mee.