跳到内容

二维码登录表单

认证 · Pro 源码

一个提供两条登录路径的界面：左侧是常规的邮箱和密码，右侧是一个可扫描的二维码，供已经在你的手机应用上登录的用户使用。二维码在构建时由一个普通的 URL 字符串渲染成 SVG，放在两种主题下都不会反转的那一对令牌上，因此扫码器看到的始终是浅色底上的深色模块；旁边还有一个刷新控件，用于它所编码的会话 id 过期时使用。表单本身不携带任何身份验证逻辑。

打开实时预览获取 Neobrutalism Pro
认证
Neobrutalist QR code sign in page for React and Tailwind CSS: on the left a Sign In heading with email and password fields, a Remember me checkbox and a Sign In button; on the right a dark panel holding a large QR code on a yellow tile with a circular refresh button on its corner and the caption Log in with a QR code.
二维码登录表单
  • Hero、定价与登录
  • 预览每个断点
  • 复制源代码
  • MCP 已准备好安装
  • Radix · Base UI · React Aria
  • 158 现成砌块
  • 已发布的页面部分
  • 仪表盘与营销
  • Pro 解锁密码
  • 即用型布局
预览免费全屏打开并切换断点或主题。代码Pro一个独立的 TSX 文件。复制它，拥有它。安装Pro一条 shadcn CLI 命令，或用于 Claude Code、Cursor 等 MCP 客户端的代理提示。

构建工具

加上 lucide-react 图标和 Tailwind CSS — 无其他运行时依赖。

更多 认证 布局（6）

查看全部

https://neobrutalism.com/zh/blocks/authentication/qr-code-sign-in-form

喜爱。 开发者、设计师，
创作者都

  • 偶然刷到你的 UI 套件就立马入手。这么新还在活跃维护、不断改进，干得漂亮 🤘

    Ziv Reich, 软件开发者

  • 只想说 neobrutalism.com 做得太棒了，真的很喜欢。我不擅长设计，所以它帮了大忙，我拿它做了自己的个人网站。

    Paul Bratslavsky, Coding With Paul 主理人

  • 终于用 Neobrutalism.com 重做了个人网站——好玩的库，上手也简单！

    Cameron Blackwood, 内容创作者

  • Neobrutalism.com 是我最爱的复古风 UI 组件库之一——组件真能拿去上线。

    Zhengyang Hou, 独立开发者

  • Web 上我最喜欢的 UI 库之一。做得很棒，希望它越走越远。

    Taseen Tanvir, 创始人 & 设计师

  • 刚试了 Neobrutalism.com Pro，不跟风的 UI 套件真是耳目一新。新粗野主义区块 🔥 让怪又好玩的原型快多了。

    Nitesh Padghan, 捉刀写手

  • 落地页设计出色，节奏与平衡都恰到好处。配色与动效结合，带来非常出色的用户体验。

    Alan Obeng-Peprah, 高级设计师 @ NativeXAI

  • 他们对设计的交付让我非常满意。最终成品与我设想的完全一致。

    Desmond, 联合创始人 @ VectorlabsVentures

  • 作为代理公司负责人，我通常要花几周打磨客户的落地页布局。用 Neobrutalism.com 后，套上模板、改好文案就能上线。

    Duke Opoku Amankwah, 创始人 @ Midas

  • 这些模板不仅视觉出色，结构也极其清晰。为我们节省了数周开发时间。

    Abiola Braimah, 开发者 @ Studio IX

  • 品质出众，细节到位。响应式设计在所有设备上都运行得很稳。

    Acromond X., 联合创始人 @ VectorlabsVentures

  • 把这些模板接入工作流后，我们的开发周期明显缩短。做得很好。

    Raquib S., 后端开发者

  • 这些模板已成为我们的首选资源。代码干净、文档齐全，也很容易定制。

    Hallic M., 开发者 @ AtlasLabs

  • Neobrutalism.com 模板在美学与功能之间取得了完美平衡，对我们的项目是真正的改变。

    Ibrahim S., 前端负责人 @ ScaleUp

  • 支持出色，模板质量也是 premium 级别。这些模板的投资回报非常惊人。

    Kevin K., CEO @ WebCraft

  • Neobrutalism.com 模板彻底改变了我们接手新客户项目的方式。代码质量极高，设计也真正达到一流水准。

    Danny G., DevStack 创始人

  • 我用过很多模板库，但 Neobrutalism.com 在性能优化与干净代码架构上的投入格外突出。

    Ian D., Wavelength CTO

  • 这些模板里的动画与微交互非常惊艳。对我们设计团队来说是最好的投资。

    Ben S., PixelPerfect 首席设计师

  • 作为非技术创始人，Neobrutalism.com 模板帮我们在不牺牲设计质量的情况下以创纪录速度上线 MVP。投资人非常惊喜。

    Matthew I., 创业公司创始人

  • 我很欣赏这些组件的模块化与文档质量。我们能无缝混用不同模板的片段。

    Garrett P., TechFusion 前端负责人

  • Neobrutalism.com 模板的投资回报惊人。我们大幅缩短开发时间，同时交付更高质量的站点给客户。

    Xavier C., 代理公司负责人

常见
问题

二维码登录表单 区块如何组成、可以更改的内容，以及何时使用它而不是此处的其他布局。

访问受限问题？请发送电子邮件[email protected]
Get Pro — Save 33%--:--:--