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

Readit News

Posted by u/hunvreus 7 months ago

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

exiguus · 7 months 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?

hunvreus · 7 months ago

It was all done manually.

replwoacause · 7 months 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 · 7 months ago

Yep, I've been considering adding a CDN option.

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

gsanderson · 7 months 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

hunvreus · 7 months ago

Yeah, I looked into it but wanted to avoid adding plugins.

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?

dbbk · 7 months ago

Why aren't you just using the built-in dialog element that already handles this?

BenderV · 7 months 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 · 7 months ago

Not sure if you're aware, but there's a well-supported Vue ShadCN library: https://www.shadcn-vue.com/

hunvreus · 7 months ago

Yeah, it's excellent.

hunvreus · 7 months ago

Hello there Ben. Sure thing, I'll try and expand the docs.

WilcoKruijer · 7 months ago

Very cool! Are you manually porting all components or are you using some sort of automated process?

hunvreus · 7 months ago

All manual. It was a bit of work at first, but mostly because I had to decide how to structure them. It's actually quite straightforward to extend and maintain now.

czhu12 · 7 months 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.

hunvreus · 7 months ago

Glad you like it. Do let me know what you end up building with it.

> 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.

pxheller · 7 months ago

This is great! I really like the style of shadcn/ui.

Recently I’ve been using ChatGPT to convert shadcn components to JinjaX. Will definitely give yours a try!

hunvreus · 7 months ago

Didn't know JinjaX, interesting.

FYI, I have Jinja macros available: https://basecoatui.com/installation/#install-macros

juddlyon · 7 months 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.

hunvreus · 7 months ago

Have you played with Alpine.js before? HTMX?

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

juddlyon · 7 months ago

Yep, I’ve used Alpine extensively and HTMX here and there. Lots of Vue.

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.