> 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?
hunvreus 6 minutes ago [-]
It was all done manually.
4m1rk 43 minutes ago [-]
Nice job! I've tried dozens of frameworks with various languages, but always return to Django+Tailwind+HTMX+Alpine.
hunvreus 5 minutes ago [-]
High five! Close enough to my stack.
WilcoKruijer 6 hours ago [-]
Very cool! Are you manually porting all components or are you using some sort of automated process?
replwoacause 9 hours ago [-]
Looks nice! Can you add a CDN option? Would be nice for a quick start to play around.
I think it may be on the heavier side though (~100k).
gsanderson 7 hours 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
BenderV 10 hours 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.
Hello there Ben. Sure thing, I'll try and expand the docs.
czhu12 4 hours 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.
juddlyon 3 hours ago [-]
There’s a huge need for this, thank you! I build server-rendered marketing sites and there’s a huge gulf between the jQuery and React era.
diordiderot 3 hours ago [-]
Absolutely love this. Wanted to do this myself but never enough to get started. You're a legend.
o_m 7 hours ago [-]
Why did you decide going old school using Alpine.js instead of using plain vanilla web components?
edoceo 5 hours ago [-]
Alpine is old school now?
o_m 2 hours ago [-]
I'd say anything new in 2025 that involves working with the DOM that doesn't use web component is a waste. Lately I have been porting some old JS libraries (7+ years old) that still are visually impressive to web components, and in my experience after porting some libraries there is about 30% fewer lines of code. Before web components there was so much work to get things up and running in the DOM. Alpine.js does this behind the scenes, but there isn't really a need for it anymore.
rglullis 4 hours ago [-]
Would you be interested in getting rid of Tailwind and have the styling strictly with SASS mixins?
Jonovono 5 hours 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
klaussilveira 3 hours ago [-]
This is great! The HTMX community needs more friendly UI kits like this.
diiiimaaaa 6 hours 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 6 hours 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.
urbanisierung 4 hours ago [-]
This is great! Thanks for implementing this!
anon1094 3 hours ago [-]
Glad you shared this. Looks nice!
tegdude 5 hours ago [-]
Thank you! I was searching for this exact thing the other week.
boxed 6 hours ago [-]
Can someone eli5 how this is different from something like bootstrap?
wafadaar 6 hours 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 6 hours 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 6 hours ago [-]
crayons vs colored pencils
5 hours ago [-]
drcongo 3 hours ago [-]
This looks great. I've never used React so had never heard of shadcn, and annoyingly I've just got to the point in a side project where pulling out DaisyUI and replacing it with this might be a bit of a chore.
pacmanche 8 hours ago [-]
Now you just need to remove Tailwind
hunvreus 7 hours ago [-]
If I offer a CDN version, it will be Tailwind-free.
yawnxyz 6 hours 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 7 hours ago [-]
And then ?
campak 6 hours ago [-]
and then... that solves the issue of a Tailwind dep
7bit 5 hours ago [-]
If deps are a problem for you, don't use basecoat.
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'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.
And all CSS is custom classes that use Tailwind @apply, I'm not sure why, can someone elaborate.
(I like building pure html files in alpine)
Have you fully tested it with Solaris or AIX? /s