@ember-social/ui v1.0.0

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

• 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