Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/supabase/ui
Supabase UI Library
https://github.com/supabase/ui
Last synced: about 2 months ago
JSON representation
Supabase UI Library
- Host: GitHub
- URL: https://github.com/supabase/ui
- Owner: supabase
- License: mit
- Created: 2020-12-11T10:41:08.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-03-27T07:55:28.000Z (6 months ago)
- Last Synced: 2024-04-13T21:54:17.372Z (5 months ago)
- Language: TypeScript
- Homepage: ui-storybook-pre-release.vercel.app
- Size: 12.9 MB
- Stars: 1,506
- Watchers: 26
- Forks: 144
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - ui
- awesome-fe-resources - supabase-ui
- jimsghstars - supabase/ui - Supabase UI Library (TypeScript)
README
# 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](https://github.com/supabase/supabase).
The auth component has been moved to it's own repo and package.
[github.com/supabase-community/auth-ui](https://github.com/supabase-community/auth-ui).
You can also read the [docs for auth ui here](https://supabase.com/docs/guides/auth/auth-helpers/auth-ui).
---
~~### ⚠️ Development is currently being worked on in [alpha](https://github.com/supabase/ui/tree/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](https://github.com/supabase-community/supabase-auth-helpers).~~
---
🚧 Supabase UI is still a work-in-progress until a major release is published.
[](https://www.producthunt.com/posts/supabase-ui)
[View docs](https://ui.supabase.com)
---
## Install Supabase UI
```cli
npm install @supabase/ui
```
## Using Supabase UI
Example of importing a component
```js
import { Button } from '@supabase/ui'
//...
return I am a Supabase UI button
```
It is probably advisable to use [Normalize](https://github.com/sindresorhus/modern-normalize) with Supabase UI for the timebeing.
## Using Icons
We use [Feather icon library](https://feathericons.com/) in Supabase UI
You can use any Icon from the library as a component by prepending `Icon` to any Icon name, like, ``
```js
import { IconMail } from '@supabase/ui'
//...
return
```
## 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`
```cli
npm install @supabase/supabase-js
```
You can then easily import `Auth` from the ui library and pass the `createClient` to the `Auth` component.
```js
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 (
<>
Signed in: {user.email}
props.supabaseClient.auth.signOut()}>
Sign out
>
);
return props.children;
};
export default function Home() {
return (
);
};
```
## Roadmap
Some of these are a work in progress - we invite anyone to submit a [feature request](https://github.com/supabase/ui/issues/new?labels=enhancement&template=2.Feature_request.md) 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](https://github.com/supabase/supabase/discussions/category_choices)