Pick a cute component library

[stefnotch]

All component libraries so far are not really usable for one reason or another. Yay

Requirements

• Accessible
• Works and can be imported properly
• Not horribly outdated
• Not a React exclusive
• Not totally unfinished
• Useful documentation
• Typescript types

Very nice to have

• Has a select/autocomplete/dropdown where you can search for things
• Dark theme
• Reasonably easy to style

Scroll down to the good list

[stefnotch]

I tried out elix https://github.com/tuwien2020/tgi-pages/pull/75 , but ran into an issue with the elix-filter-combo-box https://github.com/elix/elix/issues/202

[stefnotch]

Vuetify 3 really isn't ready yet https://github.com/tuwien2020/tgi-pages/pull/77 I suppose it'll become useable sometime this year.

[stefnotch]

Microsoft's Fast might be worth taking another look at, since it now has a search box https://github.com/microsoft/fast/issues/4967#event-5585251779

[stefnotch]

Ant Design is also slowly improving. See https://github.com/ant-design/ant-design/issues/22343

[stefnotch]

I took a look at https://github.com/coreui/coreui-vue

• no dark theme (at least nothing obvious in the documentation, also where is the search bar)
• annoying auto-closing sidebar, which makes the documentation harder to use than it should be

[stefnotch]

The good list

Here is a list of other Vue component libraries:

• https://oruga.io/documentation/#introduction
• https://www.inkline.io/docs/preface
• https://www.agnosticui.com/docs/components/buttons.html
• https://vuestic.dev/en/ui-elements/select : Currently no dark mode out of the box https://github.com/epicmaxco/vuestic-ui/issues/1255
• https://antdv.com/components/upload
• https://www.naiveui.com/en-US/os-theme/components/upload
• https://github.com/vuetifyjs/vuetify : Currently not quite ready
• https://element-plus.org/en-US/

Awesome for mobile

• https://vant-contrib.gitee.io/vant/v4/#/en-US/picker awesome mobile select, not intended for desktop

[stefnotch]

While https://www.primefaces.org/primevue/setup is a darn solid one, their business model is making customize-ability a paid feature. This is important to keep in mind when deciding to use it in a professional context or for a free, hobby project.

[stefnotch]

Task: Check which of those actually do <button type="button" and other reasonable stuff like that.

• Inkline has an open issue https://github.com/inkline/inkline/issues/201
• Varlet messes this up https://varlet.gitee.io/varlet-ui/#/en-US/home
• Fast defines its own custom button element which struggles with this https://www.fast.design/
• Vuesax doesn't do it either https://vuesax.com/

[stefnotch]

Vuesax seems to be dead. https://vuesax.com/ is exceedingly pretty, but sadly doesn't seem to pay as much attention to other details like developer experience (no Typescript https://github.com/lusaxweb/vuesax/issues/34 ), accessibility, etc.

[stefnotch]

TODO: Check if their dropdown component actually updates when you update the :value or if it's as cursed as the browser one

[Fancy11111]

https://headlessui.com/?ref=heydesigner

Is another one

[stefnotch]

TODO: Check if they have async buttons. Like a button that you can't spam click until the async event is over...

(Or maybe I'll just write myself that as a utility function?)