- Live demo & documentation: https://basecoatui.com
- MIT‑licensed and free: https://github.com/hunvreus/basecoat/
- Works with any backend (Flask, Django, Rails, PHP, etc.) or static site.
- Fully theme‑compatible with shadcn/ui [2].
- Uses a sliver of Alpine.js only for a few interactive bits (e.g. combobox). Swap in your own JS if you prefer.
- Dead simple to use, just drop in a class here and there:
<button class="btn" data-tooltip="This is a tooltip text">Click me</button>
Feedback is most welcome: bugs, requests for components, criticism.
[2]: https://basecoatui.com/installation/#install-theming
[3]: https://pagescms.org
One suggestion would be adding a focus trap, such as when a Dialog opens. It's nice to use the tab key to move around the Dialog (inputs and buttons). Currently focus leaves to the page behind. It might be as simple as adding https://alpinejs.dev/plugins/focus#x-trap
I already do a bit of (simple) focusing here and there, so it shouldn't leave the focus on the background:
https://github.com/hunvreus/basecoat/blob/main/src/js/dialog...
But more complex scenario require you to be specific about the field you want to see focused. I was thinking about allowing you designate the field to focus on.
What would you suggest?
I tried really hard to use <dialog> and popover but didn't succeed. Maybe somebody more skilled can make it happen.