SuperAPI AI 工具集

shadcn-core-blocks

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:在需要完整页面级界面(仪表盘、登录/注册页、侧边栏布局、日历应用)时,用 shadcn Blocks 作为起点,而非从零拼装单个组件。

主要能力:Blocks 与组件同源,都是经 shadcn add CLI 复制进用户项目的源码,只是输出为多文件脚手架(页面入口、子组件、可能的数据文件及缺失的基础组件)。官方画廊 https://ui.shadcn.com/blocks 按类别组织,观察到的类别有 dashboard、sidebar、login、signup、authentication、calendar,例如 dashboard-01、sidebar-03、sidebar-07、login-03、login-04。

使用方式:先运行 pnpm dlx shadcn@latest init 完成初始化并选定 style、baseColor、cssVariables 与别名(初始化后不可变);再用 pnpm dlx shadcn@latest add <block-id> 安装(也支持 npx、bunx、yarn dlx)。不确定文件输出可用 --dry-run,单文件查看用 --view。对已定制的块重新添加前先运行 --diff,再逐文件决定跳过、覆盖或手工合并。安装后应把全部块文件提交到版本控制,按项目代码对待,可自由删改子组件。

适用场景:整页或大型布局外壳优先选 Block;从零组合自定义布局或给现有页面加一个控件时选单个组件。块与组件可混用,例如用块做页面骨架,再把手写组件放进内容区。

限制:每个项目只能选一个 style(default、new-york、luma、sera,其中 luma 需 CLI 4.1.2+、sera 需 4.3.0+,default 已弃用),不可混用,也没有切换命令,切换等于重新初始化并重新添加。块不会自动升级,重新添加是手工合并;重新添加前应锁定 radix-ui、cva、tailwind-merge、react-day-picker、cmdk、lucide-react 等依赖。具体块 ID 与文件清单需以画廊和安装时为准,其他细节暂未提供。