Supabase
The open source Firebase alternative
Start new thread

Supabase UI Library - Drop-in components based on shadcn/ui & powered by Supabase

by•
A collection of powerful, customizable UI components built on shadcn/ui. Instantly add Supabase Auth forms, Storage uploads, Realtime chat, cursors, and presence indicators, and more to any Next.js, React Router, TanStack Start, or plain React project.

Add a comment

Replies

Best
Maker
📌
Hey everyone, I’m excited to introduce the Supabase UI Library! 💎 It contains a set of UI components, built on top of shadcn/ui and Tailwind CSS, that works seamlessly with Supabase ⚡️. shadcn/ui has taken the world by storm and often cited as the most popular React project, at least in the last two years, and with good reason. It’s approach to quality and maintainability made it a no brainer to adopt as the foundation for our components library. By leveraging shadcn’s newly released component registry () feature, we were able to build a component registry that will get you up in running with Supabase in seconds. Our components can be fully customized and follow the conventions for theming and reuses existing shadcn/ui components, like buttons and inputs, so you can easily drop it into your Next.js, Tanstack Start, React Router, or plain React app ⚛️. Today, we’ve added multiple blocks to help you start building your app with Supabase: - Supabase Clients - connect your app to Supabase - Password-based authentication - connects to Supabase Auth - Dropzone (File Upload) - uploads to Supabase Storage - Realtime Cursor - build multiplayer experiences - Realtime Avatar Stack -see who's online - Realtime Chat - exchange chat messages in real-time - AI editor rules - curated set of LLM rules tailored for Supabase and Postgres Here’s how to get started: - Add shadcn/ui to your project using these guides - Install - Use the example from the component page in your app code - Set your Supabase credentials as environment variables - Open the page in another browser tab and chat with yourself We plan on expanding the library with new components in the coming days. Please let us know in this GitHub Discussion () which components you want to see us build next. We can’t wait to see what you build 🔥🔥🔥! Thanks, Ivan
Maker

 ⚡️⚡️⚡️

Maker

 great work Ivan!


Let us know what else you'd like to see y'all!

 ⚡️⚡️⚡️⚡️⚡️

 This makes so much sense and will empower so many builders 🔥 Awesome work y'all!

The best thing about this new product is hands. Truly unrivaled.

Maker

    more hands please

   The next video is going to be wild!

 You tried to slow these hands down with your giant sleeves, but it only made them stronger!

   We added these in post. Do they look good?

   youtube tutorial soon?

I love the chat UI! The subtle animations are so slick!

Maker

 ⚡️⚡️⚡️

 thank you i made those

 ✅🚀

Hey, this looks like a great start! The components you've already added seem like a fantastic way to simplify complex querying. I'm working on a custom query builder and have been exploring more advanced filtering options—think multi-tiered filters that integrate dynamic conditions. shows operators based on datatypes etc. Will there be plans to expand the library to support more complex filter setups like this? It would be great to see these advanced options, especially for scenarios involving multi-column conditions and nested logic. Would love to hear your thoughts on this!

Maker

 We're you thinking a dynamic filter that would eventually populate a supabase-js query, or thinking building a raw SQL query based on the filter selection?

 
I am trying to build a query builder that will show operands based on the table schema, and the operators for those operands based on the datatypes of the operand. If the table column is json, then the filter will be nested. And we can group the filters together to make a condition group. Eventually, I convert the whole filter state into a single SQL query which queries the relevant data from sqlite in-browser database (hence no network requests), hence making filtering much much faster even with thousands of records.
It is a little difficult to articulate this, you can checkout my first prototype . I am building it for filtering resumes at the moment, but usecase can easily expand later.

Maker

 this is nice!

Some other thoughts - we could do a mix as well, in which there is manual filter UI (like ) and then an additional option is to write an AI prompt which could return results but then also set the filter UI to the right options for the query. I think Linear app does this as well.

Maker

 hey , thank you for the kind words! Yes, we're planning on releasing a more generic hook to query the database! Can't wait to see what you build!

 I fully agree, that's great!

Supabase is eating its way to the frontend!
Maker

 ⚡️⚡️⚡️

 we are acquiring react next year

And we are first to hear? w00t!

can you add a component that gets me users

Maker

 ⚡️⚡️⚡️

Maker

Great work !!
The concept of being able to insert working code into your favorite framework with 1 command is mindblowing.

   ivan is the shadcn of frontend

   

This is a great direction. What stands out to me is how these primitives reduce friction without hiding complexity — especially for teams trying to balance real-time features with long-term structure and trust. Curious how you’re thinking about guardrails as more builders adopt this.

Nice! Can I one shot Supabase auth with this UI with the mcp or cursor rules?

 Yes! The Library already has Auth UI AND Cursor rules, stay tuned for Supa MCP :)

Maker

 Maybe try it ? :D

sick ⚡️

Maker

 you're sick !

Maker

🔥

Maker

 fire indeed

123
Next
Last