Supabase
The open source Firebase alternative
Start new thread
Ivan Vasilov

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

by
Supabase
•
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
Ivan Vasilov
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 (https://x.com/shadcn/status/1829...) 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 https://ui.shadcn.com/docs/insta... - Install https://supabase.com/ui/docs/nex... - 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 (https://github.com/orgs/supabase...) which components you want to see us build next. We can’t wait to see what you build 🔥🔥🔥! Thanks, Ivan
Jonny Summers-Muir
Maker

@ivasilov ⚡️⚡️⚡️

Terry Sutton
Maker

@ivasilov great work Ivan!


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

Guilherme Souza

@ivasilov ⚡️⚡️⚡️⚡️⚡️

Thor Schaeff

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

Ant Wilson

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

Jonny Summers-Muir
Maker

@jon_meyers  @antwilson  more hands please

Tyler Shukert

@jon_meyers  @antwilson The next video is going to be wild!

Jon Meyers

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

Jon Meyers

@jon_meyers  @antwilson We added these in post. Do they look good?

@jon_meyers  @antwilson youtube tutorial soon?

Tyler Shukert

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

Jonny Summers-Muir
Maker

@dshukertjr ⚡️⚡️⚡️

@dshukertjr thank you i made those

Karlo Ison

@dshukertjr ✅🚀

Faizan Jan

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!

Jonny Summers-Muir
Maker

@faizanjan_ 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?

Faizan Jan

@jon_summers_muir 
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 here. I am building it for filtering resumes at the moment, but usecase can easily expand later.

Jonny Summers-Muir
Maker

@faizanjan_ this is nice!

Some other thoughts - we could do a mix as well, in which there is manual filter UI (like this) 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.

Ivan Vasilov
Maker

 hey @faizanjan_, 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!

Dev Pasha

@faizanjan_ I fully agree, that's great!

Alex Lou
Supabase is eating its way to the frontend!
Jonny Summers-Muir
Maker

@thefullstack ⚡️⚡️⚡️

@thefullstack we are acquiring react next year

Alex Lou

And we are first to hear? w00t!

can you add a component that gets me users

Jonny Summers-Muir
Maker

@jordienric ⚡️⚡️⚡️

Jonny Summers-Muir
Maker

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

@ivasilov  @jon_summers_muir ivan is the shadcn of frontend

Max Kaymanov

@ivasilov  @jon_summers_muir 

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.

Carel de Waal

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

Ivan Vasilov

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

Jonny Summers-Muir
Maker

@careldewaal Maybe try it ? :D

Egor Romanov

sick ⚡️

Jonny Summers-Muir
Maker

@egor_romanov you're sick !

Saxon Fletcher
Maker

🔥

Jonny Summers-Muir
Maker

@saxonfletcher fire indeed

123
Next
Last