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

56•hunvreus•6h 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

Comments

BenderV•5h 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.

hunvreus•4h ago

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

codybontecou•38m ago

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

replwoacause•4h 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•3h ago

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

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

pacmanche•2h ago

Now you just need to remove Tailwind

revskill•2h ago

And then ?

campak•1h ago

and then... that solves the issue of a Tailwind dep

7bit•37m ago

If deps are a problem for you, don't use basecoat.

hunvreus•2h ago

If I offer a CDN version, it will be Tailwind-free.

yawnxyz•57m 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)

o_m•2h ago

Why did you decide going old school using Alpine.js instead of using plain vanilla web components?

edoceo•15m ago

Alpine is old school now?

campak•1h ago

I dig it. Love this

gsanderson•1h 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

diiiimaaaa•1h 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.

boxed•1h ago

Can someone eli5 how this is different from something like bootstrap?

wafadaar•1h 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•1h 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•1h ago

crayons vs colored pencils

jmisavage•1h 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.

WilcoKruijer•59m ago

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

zeroq•57m ago

>> Works with any backend

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

exiguus•42m 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?

tegdude•37m ago

Thank you! I was searching for this exact thing the other week.

jacktheturtle•21m ago

this is awesome, thanks for creating it

Jonovono•12m 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

Show HN: Helixdb – Open-source vector-graph database for AI applications (Rust)

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

Show HN: A5

Show HN: AG-UI Protocol – Bring Agents into Frontend Applications

Show HN: Downloads Director – Auto-organize your Downloads folder by file type

Show HN: Lumoar – Free SOC 2 tool for SaaS startups

Show HN: I made a site for finding people to build cool tech projects with

Show HN: Airweave – Let agents search any app

Show HN: Make your own voice AI in two clicks

Show HN: CLI that spots fake GitHub stars, risky dependencies and licence traps

Show HN: Rama 0.2 – Modular Rust framework for proxies, servers, and clients

Show HN: Codigo – The Programming Language Repository

Show HN: An API for LLM capabilities and pricing, scraped from docs

Show HN: The missing inbox for GitHub pull requests

Show HN: GlassFlow – OSS streaming dedup and joins from Kafka to ClickHouse

Show HN: Blog comments, nice looking, open source – Talkyard

Show HN: Translate between dialects and share SQL queries on the browser

Show HN: LoopMix128 – Fast C PRNG (.46ns), 2^128 Period, BigCrush/PractRand Pass

Show HN: MMORPG prototype inspired by World of Warcraft

Show HN: Triplex, a visual workspace for React / Three Fiber

Show HN: Open-source MMORPG prototype inspired by World of Warcraft

Show HN: Code Claude Code

Show HN: LLM-God – An LLM Multiprompting App

Show HN: Hydra (YC W22) – Serverless Analytics on Postgres

Show HN: Oliphaunt – A native Mastodon client for macOS

Show HN: AGI Hits a Structural Wall – A Billion-Dollar Problem

Show HN: Xenolab – Rasp Pi monitor for my pet carnivourus plants

Show HN: Vom Decision Platform (Cursor for Decision Analyst)

Show HN: Open-source AI code review agent that's aware of your entire codebase

Show HN: Hyvector – A fast and modern SVG editor

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

Comments

Show HN: Helixdb – Open-source vector-graph database for AI applications (Rust)

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

Show HN: A5

Show HN: AG-UI Protocol – Bring Agents into Frontend Applications

Show HN: Downloads Director – Auto-organize your Downloads folder by file type

Show HN: Lumoar – Free SOC 2 tool for SaaS startups

Show HN: I made a site for finding people to build cool tech projects with

Show HN: Airweave – Let agents search any app

Show HN: Make your own voice AI in two clicks

Show HN: CLI that spots fake GitHub stars, risky dependencies and licence traps

Show HN: Rama 0.2 – Modular Rust framework for proxies, servers, and clients

Show HN: Codigo – The Programming Language Repository

Show HN: An API for LLM capabilities and pricing, scraped from docs

Show HN: The missing inbox for GitHub pull requests

Show HN: GlassFlow – OSS streaming dedup and joins from Kafka to ClickHouse

Show HN: Blog comments, nice looking, open source – Talkyard

Show HN: Translate between dialects and share SQL queries on the browser

Show HN: LoopMix128 – Fast C PRNG (.46ns), 2^128 Period, BigCrush/PractRand Pass

Show HN: MMORPG prototype inspired by World of Warcraft

Show HN: Triplex, a visual workspace for React / Three Fiber

Show HN: Open-source MMORPG prototype inspired by World of Warcraft

Show HN: Code Claude Code

Show HN: LLM-God – An LLM Multiprompting App

Show HN: Hydra (YC W22) – Serverless Analytics on Postgres

Show HN: Oliphaunt – A native Mastodon client for macOS

Show HN: AGI Hits a Structural Wall – A Billion-Dollar Problem

Show HN: Xenolab – Rasp Pi monitor for my pet carnivourus plants

Show HN: Vom Decision Platform (Cursor for Decision Analyst)

Show HN: Open-source AI code review agent that's aware of your entire codebase

Show HN: Hyvector – A fast and modern SVG editor