Supabase UI

Supabase UI is a high-level UI component library with a focus on creating beautiful apps quickly and efficiently. Supabase UI is designed to be used with Tailwind CSS utility classes.

Vision

We have compiled repetitive UI patterns into components that we use across the Supabase suite of apps and examples. This library gives us a consistent brand, and accelerates our development/prototyping.

We know there is already a large supply of UI libraries available online. This library is primarily to serve Supabase, but we hope that it can also be beneficial for apps that are built with Supabase.

For example, we provide full components (like Auth widgets), which you can simply drop into your website.

Over time, this library will expand to include a broader range of components and customization. By that stage we hope it will be beneficial even to developers outside of the Supabase ecosystem.

Key Features

Tailwind friendly

We have compiled a group of aesthetically pleasing components with design inspiration from existing UI libraries and Tailwind UI examples.

We try to allow Tailwind CSS classes be used for animations and we strongly encourage you to use a Tailwind config with Supabase UI.

Open source

Supabase UI is open source, and MIT licensed (fully permissive).

Supabase UI uses libraries which are also permissively licensed, if they are lightweight, modular, and active. This is better for the ecosystem, rather than doing everything ourselves. These libraries include:

• Tailwind CSS
• Feather Icons
• Libraries which handle design patterns like context menus, toast messages and interactive tables.

Uncontrolled

All components are designed to be used controlled and uncontrolled. We go to great lengths to ensure you don't need local states unnecessarily. Instead, we provide callbacks for useful interactions or state changes.

Developer experience

Supabase UI is fully typed wherever possible (it is an ongoing effort).

Part of the focus has also been on making sure components can be controlled and uncontrolled. We are going to some effort in making sure that you don't need to keep local states for unnecessary things but rather provide callbacks for useful interactions or state changes. This is also an ongoing effort as some components are half implemented or perhaps not tested yet.

WAI ARIA

We are trying to make our components adhere to the WAI-ARIA design patterns. We would like to see Supabase UI handle aria and role attributes, focus management and also keyboard navigation.

GitHub

To file issues, request features, and contribute, check out our GitHub.