---
name: "@supabase"
slug: "supabase"
description: "Official Supabase UI registry — shadcn/ui-compatible components that wire your Next.js front-end directly to Supabase services. Includes password-based auth (sign-in/sign-up), social auth, current-user avatar, realtime avatar stack, realtime chat, realtime cursor, realtime Monaco editor, realtime flow, dropzone for Storage uploads, and an infinite-query helper. Built with React, Next.js (App Router), Tailwind CSS, and the Supabase JS client. Fully free and open source. Use for: any Next.js + Supabase project that needs pre-wired auth flows, realtime collaboration widgets, or Storage upload components without writing the Supabase client integration from scratch."
category: "Component library (general)"
tags: ["auth", "blocks", "components", "editor", "forms", "hooks", "media", "pro-available"]
framework: "react"
license: "Apache-2.0"
author: "supabase"
website: "https://supabase.com/ui"
github: "https://github.com/supabase/supabase"
registry: "https://supabase.com/ui/r/registry.json"
pro: true
pro_url: "https://supabase.com/pricing"
github_stars: 105895
component_count: 60
generated_at: "2026-07-28T08:00:50.948Z"
---

# @supabase

Official Supabase UI registry — shadcn/ui-compatible components that wire your Next.js front-end directly to Supabase services. Includes password-based auth (sign-in/sign-up), social auth, current-user avatar, realtime avatar stack, realtime chat, realtime cursor, realtime Monaco editor, realtime flow, dropzone for Storage uploads, and an infinite-query helper. Built with React, Next.js (App Router), Tailwind CSS, and the Supabase JS client. Fully free and open source. Use for: any Next.js + Supabase project that needs pre-wired auth flows, realtime collaboration widgets, or Storage upload components without writing the Supabase client integration from scratch.

## Links

