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 github.com/supabase/supabase.

The auth component has been moved to it's own repo and package. github.com/supabase-community/auth-ui. 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.

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.

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(
  "https://xyzcompany.supabase.co",
  "public-anon-key"
);

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

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

Roadmap

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.

General

• 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

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

Display

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

Navigation

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

Overlay

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

Utility

• Loading
• Transition (work in progress)

Misc

• 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