展示 HN：Basecoat – shadcn/UI 组件，无需 React
Basecoat 将即将发布的 shadcn/ui v4 [1] 移植到纯 HTML + Tailwind（不使用 React）：
- 实时演示和文档： [https://basecoatui.com](https://basecoatui.com)
- MIT 许可，免费使用： [https://github.com/hunvreus/basecoat/](https://github.com/hunvreus/basecoat/)
- 适用于任何后端（Flask、Django、Rails、PHP 等）或静态网站。
- 与 shadcn/ui [2] 完全兼容主题。
- 仅使用少量 Alpine.js 来处理一些交互功能（例如组合框）。如果你更喜欢，可以替换为自己的 JavaScript。
- 使用起来非常简单，只需在适当的位置添加类：
```html
<button class="btn" data-tooltip="这是一个提示文本">点击我</button>
```
我之所以构建它：在从 Next.js 栈迁移回 Flask + Tailwind + HTMX 后，我怀念 shadcn/ui，并且不想要像 Flowbite 或 Preline 那样的冗长 Tailwind 类。
欢迎反馈：报告错误、组件请求、批评意见。
[1]: [https://v4.shadcn.com/](https://v4.shadcn.com/)
[2]: [https://basecoatui.com/installation/#install-theming](https://basecoatui.com/installation/#install-theming)
[3]: [https://pagescms.org](https://pagescms.org)
查看原文
Basecoat ports the upcoming shadcn/ui v4 [1] to plain HTML + Tailwind (no React):<p>- Live demo & documentation: <a href="https://basecoatui.com" rel="nofollow">https://basecoatui.com</a><p>- MIT‑licensed and free: <a href="https://github.com/hunvreus/basecoat/">https://github.com/hunvreus/basecoat/</a><p>- Works with any backend (Flask, Django, Rails, PHP, etc.) or static site.<p>- Fully theme‑compatible with shadcn/ui [2].<p>- Uses a sliver of Alpine.js only for a few interactive bits (e.g. combobox). Swap in your own JS if you prefer.<p>- Dead simple to use, just drop in a class here and there:<p><pre><code> <button class="btn" data-tooltip="This is a tooltip text">Click me</button>
</code></pre>
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).<p>Feedback is most welcome: bugs, requests for components, criticism.<p>[1]: <a href="https://v4.shadcn.com/" rel="nofollow">https://v4.shadcn.com/</a><p>[2]: <a href="https://basecoatui.com/installation/#install-theming" rel="nofollow">https://basecoatui.com/installation/#install-theming</a><p>[3]: <a href="https://pagescms.org" rel="nofollow">https://pagescms.org</a>