SolidJS 官方组件库

SolidJS生态下的组件集合，将shadcn/ui和tremor-raw的组件模式移植到Solid，基于Kobalte和Tailwind CSS构建，不通过npm分发，而是让开发者复制代码到项目中自由定制。

核心定位与设计理念

SolidUI明确声明自己不是传统意义上的组件库，而是一套可复用的组件代码集合。用户无需安装任何npm依赖，只需从官网挑选所需组件，将代码复制粘贴到自己的项目中即可。这种模式赋予开发者对代码的完全控制权，便于深度定制。

• 非npm包：不发布到npm，不作为依赖安装，代码完全归用户所有
• 移植来源：官方说明为shadcn/ui和tremor-raw的非官方移植版
• 技术栈：底层依赖Kobalte（SolidJS的无障碍组件原语）和Tailwind CSS样式
• 作者团队：由Stefan E-K和Michael Essiet从shadcn及tremorlabs的作品移植而来

组件覆盖与特色功能

官网提供了从基础布局到复杂交互的完整组件集合，涵盖UI组件、可视化图表和完整页面区块，每个组件都附带文档、预览和可复制代码。

• UI组件：包含Accordion、Alert Dialog、Aspect Ratio、Avatar、Badge、Breadcrumb、Button、Card、Carousel、Checkbox、Collapsible、Combobox、Command、Context Menu、Data Table、Date Picker、Dialog、Drawer、Dropdown Menu、Hover Card、Label、Menubar、Navigation Menu、Number Field、OTP Field、Pagination、Popover、Radio Group、Resizable、Select、Separator、Sheet、Sidebar、Skeleton、Slider、Sonner（通知）、Switch、Table、Tabs、Text Field、Timeline、Toast、Toggle、Toggle Group、Tooltip等
• 可视化组件：Bar List、Charts、Delta Bar、Progress、Progress Circle等图表类组件
• 布局组件：Flex、Grid，用于快速搭建页面结构
• 完整页面示例：提供Mail Dashboard、Cards、Tasks、Authentication等完整页面区块，可直接复制使用
• 安装方式：支持CLI命令（npx solidui-cli@latest add 组件名）和手动复制两种方式

使用方式与定制自由度

每个组件页面都提供详细的安装指南、使用示例和代码预览。以Accordion为例，用户可通过CLI一键添加组件文件，或手动复制代码并配置Tailwind动画。所有组件代码均支持按需修改，不受库版本更新限制。

• CLI安装：运行npx solidui-cli@latest add accordion即可将组件文件添加到项目
• 手动安装：需在tailwind.config.js中添加自定义keyframes和animation（如accordion-down/up动画）
• 代码示例：提供完整的SolidJS组件导入语句和JSX使用模板，包含Accordion、AccordionContent、AccordionItem、AccordionTrigger等子组件
• 无障碍支持：组件遵循WAI-ARIA设计模式，如Accordion支持键盘导航和屏幕阅读器

常见问题

Q1：SolidUI的组件能否直接用于生产环境？

A1：可以。组件基于Kobalte（SolidJS无障碍原语）构建，经过WAI-ARIA验证，且代码完全由用户控制，可自由修改样式和逻辑。但需注意，SolidUI是社区移植版，非shadcn/ui官方出品，建议在使用前测试兼容性。

Q2：SolidUI和shadcn/ui有什么区别？

A2：SolidUI是shadcn/ui的SolidJS移植版，核心概念相同——不通过npm分发，而是复制代码。区别在于技术栈：shadcn/ui基于React和Radix UI，SolidUI基于SolidJS和Kobalte。组件命名和API设计尽量保持一致，但SolidJS的响应式机制使部分实现有所不同。

Q3：如何向SolidUI贡献新组件？

A3：官网未明确说明贡献流程，但项目在GitHub上开源（仓库地址见官网顶部GitHub图标）。建议通过GitHub提交Issue或Pull Request，参考现有组件的代码结构和文档规范。

更多同类工具与网站,可在前端库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。