shadcn-solid：SolidJS开发者的终极UI组件库解决方案

【免费下载链接】shadcn-solidshadcn/ui, but for Solid.项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-solid

shadcn-solid是一个由社区主导的非官方SolidJS版本shadcn/ui组件库，为SolidJS开发者提供了一套完整、灵活且高度可定制的UI组件解决方案。它采用无头组件架构，让开发者能够完全控制组件代码，轻松构建符合自己需求的现代Web应用界面。

🚀 为什么选择shadcn-solid？

在传统的组件库使用流程中，开发者通常需要安装NPM包、导入组件并在应用中使用。但shadcn-solid带来了不同的 approach，它围绕以下核心原则构建：

✨ 完全控制组件代码

shadcn-solid直接提供组件的实际代码，开发者拥有完全的定制和扩展自由。这意味着：

在典型的组件库中，如果你需要更改按钮的行为，必须覆盖样式或包装组件。而使用shadcn-solid，你只需直接编辑按钮代码。

🎨 无头组件架构

shadcn-solid遵循无头组件架构，这意味着组件不包含硬编码的样式，而是专注于功能和可访问性。开发者可以根据自己的设计系统自由设计组件外观。

🔄 一致的组件接口

shadcn-solid中的每个组件都共享一个通用的、可组合的接口。如果某个组件不存在，社区会将其引入、使其可组合，并调整其样式以匹配和协同工作于整个设计系统。

💻 代码分发系统

shadcn-solid还是一个代码分发系统，它定义了组件的模式和用于跨项目分发组件的CLI，支持跨框架使用。

📸 组件展示

shadcn-solid提供了丰富的组件集合，这些组件具有精心选择的默认样式，既能独立使用，又能作为一致的系统协同工作。

卡片组件展示

下面展示了shadcn-solid的卡片组件在不同主题下的效果，包括数据可视化、表单和设置面板等多种应用场景：

侧边栏组件展示

侧边栏是现代Web应用的重要组成部分，shadcn-solid提供了美观且功能完善的侧边栏组件：

⚡ 快速开始：安装与设置

安装依赖

首先，运行以下命令安装必要的依赖：

npm install cva@beta tailwind-merge tw-animate-css

或者，如果你使用UnoCSS：

npm install cva@beta tailwind-merge @unocss/preset-wind4

添加样式

创建CSS文件并添加以下样式代码：

/* src/styles/app.css */ @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is([data-kb-theme="dark"] *)); @theme inline { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); /* 颜色变量定义... */ } :root { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); /* 更多颜色变量... */ } [data-kb-theme="dark"] { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); /* 深色主题颜色变量... */ } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } }

导入组件

shadcn-solid的组件位于src/registry/ui/目录下，你可以直接导入并使用它们：

• 按钮组件：src/registry/ui/button.tsx
• 卡片组件：src/registry/ui/card.tsx
• 侧边栏组件：src/registry/ui/sidebar.tsx

📚 组件示例与文档

shadcn-solid提供了丰富的组件示例，你可以在以下路径找到它们：

• 基础组件示例：src/registry/examples/
• 图表组件示例：src/registry/charts/
• 布局组件示例：src/registry/blocks/

完整的文档可以在项目的apps/docs/src/content/docs/目录中找到，包括组件使用指南和最佳实践。

🤝 社区与贡献

shadcn-solid是一个开源项目，欢迎社区贡献。如果你有任何问题或建议，可以通过项目的issue系统提出。

📄 许可证

shadcn-solid根据MIT许可证开源。

【免费下载链接】shadcn-solidshadcn/ui, but for Solid.项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-solid