我们很高兴地发布了官方 Supabase UI 库，这是一组基于shadcn/ui构建的可直接使用组件。这些组件设计灵活，易于使用，可以轻松地用于任何 Next.js、React Router、TanStack Start 或纯 React 应用。
安装 Supabase UI 库的组件就像安装 shadcn/ui 的组件一样简单。
示例代码如下所示:
该库与shadcn/ui完全兼容，通过使用组件注册表。它遵循了主题相关的规范，并重用了现有组件，比如按钮和输入。
我们的UI组件库是一系列可重用组件的集合，这些组件旨在用于几个常用的React框架中。组件使用shadcn/ui和Tailwind CSS进行样式设计，并且可以完全自定义。
来看看这个仪表盘吧！
它旨在简化构建复杂用户功能（如用户注册）的过程，节省时间和精力。所有组件都可以用于新项目或与现有项目兼容。
都都有些什么呢？- Supabase 客户端的初始化，适用于客户端和服务器端的使用
- 基于密码的认证
- 文件上传区域（Dropzone）
- 实时光标共享
- 当前用户头像显示
- 实时头像堆叠显示
- 实时聊天功能
我们打算推出更多Supabase UI库组件，并希望听听您的反馈。如果您有特别喜欢并希望用于应用程序的组件，可以告诉我们。您可以在X或Discord(https://discord.supabase.com/)中告诉我们，或者您也可以通过提交[拉取请求](https://github.com/supabase/supabase)告诉我们。谢谢您的支持！
我们来看看其中的一些部分。
基于密码的认证在您的项目中设置身份验证可能既复杂又耗时，但基于密码的身份验证模块提供了所有必需的组件和页面，可以快速在您的项目中实现一个既安全又用户友好的身份验证流程。
它包含了你开始时所需的一切——注册、登录、重置密码和处理忘记的密码的完整构建组件。这些组件已经过样式设计、响应式设计，并且可以直接使用，所以你无需担心设计和操作流程。只需将它们放入你的项目中，就可以开始让用户注册了。
文件上传拖放区组件让您可以在几秒钟内为您的应用程序添加文件上传和存储功能。它支持拖放、多文件上传、文件大小限制和数量限制、图片预览，并支持 MIME 类型限制。
文件上传组件通常设置起来比较复杂，所以还是把精力放在文件上传到服务器之后的事情上吧。
上传文件的截图：
实时光标组件可让您在应用程序中轻松开始构建多人体验。只需将此组件添加到项目中，即可立即开始使用实时功能。
就像在 Notion 或 Figma 中一样，您可以在协作工具中查看谁在线。利用用户头像和实时头像堆栈组件，您几分钟就能为您的应用添加实时在线功能。
点击这里查看头像哦！
实时聊天功能组件是一个完整的聊天界面，让用户能够在共享房间内实时发送和接收消息。它具有实时低延迟更新、消息同步功能、消息持久化、可自定义的消息样式、新消息自动滚动到最底等功能。
除了我们的UI组件，我们还提供了一套经过精心挑选的大型语言模型规则，专为Supabase和Postgres打造。这些规则帮助AI代码编辑器更好地理解和处理行级安全性（RLS）、Postgres函数、RLS策略以及Supabase边缘函数等功能。这些规则引导模型走向最佳实践和有效语法，从而提升您的开发体验。只需一条命令即可全部搞定。
为什么基于 shadcn/ui 进行开发？Shadcn/ui 已经连续两年成为 JavaScript Rising Stars 的顶级项目，这绝对是有道理的。它提供了一种独特的做法：不是安装组件库作为依赖项，而是将实际的组件代码复制粘贴进你的项目中。这样，你就可以完全掌控自定义、样式和行为，组件就像你项目的一部分一样。
从今天开始行动起来吧！跳过繁琐的准备工作和漫长的设置时间，直接进入正题——专注于真正重要的事情：快速构建并部署。探索 Supabase UI 组件库，将其添加到您的项目中，并给我们反馈您的想法。别忘了在这里提交您想要的组件！ 提交组件
第14周启动周zh:主要舞台
第一天（Day 1） - Supabase UI 库组件
第二天（Day 2） - Supabase 边缘功能：如何从仪表板部署 + Deno 2.1 版本
建造阶段
01 -Postgres 语言服务
02 -Supabase Auth：自带 Clerk 身份验证
03 -Postgres 自动嵌入向量
共同學習，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
