@supabase/ui

0.36.5 • Public • Published

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(
  "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

  • [x] Button
  • [x] Typography
  • [x] Icon
  • [x] Image (work in progress)

Data Input

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

Layout

  • [ ] Layout
  • [ ] Grid (Flex)
  • [x] Divider
  • [x] Space (Flex)

Display

  • [x] Card
  • [ ] Avatar
  • [x] Accordion
  • [x] Alert
  • [x] Badge
  • [x] Menu
  • [ ] Tooltips
  • [ ] Tables
  • [ ] Code block

Navigation

  • [x] Tabs
  • [ ] Breadcrumb
  • [x] Dropdown
  • [x] Menu
  • [ ] Page Header
  • [ ] Sidebar
  • [ ] Flyout menu
  • [ ] Steps

Overlay

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

Utility

  • [x] Loading
  • [x] Transition (work in progress)

Misc

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

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

Feel free to submit a question or idea here

Readme

Keywords

none

Package Sidebar

Install

npm i @supabase/ui

Weekly Downloads

1,535

Version

0.36.5

License

none

Unpacked Size

3.16 MB

Total Files

3457

Last publish

Collaborators

  • lakshan-supabase
  • etienne_supa
  • ziinc_supabase
  • kamilogorek
  • stdim
  • gregnr
  • soedirgo
  • inian
  • kiwicopple
  • ange1ico
  • awalias
  • phamhieu1998