[HN Gopher] Show HN: Basecoat - shadcn/UI components, no React r...
___________________________________________________________________
Show HN: Basecoat - shadcn/UI components, no React required
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
Author : hunvreus
Score : 102 points
Date : 2025-05-13 11:22 UTC (11 hours ago)
| BenderV wrote:
| 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.
| hunvreus wrote:
| Hello there Ben. Sure thing, I'll try and expand the docs.
| codybontecou wrote:
| Not sure if you're aware, but there's a well-supported Vue
| ShadCN library: https://www.shadcn-vue.com/
| replwoacause wrote:
| 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 wrote:
| Yep, I've been considering adding a CDN option.
|
| I think it may be on the heavier side though (~100k).
| pacmanche wrote:
| Now you just need to remove Tailwind
| revskill wrote:
| And then ?
| campak wrote:
| and then... that solves the issue of a Tailwind dep
| 7bit wrote:
| If deps are a problem for you, don't use basecoat.
| hunvreus wrote:
| If I offer a CDN version, it will be Tailwind-free.
| yawnxyz wrote:
| 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)
| o_m wrote:
| Why did you decide going old school using Alpine.js instead of
| using plain vanilla web components?
| edoceo wrote:
| Alpine is old school now?
| o_m wrote:
| 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.
| campak wrote:
| I dig it. Love this
| gsanderson wrote:
| 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
| diiiimaaaa wrote:
| 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.
| boxed wrote:
| Can someone eli5 how this is different from something like
| bootstrap?
| wafadaar wrote:
| 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 wrote:
| 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 wrote:
| crayons vs colored pencils
| jmisavage wrote:
| FYI I don't think all of your styles are loading on the page.
| Tried safari and firefox and it doesn't look right.
| WilcoKruijer wrote:
| Very cool! Are you manually porting all components or are you
| using some sort of automated process?
| zeroq wrote:
| >> Works with any backend
|
| Have you fully tested it with Solaris or AIX? /s
| exiguus wrote:
| > 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?
| tegdude wrote:
| Thank you! I was searching for this exact thing the other week.
| jacktheturtle wrote:
| this is awesome, thanks for creating it
| Jonovono wrote:
| 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
| czhu12 wrote:
| 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.
| rglullis wrote:
| Would you be interested in getting rid of Tailwind and have the
| styling strictly with SASS mixins?
| urbanisierung wrote:
| This is great! Thanks for implementing this!
| klaussilveira wrote:
| This is great! The HTMX community needs more friendly UI kits
| like this.
| anon1094 wrote:
| Glad you shared this. Looks nice!
| drcongo wrote:
| 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.
| diordiderot wrote:
| Absolutely love this. Wanted to do this myself but never enough
| to get started. You're a legend.
| juddlyon wrote:
| 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.
| 4m1rk wrote:
| Nice job! I've tried dozens of frameworks with various languages,
| but always return to Django+Tailwind+HTMX+Alpine.
___________________________________________________________________
(page generated 2025-05-13 23:01 UTC)