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