Auth
响应式认证表单
一个响应式认证表单,包含登录、注册和忘记密码状态,使用 shadcn/ui 组件构建。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度beginner
英文提示词
Create a responsive authentication form component with three states: login, signup, and forgot password. Use shadcn/ui components (Input, Button, Card, Label). Include form validation, loading states, and error handling. The form should be centered on the page with a clean, modern design. Use Tailwind CSS for styling. Include a toggle between login and signup states.
中文提示词
创建一个响应式认证表单组件,包含三个状态:登录、注册和忘记密码。使用 shadcn/ui 组件(Input、Button、Card、Label)。包含表单验证、加载状态和错误处理。表单应在页面居中显示,采用简洁现代的设计。使用 Tailwind CSS 进行样式设计。包含登录和注册状态之间的切换。

概述
一个完整的认证表单解决方案,处理登录、注册和忘记密码流程。以可访问性为核心构建,在所有屏幕尺寸上完全响应式。
功能特性
- 三种表单状态:登录、注册、忘记密码
- 带错误消息的表单验证
- 提交时的加载状态
- 移动端和桌面端响应式设计
- 暗色模式支持
- 可访问的表单标签和 ARIA 属性
使用方法
将提示词复制到 v0、Cursor 或任何 AI 编程工具中生成组件。生成的代码将使用 shadcn/ui 基础组件和 Tailwind CSS。
自定义选项
你可以修改提示词以:
- 添加社交登录按钮(Google、GitHub)
- 包含记住我复选框
- 添加服务条款链接
- 更改配色方案