Supabase UI is a React UI library.
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.
###
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.
npm install @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.
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" />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>
);
};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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent