Show HN: Basecoat – shadcn/UI components, no React required

77 hunvreus 30 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>
Why I built it: after moving from a Next.js stack back to Flask + Tailwind + HTMX, I missed shadcn/ui and didn’t want walls of Tailwind classes (like Flowbite or Preline).

Feedback is most welcome: bugs, requests for components, criticism.

[1]: https://v4.shadcn.com/

[2]: https://basecoatui.com/installation/#install-theming

[3]: https://pagescms.org

Comments (30)

rglullis · 5m ago
Would you be interested in getting rid of Tailwind and have the styling strictly with SASS mixins?
exiguus · 1h ago
> Why I built it: after moving from a Next.js stack back to Flask + Tailwind + HTMX, I missed shadcn/ui and didn’t want walls of Tailwind classes (like Flowbite or Preline).

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?

urbanisierung · 2m ago
This is great! Thanks for implementing this!
czhu12 · 49m ago
Really great! A major downside of moving from SPA's back to vanilla JS is how much you lose in terms of UI components.

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.

WilcoKruijer · 2h ago
Very cool! Are you manually porting all components or are you using some sort of automated process?
replwoacause · 5h ago
Looks nice! Can you add a CDN option? Would be nice for a quick start to play around.

Also, reminds me of https://franken-ui.dev

hunvreus · 5h ago
Yep, I've been considering adding a CDN option.

I think it may be on the heavier side though (~100k).

BenderV · 6h ago
Awesome. Using Vue/Tailwind, I'm definitely interested in this. Maybe you could try to add examples of integrations with others frameworks? I'll play with it and give you my 2 cents.
codybontecou · 1h ago
Not sure if you're aware, but there's a well-supported Vue ShadCN library: https://www.shadcn-vue.com/
hunvreus · 5h ago
Hello there Ben. Sure thing, I'll try and expand the docs.
gsanderson · 2h ago
Looks great!

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

Jonovono · 1h ago
This is awesome. I did the same and have been using AlpineJS Pines UI library. Been pretty happy with it! But will take a look at this
o_m · 3h ago
Why did you decide going old school using Alpine.js instead of using plain vanilla web components?
edoceo · 1h ago
Alpine is old school now?
diiiimaaaa · 2h ago
So if I understand correctly all JS is custom-written Alpine JS components.

And all CSS is custom classes that use Tailwind @apply, I'm not sure why, can someone elaborate.

jmisavage · 2h ago
FYI I don't think all of your styles are loading on the page. Tried safari and firefox and it doesn't look right.
tegdude · 1h ago
Thank you! I was searching for this exact thing the other week.
boxed · 2h ago
Can someone eli5 how this is different from something like bootstrap?
wafadaar · 2h ago
Bootstrap is a completely different framework with a different design language (one that many may precieve as out of fashion). This library/framework allows folks to use ShadCN (a component library) similar to Bootstrap which is only available through React/Vue/Svelte, etc.. with vanilla HTML.
boxed · 2h ago
So it's different in visual design, but the goal here is actually to make shadcn more like bootstrap? Hmm.. I think I like that.
christoff12 · 2h ago
crayons vs colored pencils
jacktheturtle · 1h ago
this is awesome, thanks for creating it
campak · 2h ago
I dig it. Love this
pacmanche · 4h ago
Now you just need to remove Tailwind
hunvreus · 3h ago
If I offer a CDN version, it will be Tailwind-free.
yawnxyz · 2h ago
Yes please! Even if we have to add the tailwind as a CDN, this would be useful — as we don't have to use npm / yarn to build the project anymore.

(I like building pure html files in alpine)

revskill · 3h ago
And then ?
campak · 2h ago
and then... that solves the issue of a Tailwind dep
7bit · 1h ago
If deps are a problem for you, don't use basecoat.
zeroq · 2h ago
>> Works with any backend

Have you fully tested it with Solaris or AIX? /s