Ivan Vasilov

Supabase UI Library - Drop-in components based on shadcn/ui & powered 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
Top Product
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

@ivasilov ⚡️⚡️⚡️

Terry Sutton
Top Product
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

@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

@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

@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

@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
Top Product
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

@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

@jordienric ⚡️⚡️⚡️

Jonny Summers-Muir

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

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

@careldewaal Maybe try it ? :D

Jonny Summers-Muir

@egor_romanov you're sick !

Saxon Fletcher
Top Product
Maker

🔥

Jonny Summers-Muir

@saxonfletcher fire indeed

Jose Eduardo Saura

Crazy work, crazy shippers. I have a lot to learn from you guys T-T


Thanks for the amazing work.

Wen Bo Xie

This looks incredibly useful and it'll make it easy to build on the weekends. There's an Antler Copenhagen hackathon coming up and I'm excited to share this with all the hackathon participants so they can get Supabase Auth, Storage, and Realtime features out in seconds and ship fast and win!

Jonny Summers-Muir

@wenbo Supabase, Hacking, and smørrebrød

Wen Bo Xie

@jon_summers_muir that's hygge for me right there

Inian Parameshwaran

Going to make prototyping so much easier!

Denzel Downs

This UI kit is a game-changer for React devs! Love how it bundles Supabase integrations (auth + storage) with sleek components. How does it handle custom theming – can we easily match our brand colors while keeping all the pre-built functionality?

Kay Kwak
Launching soon!

Incredible work team!

Krishna Krishna

Our go to DB now offers UI library :)

Gianmaria Caltagirone

This is a huge win for the Supabase ecosystem! Having a native UI library that aligns perfectly with Supabase’s design system and components is going to save so much time for devs. Love the focus on accessibility and clean documentation too. 👏

Cam Walker

Great work! Straight to the top with this one.

Kamil Ogórek

"So Fresh, So Clean." — André 3000

Joey Zhu

This is a huge win for the Supabase community and a breakthrough for developers building with modern React stacks! 🚀 Can’t wait to see how this improves workflows and takes the developer experience to the next level. Great job! 👏