Isaiah-Hamilton / ui

Supabase UI Library

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Supabase UI

Supabase UI is a React UI library.

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

ezoic increase your site revenue


Supabase UI Library

License:MIT License


Language:TypeScript 79.6%Language:CSS 11.4%Language:JavaScript 9.0%