panelui-web

适用于 Web 的 PanelUI

基于 shadcn/ui 构建的 React 组件。它们使用 Tailwind CSS v4 和 shadcn 项目已有的主题令牌设置样式，因此无需任何额外配置，就能沿用项目的颜色、圆角和深色模式。

这是 Web 组件集。PanelUI 的 React Native 库属于另一个包，使用不同的 skill；这里的内容都无法在 React Native 中运行。

编写任何 UI 之前

1. 阅读 components.md，了解现有组件。编写自定义组件之前，先使用其中的组件。
2. 使用组件前，先阅读它在 components/ 中对应的文件。文件包含导入语句、所有组成部分和每个属性，内容均来自源代码。不要猜测属性。
3. 确认项目如何安装组件：如果 components.json 中有 @panelui registry，表示组件通过 shadcn CLI 复制到项目中；如果 package.json 中有 panelui-web，表示组件从包中导入。详见 setup.md。

规则

• 颜色代表角色，而不是具体数值。 所有支持颜色的组件都使用 color="primary" | "info" | "success" | "warning" | "destructive"。不要为组件自身的颜色传入十六进制值或 Tailwind 调色板类。详见 theming.md。
• 根据含义选择角色。 好的情况用 success，需要注意时用 warning，不好的情况用 destructive，中性强调用 info，其他情况用 primary。不要让屏幕上的每个组件都使用相同的颜色。
• 为数据使用单独的文本。 组件中的标签、计数和名称应来自项目数据。不要重复使用这些文件中的示例文本。
• 组合部分与 Server Component。 在包含 "use client" 的文件中，使用点号编写组件部分：Planet.Globe。Server Component 无法读取客户端模块的属性，因此在其中应按名称导入每个部分：PlanetGlobe。Kpi 不是客户端模块，可以在任何地方使用点号。
• 先搭好框架。 作为面板展示的组件应放在框架中：在柔和的色带上显示标题，并将内部边框卡片包在其中。请参阅各组件文件中的示例。
• 为屏幕阅读器标注所需信息。 组件支持 label，显示数值时还支持 valueText。请传入这些属性：默认值比较通用。