Show HN: Basecoat – All of the shadcn/ui magic, none of the React

11•hunvreus•1y ago

In a nutshell: Basecoat is a port of shadcn/ui to HTML and Tailwind CSS. It's a modern, themeable component library; everything from buttons to comboboxes and dialogs.

Why? Well, I got sick of React and moved over to a more "old school" stack (Python, HTMX, Alpine.js and Tailwind).

The one thing I missed was shadcn/ui [1]. Nice defaults, well thought out design system, easy to theme and great to build your own component library with.

I didn't find the alternatives compelling: Flowbite, Preline and the likes encourage you to copy/paste dozens of classes for each element.

That's not how I use Tailwind. I love the utility-first approach, but I don't want walls of classes for each button, form element or tooltip I have in my app.

I had been building my own component library for a project I’m working on (a Vercel for Python apps) and realized it may be worth my time to firm things up.

Why I think it's cool? Well:

- No React. Just Tailwind CSS (with a tiny bit of Alpine.js if you choose to). You can use that with whatever stack you want.

- Jinja and Nunjucks macros. I hope to support more template engines.

- 100% compatible with shadcn/ui themes (you can play with the theme select box on the site).

- Super easy to install and use (there's even a CLI).

- Accessible, with ARIA support.

- Did I mention no React?

Hope some of you find it useful.

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

[2]: https://v4.shadcn.com/ (this is actually the new/upcoming version of shadcn/ui).

Comments

drivingmenuts•1y ago

Not working in Safari. Did you, perchance, test this only in Chrome?

A sampling of error messages:

- Failed to load resource: Load cannot follow more than 20 redirections

- Cross-origin script load denied by Cross-Origin Resource Sharing policy.

- TypeError: window.basecoat.registerDialog is not a function. (In 'window.basecoat.registerDialog(Alpine)', 'window.basecoat.registerDialog' is undefined)

- Alpine Expression Error: Can't find variable: sidebar

and so on and so forth. It just goes downhill from there.

hunvreus•1y ago

I tested it in Safari, and just checked: I don't get any of these errors.

Which page did you get that on? The front page?

drivingmenuts•1y ago

And … now it works. I didn't do anything different, but problem apparently solved.

hunvreus•1y ago

Good to hear. I was trying to figure out what I did wrong. Maybe a CDN issue.

Thanks for checking it out.

pbowyer•12mo ago

Well done, this looks like a great beginning! I'll be giving this a test on my next project.

Hoping you add more of shadcn/ui, I'm partial to the sheet.

Strategic advice from LLM's is "trendslop", say researchers

Maybe I'm the Alien [video]

Speeding Up Zsh

Trying to Become a Better Programmer by Writing a PHP Interpreter in C++

The UAP report so far

Software Ate My Homework

Jon Rubinstein: Former Apple Hardware Chief on Saving Apple, iMac, iPod, iPhone [video]

Loops and Routines Without Claude

Admit It, That Protein Shake Is Basically Soylent

Cloudflare Pages is down in Spain

Getting LLMs Drunk to Find Remote Linux Kernel OOB Writes (and More)

Mass Gen expands virtual care for 30k patients with no primary care clinicians

Long short-term memory (1997) [pdf]

Where will UX design be in 5 years? 5 Predictions (2017)

I learned something about GPUs today

Peter Naur – Programming as Theory Building (1985) [pdf]

Chicago undergraduate mathematics bibliography (1999)

Firefox vs. Chromium security in 2022, how true is it still today?

GM to pay $12.75M to settle California driver privacy probe

Show HN: Free C course called "C Systems Lab"

Impact of Trump aid cuts: 9 million deaths by 2030

GM to Pay $13M to Settle Claims It Sold Californians' Driving Data

Show HN: How-to-Train-Your-GPT

sick of dealing with unwanted line breaks when you copy text from claude code?

I Hired Too Fast. I Had to Let Everyone Go. Here's What I Learned

Marginal likelihood is exhaustive leave-p-out cross-validation

It's time to talk about agentic "remote control"

AI wants direct access to your data

Mythos finds the vulnerabilities. VibeAI makes sure YOU understand them

Show HN: You can edit the game by chatting with it