能否在无框架项目中使用Shadcn？如何获取.js格式组件？

无框架项目能否直接使用Shadcn组件？ #

不能。Shadcn官方提供的组件是基于React（.tsx）或Vue（.vue）封装的，依赖对应前端框架的运行时环境，纯HTML/JS的无框架项目没有这些环境支撑，无法直接运行这类组件。

如何获取.js格式的Shadcn风格组件？ #

有三种可行方案：

• 转译TSX为React兼容JS：将你通过Vite生成的.tsx组件，用Babel转译为纯JS格式（把TSX语法转成React.createElement调用），然后在无框架项目中引入React和ReactDOM的UMD包（比如通过CDN加载），即可用React API渲染组件。
• 使用Radix UI Vanilla版本：Shadcn组件是基于Radix UI做的样式封装，Radix提供了无需框架的原生JS版本。你可以直接使用该版本的组件，再套用Shadcn的Tailwind样式类，就能实现一致的视觉和交互效果。
• 提取静态HTML+原生JS逻辑：如果不需要组件化复用，可在框架环境中渲染Shadcn组件，然后复制生成的HTML结构和Tailwind样式，再用纯JS编写对应的交互逻辑（比如模态框的显示/隐藏）。这种方式适合简单场景，但失去了组件复用能力。

内容的提问来源于stack exchange，提问作者Heyran.rs