Show HN: Basecoat – shadcn/UI components, no React required
146 hunvreus 77 5/13/2025, 11:22:40 AM
Basecoat ports the upcoming shadcn/ui v4 [1] to plain HTML + Tailwind (no React):
- 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
I understand that Next.js can feel bloated, especially when used as a static site generator or within a classic JAMStack setup.
Basecoatui reminds me a bit of Bootstrap during the golden era of Ruby on Rails.
I took a look at the Git repository and tried to find an automated solution to convert shadcn to plain HTML but didn't find anything suitable. Is there a script available for this, or was this done manually?
Also, reminds me of https://franken-ui.dev
I think it may be on the heavier side though (~100k).
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.
I've normally done DaisyUI + Tailwind + Rails but it never feels quite right. Basecoat is a really nice step forward.
I have to imagine the author is planning to charge for a premium package at some point, but given that a huge % of development is spent on UI design, I'd be more than happy to pay for a year of updates.
> I've normally done DaisyUI + Tailwind + Rails but it never feels quite right.
Same here: I could never quite get into Flowbite, Daisy UI, Preline or any of the other many alternatives.
> I have to imagine the author is planning to charge for a premium package at some point,
I did wonder if people would want to buy premium layouts or components. No plan to charge for anything for now though.
Recently I’ve been using ChatGPT to convert shadcn components to JinjaX. Will definitely give yours a try!
FYI, I have Jinja macros available: https://basecoatui.com/installation/#install-macros
I think you can get quite far these days WITHOUT React or Vue.js (and I say that as the maintainer of a Next.js/React open source project [1]).
[1]: https://pagescms.org
There are not sets of polished, battle-tested UI libraries made for server side. Bootstrap ships with JS, but most of the CSS and template frameworks assume you’re using a headless setup.
I thought Web Components might spur things, but not really. React has continued to dominate.
Which is also why I made the Alpine code as unobtrusive as possible.
You can get away with using purely the CSS if you don't need dialogs or combobox. And you can plug your own JS if you decide to do so.
However, I will definitely try and see if I can make a web components version as soon as I have some time.
And all CSS is custom classes that use Tailwind @apply, I'm not sure why, can someone elaborate.
- I use `@apply` in all of my custom Tailwind classes. It's easy to keep it consistent with the rest of your styles, and in this case it meant it was pretty easy for me to copy a good chunk of shadcn/ui's own components. You usually just use regular CSS for custom Tailwind utility classes?
I’m so pumped to try this out!!!
Please do let me know if things aren't working as expected, I want to make this a great alternative to anything else out there: https://github.com/hunvreus/basecoat/issues
Be brutally honest.
It would be incredibly helpful for me to debug.
Feel free to watch the project if you want to be notified when I get that out.
(I like building pure html files in alpine)
Being able to just add one line to import the CSS styles and being able to get up and running quickly (like Alpine.js or HTMX do).
Not great if you're trying to build a serious production app, but great if you're just building a simple proof-of-concept or simple tool.
Have you fully tested it with Solaris or AIX? /s