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.
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
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! 👏
I craft high-converting email copy that engages your audience, builds trust, and drives sales. With a deep understanding of psychology and storytelling, I turn words into revenue—so you get more leads, more sales, and more growth I’d love to share a quick 5-minute breakdown of how we can improve your open rates.Linkedin
Congratulations on your collection of customizable UI components! It sounds like a fantastic toolkit for developers. How do you handle documentation and support to ensure users can easily implement and customize these components in their projects?
Congrats on launching Supabase UI Library! Pre-built components for Supabase integration sound like a huge time-saver. How customizable are these components—can developers easily tweak styles and functionality to match their design system?
Congratulations on your collection of customizable UI components! It sounds like a fantastic resource for developers. How do you ensure that these components remain up-to-date with the latest design trends and technologies while being easy to integrate into various frameworks?
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. 👏
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?
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!
Crazy work, crazy shippers. I have a lot to learn from you guys T-T
Thanks for the amazing work.
This looks like an awesome win for the Supabase community and anyone building with modern React stacks. I'm just curios, how you’re planning to handle versioning and updates as shadcn/ui evolves so rapidly?
Nice! Can I one shot Supabase auth with this UI with the mcp or cursor rules?
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!
Great work @ivasilov!! The concept of being able to insert working code into your favorite framework with 1 command is mindblowing.
