Components library

[MentalGear]

As I have also always been a big fan of separation of concern (and think react is a perversion in that regard) along with "form follows function", I was glad to find Nue.

However I'm wondering how a Nue components library that actually allows for this huge flexibility in represention would look like? (Or maybe components are what you call templates)

The main problem appears to me that depending on how you want your UI to look and feel like, the underlying structure also has to be adopted, e.g. you need to add extra elements and / or js.

A simple example would be an input element, which could be nicely separated into a functionality/markup/style part.

But if you want to add icons on the right or left? While it's just "representative" you now also have to change the markup of the element.

I think that is also the appeal of shadcn-(svelte), to have components that are not closed off, but allow for structural changes.

Overall, I wonder what a "nue component" approach will be to provide these common components? (Or what other css libs you would recommend to use meanwhile)

[tipiirai]

Standards-first component libraries should prioritize semantic HTML elements, only introducing class names when native solutions like nested selectors, :has(), or semantic elements become impractical.

Consider a search input with an icon. You could achieve this through pure CSS using background-image with a [type=search] selector. Alternatively, when more control is needed:

<div class="search-input">
  <input type="search">
  <svg/>
</div>

This balance between semantic purity and practical flexibility is key. Design systems should harmonize global styles with component libraries, serving both single-page and multi-page applications. These individual systems I'm currently working on will inherit from a foundational global design system while maintaining their unique characteristics.

The power lies in giving CSS developers full control over system architecture, enabling them to find the right balance through methodical iteration.