安装热度榜

shadcn

shadcn/ui 技能用于管理 shadcn 组件和项目,涵盖添加、搜索、修复、调试、样式化及组合 UI(包括聊天界面)。提供项目上下文、组件文档和使用示例,适用于使用 shadcn/ui、组件注册表、预设(--preset)或任何带 components.json 文件的项目。

分类
前端与 React
榜单排名
#246
安装量
271,099

它能做什么

中文摘要

shadcn/ui 技能用于管理 shadcn 组件和项目,涵盖添加、搜索、修复、调试、样式化及组合 UI(包括聊天界面)。提供项目上下文、组件文档和使用示例,适用于使用 shadcn/ui、组件注册表、预设(--preset)或任何带 components.json 文件的项目。

为什么推荐

推荐理由

该技能提供完整的 shadcn/ui 组件使用指南,包含关键规则、常见模式、组件选择表和 CLI 工作流,能帮助开发者高效地构建和定制 UI 组件,避免常见错误。

什么时候用

适用场景

  • 使用 shadcn/ui 构建组件和设计系统
  • 添加、搜索或更新 shadcn 组件及预设
  • 调试和修复 shadcn 组件相关问题
  • 使用 shadcn 的聊天相关组件开发对话界面

使用前先看

主要亮点

  • 01

    提供项目上下文获取命令及关键字段说明(aliases、isRSC、tailwindVersion、base、iconLibrary 等)

  • 02

    涵盖样式、表单、组件结构、图标、聊天等关键规则,并附带错误/正确代码对

  • 03

    包含组件选择表,根据需求推荐对应组件

  • 04

    提供完整的 CLI 工作流,包括搜索、获取文档、安装、更新、预设切换等操作指南

  • 05

    强调使用现有组件、语义化颜色和正确组合方式,避免自定义样式和重复造轮子

原始文档

原文摘录

shadcn/ui A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI. > **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.