【免费下载链接】spell-uiA large collection of high-quality React components that you can copy and paste into any project.项目地址https://gitcode.com/gh_mirrors/sp/spell-ui点击查看免费下载Spell UI 是一个高质量的开源 React 组件库目前已收录 33 个基于 React 和 Tailwind CSS 的动画、按钮、输入框等组件覆盖动画、交互、展示三大场景。本文是一份面向新手贡献者的完整指南你不需要搭建复杂的工程只需修改 4 个文件就能把自己的组件提交进这个组件库并获得一个专属的文档页 一、环境准备5 分钟克隆仓库并跑通本地项目在动手写组件前先把仓库跑起来方便随时本地预览效果。Fork 仓库点击仓库页面的 Fork 按钮复制一份到你自己的账号下。克隆到本地本镜像地址可直接使用git clone https://gitcode.com/gh_mirrors/sp/spell-ui cd spell-ui安装依赖并启动项目使用 pnpm 管理依赖版本要求见 package.json。pnpm i pnpm dev启动后打开http://localhost:3000就能看到组件库的文档站。 建议写新组件前先浏览几个现有组件的文档页如 Shimmer Text、Marquee感受一下文档和演示的呈现风格。二、核心流程只改 4 个文件你的组件就上架了Spell UI 采用registry 注册表机制侧边栏导航和文档目录都会根据注册表自动生成所以你不需要手动改导航只需改下面 4 个文件以example-component为例#文件作用1registry/spell-ui/example-component.tsx组件本体源码2registry.json在注册表中登记组件元信息3docs/example-component/demo.tsx文档页的演示代码4docs/example-component/doc.mdx文档页正文安装、用法、Props 说明文件 1创建组件本体在registry/spell-ui/目录下新建一个.tsx文件。这是唯一真正写代码的文件——用 TypeScript Tailwind CSS 实现你的组件即可。参考优秀范例 registry/spell-ui/shimmer-text.tsx注意它顶部用use client标记客户端组件并用cn()做样式合并。文件 2在 registry.json 中注册打开 registry.json在items数组里追加一段配置关键字段包括name组件唯一标识小写中划线如example-componenttype固定为registry:componenttitle/description展示在文档站的名称与简介files指向组件源码的路径category所属分类可选animation、button、input、feedback、background、interactive、display等见 lib/doc.ts如果组件依赖第三方包如动画库把包名填进dependencies字段即可。文件 3编写演示 demo.tsx在docs/example-component/目录下新建demo.tsx导入刚写的组件并渲染出来。文档站的实时预览区就来自这个文件。范例可参考 docs/shimmer-text/demo.tsx——只需要几行代码。如果想展示多种变体不同尺寸、颜色、速度等可以额外创建demo-sizes.tsx、demo-colors.tsx等文件文档站已有大量这样的多示例组件如docs/spinner/、docs/badge/直接照着抄结构即可。文件 4撰写文档 doc.mdx新建docs/example-component/doc.mdx推荐四段式结构完整模板见 docs/shimmer-text/doc.mdxDemoCanvas实时演示 可展开源码## Installation安装命令用InstallationTabs包裹## Usage两三行使用示例## Props用PropsTable列出参数名、类型、说明三、构建注册表并本地验收4 个文件改完后执行一条命令生成 CLI 安装所需的注册表文件pnpm registry:build它会在public/r/下生成example-component.json可对照 public/r/registry.json 查看产物结构。此时刷新本地文档站你的组件应已自动出现在侧边栏和文档目录中——这一切由 lib/doc.ts 的getDocSchema从注册表自动生成零手动配置。四、提交 PR 与社区约定提交你的组件从你 Fork 仓库的新分支如my-new-component向主仓库发起 Pull Request附上组件的预览动图会大大提高合并效率。组件写作规范速查来自 CONTRIBUTING.md规范说明语言统一使用 TypeScript风格遵循registry/spell-ui/现有模式样式使用 Tailwind CSS类名合并用cn()见 lib/utils.ts动画优先使用motionFramer Motion遇到问题直接在仓库里开一个 Issue 提问即可。写在最后回顾一下全流程Fork → 克隆 → 改 4 个文件 →pnpm registry:build→ 提交 PR。整套流程对新手非常友好你的第一个组件也许一晚上就能合入。现在就挑一个你最想实现的 UI 效果动手把它变成 Spell UI 的第 34 个组件吧 ✨赞分享【免费下载链接】spell-uiA large collection of high-quality React components that you can copy and paste into any project.项目地址https://gitcode.com/gh_mirrors/sp/spell-ui点击查看免费下载相关推荐终极指南如何在coss ui组件库中贡献你的第一个组件终极指南如何在coss ui组件库中贡献你的第一个组件 想要成为开源组件库的贡献者吗coss ui组件库为开发者提供了完整的组件开发指南让你能够轻松上手并前端UI组件设计系统React组件文档贡献者指南downshift示例提交规范React组件文档贡献者指南downshift示例提交规范 你是否在为开源项目提交组件示例时遇到过文档格式混乱、示例代码无法运行的问题作为downshift前端UI组件描述描述 简要描述此PR解决的问题或实现的功能 相关Issue 关联的issue: 123 变更类型 文档更新 代码重构 新功能 Bug修复 测试 添加了新的测试UI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考