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