- Website: https://supabase.com/ui
- GitHub: https://github.com/supabase/supabase
- Registry JSON: https://supabase.com/ui/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/supabase
- This file: https://sh4dcn.vercel.app/md/supabase.md
- Pro / pricing: https://supabase.com/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://supabase.com/ui/r/registry.json
pnpm dlx shadcn@latest add https://supabase.com/ui/r/registry.json
bunx shadcn@latest add https://supabase.com/ui/r/registry.json
# clone the source repo
git clone https://github.com/supabase/supabase.git
# fetch the raw registry index
curl -s https://supabase.com/ui/r/registry.json
```

## Components (60)

| name | type | description | install |
| --- | --- | --- | --- |
| password-based-auth-nextjs | registry:block | Password Based Auth flow for Nextjs and Supabase | `npx shadcn@latest add https://supabase.com/ui/r/password-based-auth-nextjs.json` |
| password-based-auth-react | registry:block | Password Based Auth flow for React and Supabase | `npx shadcn@latest add https://supabase.com/ui/r/password-based-auth-react.json` |
| password-based-auth-react-router | registry:block | Password Based Auth flow for React Router and Supabase | `npx shadcn@latest add https://supabase.com/ui/r/password-based-auth-react-router.json` |
| password-based-auth-tanstack | registry:block | Password Based Auth flow for tanstack and Supabase | `npx shadcn@latest add https://supabase.com/ui/r/password-based-auth-tanstack.json` |
| social-auth-nextjs | registry:block | Social Auth flow for Nextjs and Supabase | `npx shadcn@latest add https://supabase.com/ui/r/social-auth-nextjs.json` |
| social-auth-react | registry:block | Social Auth flow for React and Supabase | `npx shadcn@latest add https://supabase.com/ui/r/social-auth-react.json` |
| social-auth-react-router | registry:block | Social Auth flow for React Router and Supabase | `npx shadcn@latest add https://supabase.com/ui/r/social-auth-react-router.json` |
| social-auth-tanstack | registry:block | Social Auth flow for TanStack and Supabase | `npx shadcn@latest add https://supabase.com/ui/r/social-auth-tanstack.json` |
| dropzone-nextjs | registry:component | Displays a control for easier uploading of files directly to Supabase Storage. | `npx shadcn@latest add https://supabase.com/ui/r/dropzone-nextjs.json` |
| dropzone-react | registry:component | Displays a control for easier uploading of files directly to Supabase Storage. | `npx shadcn@latest add https://supabase.com/ui/r/dropzone-react.json` |
| dropzone-react-router | registry:component | Displays a control for easier uploading of files directly to Supabase Storage. | `npx shadcn@latest add https://supabase.com/ui/r/dropzone-react-router.json` |
| dropzone-tanstack | registry:component | Displays a control for easier uploading of files directly to Supabase Storage. | `npx shadcn@latest add https://supabase.com/ui/r/dropzone-tanstack.json` |
| realtime-cursor-nextjs | registry:component | Component which renders realtime cursors from other users in a room. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-cursor-nextjs.json` |
| realtime-cursor-react | registry:component | Component which renders realtime cursors from other users in a room. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-cursor-react.json` |
| realtime-cursor-react-router | registry:component | Component which renders realtime cursors from other users in a room. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-cursor-react-router.json` |
| realtime-cursor-tanstack | registry:component | Component which renders realtime cursors from other users in a room. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-cursor-tanstack.json` |
| current-user-avatar-nextjs | registry:component | Component which renders the current user's avatar. | `npx shadcn@latest add https://supabase.com/ui/r/current-user-avatar-nextjs.json` |
| current-user-avatar-react | registry:component | Component which renders the current user's avatar. | `npx shadcn@latest add https://supabase.com/ui/r/current-user-avatar-react.json` |
| current-user-avatar-react-router | registry:component | Component which renders the current user's avatar. | `npx shadcn@latest add https://supabase.com/ui/r/current-user-avatar-react-router.json` |
| current-user-avatar-tanstack | registry:component | Component which renders the current user's avatar. | `npx shadcn@latest add https://supabase.com/ui/r/current-user-avatar-tanstack.json` |
| realtime-avatar-stack-nextjs | registry:component | Component which stack of avatars, tracked by realtime presence. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-avatar-stack-nextjs.json` |
| realtime-avatar-stack-react | registry:component | Component which stack of avatars, tracked by realtime presence. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-avatar-stack-react.json` |
| realtime-avatar-stack-react-router | registry:component | Component which stack of avatars, tracked by realtime presence. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-avatar-stack-react-router.json` |
| realtime-avatar-stack-tanstack | registry:component | Component which stack of avatars, tracked by realtime presence. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-avatar-stack-tanstack.json` |
| realtime-chat-nextjs | registry:component | Component which renders realtime chat messages from other users in a room. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-chat-nextjs.json` |
| realtime-chat-react | registry:component | Component which renders realtime chat messages from other users in a room. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-chat-react.json` |
| realtime-chat-react-router | registry:component | Component which renders realtime chat messages from other users in a room. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-chat-react-router.json` |
| realtime-chat-tanstack | registry:component | Component which renders realtime chat messages from other users in a room. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-chat-tanstack.json` |
| realtime-flow-nextjs | registry:component | Real-time flow diagram editor for collaborative applications. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-flow-nextjs.json` |
| realtime-flow-react | registry:component | Real-time flow diagram editor for collaborative applications. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-flow-react.json` |
| realtime-flow-react-router | registry:component | Real-time flow diagram editor for collaborative applications. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-flow-react-router.json` |
| realtime-flow-tanstack | registry:component | Real-time flow diagram editor for collaborative applications. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-flow-tanstack.json` |
| realtime-monaco-nextjs | registry:component | Real-time Monaco editor for collaborative applications. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-monaco-nextjs.json` |
| realtime-monaco-react | registry:component | Real-time Monaco editor for collaborative applications. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-monaco-react.json` |
| realtime-monaco-react-router | registry:component | Real-time Monaco editor for collaborative applications. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-monaco-react-router.json` |
| realtime-monaco-tanstack | registry:component | Real-time Monaco editor for collaborative applications. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-monaco-tanstack.json` |
| infinite-query-hook | registry:block | React hook for infinite lists, fetching data from Supabase. | `npx shadcn@latest add https://supabase.com/ui/r/infinite-query-hook.json` |
| tanstack-db-nextjs | registry:block | TanStack DB integration with Supabase collections for type-safe database operations | `npx shadcn@latest add https://supabase.com/ui/r/tanstack-db-nextjs.json` |
| supabase-client-nextjs | registry:lib | Supabase Client for Next.js | `npx shadcn@latest add https://supabase.com/ui/r/supabase-client-nextjs.json` |
| supabase-client-react | registry:lib | Supabase Client for React | `npx shadcn@latest add https://supabase.com/ui/r/supabase-client-react.json` |
| supabase-client-react-router | registry:lib | Supabase Client for React Router | `npx shadcn@latest add https://supabase.com/ui/r/supabase-client-react-router.json` |
| supabase-client-tanstack | registry:lib | Supabase Client for TanStack Start | `npx shadcn@latest add https://supabase.com/ui/r/supabase-client-tanstack.json` |
| platform-kit-nextjs | registry:block | Platform Kit for Nextjs and Supabase | `npx shadcn@latest add https://supabase.com/ui/r/platform-kit-nextjs.json` |
| supabase-client-nuxtjs | registry:lib | Supabase Client for Nuxt.js | `npx shadcn@latest add https://supabase.com/ui/r/supabase-client-nuxtjs.json` |
| supabase-client-vue | registry:lib | Supabase Client for Vue | `npx shadcn@latest add https://supabase.com/ui/r/supabase-client-vue.json` |
| password-based-auth-nuxtjs | registry:block | Password Based Auth flow for Nuxt.js and Supabase | `npx shadcn@latest add https://supabase.com/ui/r/password-based-auth-nuxtjs.json` |
| password-based-auth-vue | registry:block | Password Based Auth flow for Vue and Supabase | `npx shadcn@latest add https://supabase.com/ui/r/password-based-auth-vue.json` |
| social-auth-vue | registry:block | Social Auth flow for Vue and Supabase | `npx shadcn@latest add https://supabase.com/ui/r/social-auth-vue.json` |
| social-auth-nuxtjs | registry:block | Social Auth flow for Nuxt and Supabase | `npx shadcn@latest add https://supabase.com/ui/r/social-auth-nuxtjs.json` |
| dropzone-nuxtjs | registry:block | Displays a control for easier uploading of files directly to Supabase Storage. | `npx shadcn@latest add https://supabase.com/ui/r/dropzone-nuxtjs.json` |
| dropzone-vue | registry:block | Displays a control for easier uploading of files directly to Supabase Storage. | `npx shadcn@latest add https://supabase.com/ui/r/dropzone-vue.json` |
| realtime-cursor-nuxtjs | registry:component | Component which renders realtime cursors from other users in a room. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-cursor-nuxtjs.json` |
| realtime-cursor-vue | registry:component | Component which renders realtime cursors from other users in a room. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-cursor-vue.json` |
| current-user-avatar-nuxtjs | registry:block | Component which renders the current user's avatar. | `npx shadcn@latest add https://supabase.com/ui/r/current-user-avatar-nuxtjs.json` |
| current-user-avatar-vue | registry:block | Component which renders the current user's avatar. | `npx shadcn@latest add https://supabase.com/ui/r/current-user-avatar-vue.json` |
| realtime-avatar-stack-nuxtjs | registry:block | Component which stack of avatars, tracked by realtime presence. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-avatar-stack-nuxtjs.json` |
| realtime-avatar-stack-vue | registry:block | Component which stack of avatars, tracked by realtime presence. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-avatar-stack-vue.json` |
| realtime-chat-nuxtjs | registry:block | Component which provides a realtime chat interface. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-chat-nuxtjs.json` |
| realtime-chat-vue | registry:block | Component which provides a realtime chat interface. | `npx shadcn@latest add https://supabase.com/ui/r/realtime-chat-vue.json` |
| infinite-query-composable | registry:component | Vue Composable for infinite lists, fetching data from Supabase. | `npx shadcn@latest add https://supabase.com/ui/r/infinite-query-composable.json` |

## For AI agents

```text
You are adding components from @supabase to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/supabase.md) for the component list.
2. Fetch the machine-readable index: https://supabase.com/ui/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: supabase).
```