Subscribe
Sign in
Supabase UI — React component library for enterprise dashboards
Supabase UI is a collection of UI components built in React and TailwindCSS that is used by Supabase to build our internal applications
71
Replies
Best
@antwilson It's possibly we may have given away a future feature here..
@antwilson @edgarascom 😆 haha no - however you can deploy a nextjs x supabase subscription app in 1 minute
@antwilson @jon_summers_muir yeah I know, but that’s a Stripe client ;) I was thinking Supabase is planning to provide a customizable subscription manager ;)
@antwilson @edgarascom Stripe already does such a stellar job at it with their hosted Checkout pages 😳🔥
Hello Product Hunt! 👋🏽 ,
Supabase is an open source Firebase alternative. We launched our beta on Product Hunt 4 months ago and today we are launching our internal design system, Supabase UI.
We've worked hard compiling components into a library to use across different applications for Supabase and we've open sourced it - building it in public!
As our team grew we found it increasingly difficult to work on multiple front end projects with multiple developers - and it resulted in duplicated components with varying visual implementations. This library is our solution to keep our brand and visual aesthetic consistent across the Supabase ecosystem while also having a front end library that can be at the heart of our future features (hush hush).
We're also just concentrating on the tricky bits of UI, interactive elements such as dropdowns, modals and popovers. We have purposely avoided developing any components to handle layout and grids, opting to use TailwindCSS directly in the app.
This library is still in pre release but here's a breakdown of what to expect in the coming weeks/months:
⚡️ Integrated into Supabase
Built in Authentication form and React hook to speed up development in your application. We are working towards other integrations as well which we will use internally at Supabase.
📋 Forms
Forms are difficult to work with, even in React. We are working on a Form component that can handle rule declaration and validation.
💪 Accessibility
It is usually an afterthought, and it results in solutions such as "accessiBe" to update the client at runtime to satisfy accessibility requirements - we don't like that - so we'll make a conscious effort to apply and improve aria / accessibility / keyboard control into the UI library as we develop it.
🎨 Theming
What if your brand isn't "Supabase green" - we will use css variables (also known as custom properties) for controlling the theme variables. You can also use the same css properties inside your Tailwind config so everything is in sync.
Looking forward to your feedback and questions!
Cheers,
The Supabase Team
@jon_summers_muir did you consider contributing to headless UI[0] instead?
0 - https://headlessui.dev/
@mike_seekwell we did - we were not sure how to contribute at the time (they'd just started headless when we took a look if I remember right) and thought best to wait and see how it develops for a few months. We never intended to make a UI library at the time though, we just sort of ended up with one as we refactored our dashboard app.
It might make sense to actually use something like HeadlessUI (or RadixUI), and base our library off their components - and we can also help contribute to those projects 😃
Thanks @mufuyil — we're really trying to ship as fast as possible across the whole of Supabase.
@mufuyil definitely - looks like the community has even started building a Svelte version already
https://supabase-ui-svelte.verce...
@jon_summers_muir has done an amazing job putting this together - makes it suuuuper easy to hack on prototypes without worrying I'll be up til 3am nudging pixels in css
@benoit_chambon Thanks so much. We love it too 😍 Thanks for checking us out
@benoit_chambon koinju.io looks useful, bookmarking this :D
Congrats on the launch! @jon_summers_muir
And kudos for using WAI ARIA!
If you could add color schemes in the custom theming, that would be nice!
Also can you publish a benchmark in terms of size and loading time for your UI, so developers would be able to assess effectiveness of your UI.
Great job, just starred on GitHub!
@eugenehp I'll make sure we get custom theming out soon - we're just wondering how best to deal with css as the current setup doesn't work well on SSR apps.
> can you publish a benchmark in terms of size and loading time for your UI
Great idea! We could publish this - you can see a vague breakdown on
Bundlephobia (Search for `@supabase/ui@0.23.1`).
It already looks bloated though because we have bundled the Icons into the same package, which probably isn't a good idea - it skews the perception of how large the library is. I'm keen actually to have a separate package for Icons, and we could even try to add a few different open source collections so there's some choice :-)
Usually these libraries get *huge* as soon as things like date pickers get added, as they have quite large dependencies like moment.js - we'll try to avoid that pitfall.
@supabase @0 @jon_summers_muir Interesting. I think fontawesome and bootstrap also did a breakdown for assets dependencies at some point. Could be worth taking a look into their architectural decisions.
Amazing, amazing. Everything looks great. Plus the integration with Storybook is so good 😍
I have been a fan since Supabase was in Alpha. I love what it brings. And guess what, we are launching on the same day. https://www.producthunt.com/post...
So I am supporting both. ❤️
That's amazing - good luck with the launch @thisissubhendu 🚀
@afiq_ramli We'll release the Form component real soon 😳 I haven't got around to finishing it yet.
@bcye Exactly! We think it could help anyone get set up really fast, even if they don't use the library in the long term.
Thank Jonny! We’d love to get you the current beta version of Meta. Let me know if you’re interested!
Always impressed by the quality of your products, congratulation!
Supabase is a true inspiration in terms of Developer Experience 😉
@nazim_m thanks so much. we have a lot of work ahead of us 🛠😅
I am in the process of moving 4 products to Supabase, really loving it so far! Great work, this is a product that is really needed out there. I can't wait to see where it goes from here.
@tylerlastovich We really love working on Supabase - I came from my own startup using Firebase so it's so refreshing to work on a product that solves even my own problem 😀
If you have any trouble migrating to Supabase, just ping us on support@supabase.io and one of us will be happy to help.
Supabase