前端UI组件【免费下载链接】next-shadcn-dashboard-starterFree, open source, AI-friendly admin dashboard template built with Next.js 16, shadcn/ui, Tailwind CSS, and TypeScript. Production-ready tables, forms, auth, and billing. MIT licensed.项目地址https://gitcode.com/gh_mirrors/ne/next-shadcn-dashboard-starter点击查看免费下载本指南以仓库内.agents/skills/shadcn/rules/composition.md为骨架系统讲解 shadcn/ui 组件组合Component Composition的完整规则从条目必须包裹在 Group 内的层级约束到 Overlay 选型、无障碍标题、Card 完整结构、Button 加载态等十余条可执行规范并结合 next-shadcn-dashboard-starter 中的真实源码src/components/ui/与src/features/逐一印证。读完你将具备一套可直接落地、可被 Code Review 与 AI Agent 校验的 UI 组合准则。一、为什么需要组合规则从能用到规范shadcn/ui 的组件以源码形式直接落入项目src/components/ui/开发者可以自由拼装。自由带来的副作用是同一个功能存在无数种等价写法——手写的div气泡、自绘的空状态、裸hr分隔线。这些写法在视觉上可能相差无几却在可访问性、状态联动、语义化与可维护性上存在系统性缺陷。composition.md正是为消除这种随意性而存在。它的核心哲学与.agents/skills/shadcn/SKILL.md中的原则一脉相承Use existing components first——动手写自定义标记前先确认是否有现成组件Compose, dont reinvent——设置页 Tabs Card 表单控件仪表盘 Sidebar Card Chart TableUse built-in variants before custom styles——优先variantoutline、sizesm等内置变体。下文每条规则均以错误写法 → 正确写法的对比呈现配合源码佐证可直接作为团队规范与 Agent 校验清单。二、条目永远包裹在 Group 组件内规则绝不在内容容器中直接渲染条目item所有基于 Group 的组件都必须遵循内容容器 → Group → Item的三层结构。以Select为例错误写法直接散落SelectItem{/* Incorrect */} SelectContent SelectItem valueappleApple/SelectItem SelectItem valuebananaBanana/SelectItem /SelectContent正确写法用SelectGroup包裹{/* Correct */} SelectContent SelectGroup SelectItem valueappleApple/SelectItem SelectItem valuebananaBanana/SelectItem /SelectGroup /SelectContent该规则适用于所有基于 Group 的组件族完整映射如下Item条目Group容器SelectItem、SelectLabelSelectGroupDropdownMenuItem、DropdownMenuLabel、DropdownMenuSubDropdownMenuGroupMenubarItemMenubarGroupContextMenuItemContextMenuGroupCommandItemCommandGroupMessageScrollerItemMessageScrollerContentMessage同一发送者连续多条MessageGroupBubble堆叠展示BubbleGroupAttachment同一行排列AttachmentGroup仓库源码可直接验证这些 Group 组件的存在select.tsx、dropdown-menu.tsx、command.tsx 等均导出了对应的*Group组件搜索src/components/ui/可发现SelectGroup、DropdownMenuGroup、ContextMenuGroup、MenubarGroup、CommandGroup在>Alert AlertTitleWarning/AlertTitle AlertDescriptionSomething needs attention./AlertDescription /Alert空状态使用 Empty 组件空状态无数据、无项目使用Empty完整组合而不是自绘的居中 div。文档示例Empty EmptyHeader EmptyMedia varianticonFolderIcon //EmptyMedia EmptyTitleNo projects yet/EmptyTitle EmptyDescriptionGet started by creating a new project./EmptyDescription /EmptyHeader EmptyContent ButtonCreate Project/Button /EmptyContent /Empty从源码看empty.tsxEmpty提供了EmptyHeader、EmptyMediavariant支持default与iconicon 变体自动为图标铺设size-8 rounded-lg bg-muted底板、EmptyTitle、EmptyDescription、EmptyContent五个子部件且根节点自带border-dashed虚线框、垂直居中与text-balance直接复用即可获得一致的空态视觉。Toast 通知统一走 sonner所有 Toast 通知使用sonner的toast()API禁止自定义浮层import { toast } from sonner toast.success(Changes saved.) toast.error(Something went wrong.) toast(File deleted., { action: { label: Undo, onClick: () undoDelete() }, })仓库对此的践行非常彻底搜索src/features/可发现toast在 multi-step-product-form.tsx、sheet-form-demo.tsx、user-form-sheet.tsx、product-form.tsx 等十余个表单/表格场景中被统一使用且项目根目录提供了 sonner.tsx 作为全局 Toaster 封装。四、Overlay 组件选型六类覆盖全部浮层场景文档给出了一张清晰的选型表是先选对组件再谈组合的前提使用场景组件需要输入、聚焦单一任务的模态框Dialog破坏性操作二次确认AlertDialog展示详情或筛选条件的侧边面板Sheet移动端优先的底部面板Drawer悬停时快速查看信息HoverCard点击后展示小型上下文内容Popover这套组件在仓库中全部可用dialog.tsx、alert-dialog.tsx、sheet.tsx、drawer.tsx、hover-card.tsx、popover.tsx。一个典型的实际用例是 user-form-sheet.tsx——用户表单以侧边 Sheet 承载与详情/编辑侧边面板的场景完全对应。五、Dialog、Sheet、Drawer 必须携带 Title规则DialogTitle、SheetTitle、DrawerTitle是硬性要求这是无障碍accessibility红线——屏幕阅读器依赖标题声明模态用途。若视觉上不需要显示标题用classNamesr-only隐藏而非删除DialogContent DialogHeader DialogTitleEdit Profile/DialogTitle DialogDescriptionUpdate your profile./DialogDescription /DialogHeader ... /DialogContent推荐结构是DialogHeader包裹DialogTitleDialogDescription保持标题与描述在语义上的层级关系。六、Card 使用完整组合结构不要把所有内容一股脑塞进CardContent应使用完整组合Card CardHeader CardTitleTeam Members/CardTitle CardDescriptionManage your team./CardDescription /CardHeader CardContent.../CardContent CardFooter ButtonInvite/Button /CardFooter /CardCardHeader标题/描述区、CardContent主体、CardFooter操作区三者职责分明。仓库中 overview.tsx 等仪表盘卡片均按此结构组织card.tsx 提供全部子部件。七、Button 没有 isPending / isLoading加载态用组合实现规则Button不提供isPending或isLoading属性加载状态通过Spinnerdata-icondisabled组合表达Button disabled Spinner>Tabs defaultValueaccount TabsList TabsTrigger valueaccountAccount/TabsTrigger TabsTrigger valuepasswordPassword/TabsTrigger /TabsList TabsContent valueaccount.../TabsContent /TabsTabsList负责触发器的视觉容器底栏、激活态高亮、键盘横向导航绕开它会导致触发器的状态样式与焦点管理失效。九、Avatar 必须包含 AvatarFallback规则Avatar总是需要AvatarFallback用于图片加载失败时的兜底展示Avatar AvatarImage src/avatar.png altUser / AvatarFallbackJD/AvatarFallback /Avatar仓库中的落地证据非常充分recent-sales.tsx 中sale.fallback渲染为AvatarFallbackchat-header.tsx 与 conversation-list.tsx 也均在AvatarImage之后紧跟AvatarFallback取姓名首字母。这保证了网络头像加载失败时用户仍能通过首字母识别身份。十、从规则到实践仓库中的综合范例把上述规则组合起来最好的范本是 AI 聊天演示页 ai-chat-demo.tsx。它集中印证了 composition.md 与 chat.md 的协同固定嵌套顺序MessageScrollerProvider→MessageScroller→MessageScrollerViewport→MessageScrollerContent→MessageScrollerItem逐层展开Marker 承载系统提示工具调用状态用MarkerMarkerIcon/…MarkerContentRunning {name}…/MarkerContent/Marker表达Thinking…加载提示也复用MarkerContentshimmer类内置滚动能力defaultScrollPositionend直接声明初始锚定底部无需手写 scroll 逻辑。在 chat.md 中还强调滚动跟随、锚定、跳转最新等能力由MessageScroller内置autoScroll、scrollAnchor、MessageScrollerButton不需要手写useStickToBottomhook 或ResizeObserver确需扩展时再通过useMessageScroller、useMessageScrollerVisibility、useMessageScrollerScrollable三个 hook 读取状态均来自shadcn/react依赖见 message-scroller.tsx。十一、规则速查清单将全文沉淀为一份可在 Code Review 中逐项勾选的清单Group 包裹SelectItem→SelectGroupDropdownMenuItem→DropdownMenuGroupCommandItem→CommandGroup聊天条目遵循固定嵌套顺序Callout用Alert空状态用EmptyEmptyHeader/EmptyMedia/EmptyTitle/EmptyDescription/EmptyContentToast统一sonner的toast()Overlay 选型Dialog模态输入/ AlertDialog破坏性确认/ Sheet侧边/ Drawer底部/ HoverCard悬停/ Popover点击Dialog/Sheet/Drawer 必有 Title视觉隐藏用sr-onlyCard 用完整结构CardHeaderCardTitleCardDescriptionCardContentCardFooterButton 加载态Spinnerdata-iconinline-startdisabled无isPending/isLoadingTabsTrigger 必在 TabsList 内Avatar 必有 AvatarFallback分隔线用Separator加载占位用Skeleton状态标签用Badge。这套规范不仅适用于当前仓库的 UI 开发也同时是 shadcn Skill 体系中Critical Rules的一部分——规则文件 composition.md 与 SKILL.md、chat.md、styling.md、forms.md 共同构成一套完整的组件质量门禁样式规则管长得对组合规则管结构对从而让每个页面都建立在可维护、可访问、可被工具校验的组件骨架之上。赞分享前端UI组件【免费下载链接】next-shadcn-dashboard-starterFree, open source, AI-friendly admin dashboard template built with Next.js 16, shadcn/ui, Tailwind CSS, and TypeScript. Production-ready tables, forms, auth, and billing. MIT licensed.项目地址https://gitcode.com/gh_mirrors/ne/next-shadcn-dashboard-starter点击查看免费下载相关推荐网盘直链下载助手使用指南免费拿到网盘文件真实下载地址的方法网盘直链下载助手使用指南免费拿到网盘文件真实下载地址的方法 网盘里的文件想快速下下来卡点常常是拿不到真实下载地址。网盘直链下载助手LinkSwift是一前端以组合取代配置next-shadcn-dashboard-starter 中可扩展的 React 组件组合模式以组合取代配置next shadcn dashboard starter 中可扩展的 React 组件组合模式 导读 本文基于仓库中 .agents/skil前端UI组件new-api 前端 shadcn/ui 组件组合规范从 composition.md 读懂 13 条组件组装规则new api 前端 shadcn/ui 组件组合规范从 composition.md 读懂 13 条组件组装规则 new api 的 Web 控制台 we后端API网关LLM 网关大模型认证鉴权桌面应用上一篇网盘下载速度慢8大平台直链解析工具帮你轻松提速下一篇TikTokDownloader免费下载抖音 / TikTok 视频还能顺手采集评论和热榜数据创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考