Ember UI

Ember UI is a React UI library..

View Supabase Root Docs .

Install Ember UI

npm install @ember-social/ui

Using Ember UI

Example of importing a component

import { Button } from '@ember-social/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 Ember UI

You can use any Icon from the library as a component by prepending Icon to any Icon name, like, <IconMail>

import { IconMail } from '@ember-social/ui'

//...

return <IconMail size="small" />

Scope

Some of these are a work in progress - to be developed by @supabase/ui.

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