Design Systems & Components Liraries

Last modified by Thiago Krieck on 2023/12/05 15:33

Available Components Libraries

Here are some design system

CSS UI / Vue Frameworks

  • vuetify
  • bootstrap 4 (bootstrap vue)
  • bootstrap 5 (bootstrap vue next)
  • tailwindcss (radix vue)
  • foundation (does not seem to have vue integration)

In the prototype being worked on, an API has been created to abstract the design system and therefore create the "X design system" which would proxy the favored design system and also allow to create multiple implementation of the design system. In the prototype 3 base components (x-alert, x-btn, x-card) have been used with an implementation with implementation in Vuetify and in DSFR. The result is interesting.

Comparison Matrix

FrameworkAcceptabilityDesign & AccessibilityGithub linkMaintainerLicenseProject ActivityVue or web components?Less/Sass?
Vuetifyaccept Potential candidate?

Good # of components

Has a dedicated section on accessibility

Good theming support

Figma Kit available CommunityMIT

Stars: 38.2k
Last release: July 25, 2023

Vueaccept saas
Bootstrap 5cancel Does not provide Vue 3 components or Web Components CommunityMIT

Stars: 165k

Last release: Sept 14, 2023

 accept sass
Prime Vue

error Open core

But, larger library of "free" components (e.g., has a tree component)

Excellent # of components

Good Theming support and built in themes (including BS5)

Will make use of CSS variables in the near future

WCAG 2.1 AA compliant

Figma Kit available CommunityMIT

Stars: 4.7k

Last release: Oct 18, 2023

Vueaccept sass
Nextcloud Vueerror Maintained, but only to be used as an alternative is we need to integrate Cristal as part of a Nextcloud extension. CommunityAGPL 3.0

Stars: 198

Last release: Sept 26, 2023

Vueaccept sass
Shoelaceerror Probably not a good choice if mainly maintained by a single actor

Excellent # of components

Support theming

Have accessibility as a core value

Figma Kit Available Mainly a single developerMIT

Stars: 9.3k

Last release: Oct 16, 2023

Web Componentserror ?
Buefyerror Probably not a good choice if mainly maintained by a core team of one Core team of oneMIT

Stars: 9.5k

Last release: Sep 26, 2023

Vueaccept sass

error Still under Google governance?

cancel project in maintenance, they recommend Lit At least initially started by Google?BSD 3Start: 22kWeb Components 
France Design System (dsfr)accept This is a special case, this cannot be the default but we want to support it to ease the integration of wikis on french government sites.Figma Kit available GovernmentMIT  accept saas

error default implement is for react, with an alternative Vue implem

error not so great experience with it during prototyping as it is based on Tailwind (to be confirmed by @Ludovic Dubost)

 accept CommunityMIT

Stars: 1215
Last release: September 20, 2023

 error Can't find the info for radix-vue
Spectrumcancel Not backed by community cancel AdobeApache-2.0 error none
Fastcancel Not backed by community MicrosoftMITStars: 8.6k
Last release: October 12, 2023
Tailwinderror not so great experience with it during prototyping (to be confirmed by @Ludovic Dubost) CommunityMIT

Stars: 71k

Last release: Oct 18, 2023

 accept sass
Foundationcancel Not backed by community ZURBMIT

Stars: 29.5K
Last release: Aug 18, 2023

 accept sass
Material-UIcancel the implementation is react based CommunityMIT   
Aurocancel Not backed by community  cancel Alaskair    
Boltcancel Too small community  

Stars: 286

Last release: Jun 1, 2023

 accept sass
Calcite Design Systemcancel Too small community  

Stars: 240

Last release: 12 Oct, 2023

Carbon Design Systemcancel archived     
Clevercancel Not backed by community Clever cloud    
Crayonscancel Not backed by community Freshwork    
Dilecancel Too small community     
Duetcancel not open source     
Elixcancel Too small community     
Graphite Design Systemcancel Not backed by community / too small    
Helixcancel Too small community     
Ignite UIcancel Not backed by community infragistics    
 Io GUIcancel experimental       
