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.
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
About Supabase UI Library on Product Hunt
“Drop-in components based on shadcn/ui & powered by Supabase”
Supabase UI Library launched on Product Hunt on April 2nd, 2025 and earned 693 upvotes and 54 comments, placing #4 on the daily leaderboard. 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.
On the analytics side, Supabase UI Library competes within Open Source, Developer Tools, GitHub and Design templates — topics that collectively have 622.3k followers on Product Hunt. The dashboard above tracks how Supabase UI Library performed against the three products that launched closest to it on the same day.
Who hunted Supabase UI Library?
Supabase UI Library was hunted by Ivan Vasilov. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
Reviews
Supabase UI Library has received 732 reviews on Product Hunt with an average rating of 5.00/5. Read all reviews on Product Hunt.
For a complete overview of Supabase UI Library including community comment highlights and product details, visit the product overview.
Ivan Vasilov