Repolode
提交项目
hunvreus

hunvreus/basecoat

基于 Tailwind CSS 的原生 HTML/CSS/JavaScript 组件库，风格对齐 shadcn/ui，无需 React。

在 GitHub 查看官网
Star
4,424
Fork
147
未关闭 Issue
6
最近提交
15天前

这是什么？

Basecoat 是一个组件库，使用 Tailwind CSS 以及原生 HTML、CSS 和 JavaScript 复刻 shadcn/ui 的设计体系。它不依赖 React、Radix 或任何框架运行时，因此可以接入静态站点、服务端渲染模板或各类 JavaScript 应用。

组件以语义化 HTML 为基础，用 Tailwind 完成样式，需要交互的部分由少量原生 JavaScript 实现。项目提供 Vega、Nova、Maia、Lyra、Mira、Luma、Sera、Rhea 等独立样式包，并兼容 shadcn/ui 主题，支持暗色模式。

使用方式包括 npm 安装、CDN 引入以及 Nunjucks、Jinja 模板。框架或路由库恢复缓存的 DOM 后，可通过提供的 init、initAll 和 refresh 方法重新初始化组件。

核心功能

  • 01基于 Tailwind CSS v4 的语义化 HTML 组件。
  • 02原生 JavaScript 实现交互，不依赖 React 或 Radix。
  • 03提供八种独立样式包，以及无样式的基础包。
  • 04兼容 shadcn/ui 主题，支持暗色模式。
  • 05可通过 npm、CDN，或 Nunjucks、Jinja 模板使用。

适用场景

  • 在不引入 React 的服务端渲染应用中使用 shadcn 风格的界面。
  • 用精致的组件搭建静态官网或文档站点。
  • 基于无样式基础包叠加自定义样式文件，打造专属设计。
  • 在 Django、Flask 等使用 Jinja 的项目中统一 UI 组件。

快速上手

  1. 1

    从 npm 安装包

    npm install basecoat-css
  2. 2

    在主 CSS 文件中导入 Tailwind 和 Basecoat

使用前须知

  • 样式依赖 Tailwind CSS，因此项目中需要配置 Tailwind。

标签

#tailwind#component-library#css#vanilla-javascript#html#design-system#dark-mode#shadcn-ui#alpine#components

常见问题

basecoat 是什么？
基于 Tailwind CSS 的原生 HTML/CSS/JavaScript 组件库，风格对齐 shadcn/ui，无需 React。 Basecoat 是一个组件库，使用 Tailwind CSS 以及原生 HTML、CSS 和 JavaScript 复刻 shadcn/ui 的设计体系。它不依赖 React、Radix 或任何框架运行时，因此可以接入静态站点、服务端渲染模板或各类 JavaScript 应用。
basecoat 可以免费使用吗？用的什么许可证？
basecoat 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
basecoat 还在维护吗？
活跃维护中。basecoat 最近一次提交是在 2026年10月23日。
basecoat 适合用来做什么？
在不引入 React 的服务端渲染应用中使用 shadcn 风格的界面。 用精致的组件搭建静态官网或文档站点。 基于无样式基础包叠加自定义样式文件，打造专属设计。 在 Django、Flask 等使用 Jinja 的项目中统一 UI 组件。
basecoat 怎么安装和运行？
从 npm 安装包: npm install basecoat-css 在主 CSS 文件中导入 Tailwind 和 Basecoat
在哪里获取 basecoat？
源代码和安装说明在 GitHub 上：https://github.com/hunvreus/basecoat

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目