当前位置：首页 > news >正文

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

news 2026/8/5 17:59:57

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; } }