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
