Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time

Supabase UI

Supabase UI is a React UI library.

Supabase UI is being deprecated.

We are moving the components to the main mono repo at

The auth component has been moved to it's own repo and package. You can also read the docs for auth ui here.

### ⚠️ Development is currently being worked on in alpha branch

Supabase UI will be using tailwind css classes and dropping support for CSS modules is in the alpha branch. This UI library will exclusively need to be used with tailwind.

The Auth component will be moved over to @supabase/auth-helpers.

🚧 Supabase UI is still a work-in-progress until a major release is published.

Product hunt

View docs

Install Supabase UI

npm install @supabase/ui

Using Supabase UI

Example of importing a component

import { Button } from '@supabase/ui'


return <Button>I am a Supabase UI button</Button>

It is probably advisable to use Normalize with Supabase UI for the timebeing.

Using Icons

We use Feather icon library in Supabase UI

You can use any Icon from the library as a component by prepending Icon to any Icon name, like, <IconMail>

import { IconMail } from '@supabase/ui'


return <IconMail size="small" />

Using Supabase UI Auth

You can use our Auth widget straight out the box with Supabase auth including social logins.

Screenshot 2021-02-05 at 19 25 01

The Auth component also includes a context component which detects whether a user is logged in or not.

Make sure to also install @supabase/supabase-js

npm install @supabase/supabase-js

You can then easily import Auth from the ui library and pass the createClient to the Auth component.

import { Auth, Typography, Button } from "@supabase/ui";
import { createClient } from "@supabase/supabase-js";

const { Text } = Typography

// Create a single supabase client for interacting with your database
const supabase = createClient(

const Container = (props) => {
  const { user } = Auth.useUser();
  if (user)
    return (
        <Text>Signed in: {}</Text>
        <Button block onClick={() => props.supabaseClient.auth.signOut()}>
          Sign out
  return props.children;

export default function Home() {
  return (
    <Auth.UserContextProvider supabaseClient={supabase}>
      <Container supabaseClient={supabase}>
        <Auth providers={['facebook', 'github']} supabaseClient={supabase}/>


Some of these are a work in progress - we invite anyone to submit a feature request if there is something you would like to see.


  • Button
  • Typography
  • Icon
  • Image (work in progress)

Data Input

  • Input
  • InputNumber
  • Select (custom select wip)
  • Checkbox
  • Radio
  • Toggle
  • Upload
  • Slider
  • Date picker
  • Time picker
  • Form


  • Layout
  • Grid (Flex)
  • Divider
  • Space (Flex)


  • Card
  • Avatar
  • Accordion
  • Alert
  • Badge
  • Menu
  • Tooltips
  • Tables
  • Code block


  • Tabs
  • Breadcrumb
  • Dropdown
  • Menu
  • Page Header
  • Sidebar
  • Flyout menu
  • Steps


  • Modal
  • Context Menu
  • Drawer / SidePanel
  • Toast messages / Notification
  • Progress
  • Feeds / Timeline


  • Loading
  • Transition (work in progress)


  • Storybook docs
  • Theming (in progress)
  • Supabase Auth Elements
  • Documentation website

We would be keen to hear any feedback on this project.

Feel free to submit a question or idea here