Shoelace vs Nuxt UI

up:: UI libraries

  • Shoelace seems more stable
    • Some stuff didn’t work reliably with Nuxt UI
  • Shoelace is more neutral in its UI, Nuxt UI is more modern
  • Nuxt UI is more adapted to Nuxt and Vue (duh!)
    • it uses Vue slots, instead of div(slot="header")
  • I found Shoelace to be more intuitive to work with
  • It’s easier to overwrite styles in Shoelace
  • Navigation component is missing in Shoelace
  • Both of those are more built for interactive sites,



  • Shoelace seems more stable than Nuxt UI. It worked reliably. It also has more components.
  • It’s more neutral in its UI
  • I found it easier to overwrite styles in Shoelace.


  • Shoelace isn’t built for Vue/Nuxt. It handles scoping differently.
  • A Navigation component was missing.


  • The Card UI looks great, we can take some inspiration there

Nuxt UI


  • The consistency between all the elements is great. Everything looks coherent.
  • All the details are taken care off, you don’t have to thing about hover states for example ⠀ Cons
  • When things don’t work, they’re hard to debug when you can’t view the internals. one component broke the UCarousel and I have no idea why ⠀ Takeaways
  • The UCarousel component is great.
  • Slots are the way to go
  • I like how they did the UButton component props: color and variant.