Ionic Web Componentscancel build to support a framework for mobile UI       
Korcancel Too small community     
Lightningcancel Not backed by community / too small Salesforce    
Lioncancel Not backed by community ING    
Nordhealth Componentscancel Not backed by community Nordhealth    
Vaadinerror Probably tightly coupled to the Java code base?     
Materializecancel Too small community  Sass
BaklavaSmall selection of components compared to other DS

cancel Less components than other libraries

cancelDon't have accessibility as a token for development, only a github issue label

Figma Kit available

Stars: 1.1k

Last Release: 23 Oct, 2023

Web Components 

Accessibility with Web Components

Accessibility is NOT baked in on web components, so it falls on the creator of the components to take accessibility into account. Of the two web components DS being evaluated, only Shoelace has a dedicated page on a11y (see table above). Baklava only has some issues on Github, so it's a start, but maybe we should wait for it to have more a11y maturity to progress on this DS.

There is an experimental API for accessibility being drafted by Google, Apple and Mozilla, but currently it is not well-supported. Maybe something to keep an eye on for the future.

Abstracting the Design System

From our experience on XWiki, we know that going away from a design system is challenging and time consuming.

In the goal of making that easier, we propose to define a set of base visual components that we would abstract away.

Meaning that, it would be possible to modularily provide several design system implementations, and to switch between them by configuration.

The table below tries to map a few design systems to the corresponding abstract components.

Risk: This is effectively re-building a design system as we will need to identify the (least) common denominator of the implementations we'd like to support.

Note 1: We also have to take into account accessibility, so we need to take care to provide (as much as possible) options that are accessible by default.
Note 2: Following this approach will greatly limit the amount of fine-tuning that will be possible. A simple comparison of the options proposed by bootstrap and vuetify for the customization of buttons already shows a large variety of differences (size configuration, shape of the corner, icon positioning...)

Abstract ComponentAPIdsfr ( )Bootstrap 5 ( (
Button (primary)<CristalButton level='primary'/>


<button class="fr-btn">
<button type="button" class="btn btn-primary">
<button class='v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated'>
Button (seconday)<CristalButton level='secondary'/>


<button class="fr-btn fr-btn--secondary fr-btn--tertiary">
<button type="button" class="btn btn-secondary">
<button class='v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-tonal'>
Button (tersary)<CristalButton level='tersary'/>
<button class="fr-btn">
<button type="button" class="btn btn-light">
<button class='v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined'>

Mapping DS components

For a more exhaustive mapping, see Mapping of Cristal Components.

Performance Measurements


  • Test is only done on the alert component (1000 loads).
  • The slowest is less than 0.4ms per component. The fastest 0.04ms per component.
  • Done with the production build
  • Fastests: Shoelace (index 100), DSFR (300), Vuetify (600)
  • Wrapping an empty component is 0.007ms per component. Wrapping realcomponents seem to cost 20 to 50ms for 1000 components (0.02 to 0.05 per component).
  • Wrapping shoelace is more expensive (probably because for the others it's vue to vue, with shoelace it adds the vue overhead).
  • Web Components is possibly faster than VueJS components (but need to consider that it depends what the component does).
  • Firefox seems slower than Chrome (up to 2x)

Chrome using Production build (lerna run start) with alert only

  • Vuetify empty: 7ms
  • Vuetify direct: 287ms to 350ms
  • Vuetify encapsulated: 333ms to 400ms
  • DSFR empty: 6ms
  • DSFR direct: 150ms to 180ms
  • DSFR encapsulated: 160ms to 200ms
  • Shoelace empty: 5ms
  • Shoelace direct: 30ms to 50ms
  • Shoelace encapsulated: 60 to 70ms

Chrome using Production build (lerna run start) with alert + button

  • Vuetify encapsulated: 500ms to 700ms
  • DSFR encapsulated: 240ms to 350ms
  • Shoelace encapsulated: 90 to 150ms



Get Connected