[RRFC] Provide help writing accessible component libraries similar to Radix UI or ShadCN UI

[Christian24]

• [ x] I searched for an existing RRFC which might be relevant to my RRFC

Motivation

While I am not certain I agree with all design decisions of ShadCN/UI I cannot help but envy how simple it is to get started with a component library that is accessible and has a great UX. Sadly, ShadCN UI is React-only and I feel it would have been the perfect opportunity to use web components.

Since web components are used to develop components it would be great to aid the process of creating component libraries.

Example

How

My idea is mostly to take the things that have been solved in existing component libraries like Material Web Components and extract them, so they can be used by others. This has been done in the React ecosystem by Radix UI (used under the hood in ShadCN/UI) or headless UI.

I could imagine shipping directives that allow to create accessible, components that can be styled and customized to the component library's author's liking.

One benefit of shipping building blocks like directives and not complete components is that users have flexibility in their implementation. Take for example a button component. If you want to style a link like a button in ShadCN UI, you can just copy the button component and change its markup to use an a-tag instead.

This RRFC does not concern itself with much of the prior art on the subject, so I haven't given much thought if Tailwind should be used or a CLI should be created or it would be packaged as a library.

Current Behavior

This feature does not exist in Lit-land.

Desired Behavior

Provide help to implement components for common pain points such as combo boxes.

References

There is a clone of ShadCN UI for Angular: https://www.spartan.ng/components/#

• n/a

Thanks to @augustjk who motivated me to open this RRFC in the first place.