personsg / ui

Supabase UI Library

Supabase UI

Supabase UI is a React UI library.

🚧
Supabase UI is still a work-in-progress until a major release is published.

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

• Button
• Typography
• Icon

Data Input

• Input
• InputNumber
• Select
• Checkbox (and Checkbox Groups)
• Radio (and Radio Groups)
• Toggle (work in progress)
• Upload (work in progress)
• Slider
• Date picker
• Time picker
• Form

Layout

• Layout
• Grid (Flex)
• Divider
• Space (Flex)

Display

• Card
• Avatar
• Alert
• Badge
• Menu
• Tooltips
• Tables
• Code block

Navigation

• Tabs
• Breadcrumb
• Dropdown
• Menu
• Page Header
• Sidebar
• Flyout menu
• Steps

Overlay

• Modal
• Drawer / SidePanel
• Toast messages / Notifaction
• Progress
• Feeds / Timeline

Utility

• Loading
• Transition (work in progress)

Misc

• Storybook docs
• Themeing (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

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.

Run storybook locally

Supabase UI uses storybook to develop and organise components. They can be viewed locally in the Storybook docs explorer

make sure you are in the supabase-ui folder

cd supabase-ui

run storybook

npm run storybook

(you may need to run npm install first)

Storybook runs by default on http://localhost:6006/

Local Development

If you want to test Supabase UI components locally, in context in another project locally, then you will need to npm link the supabase-ui project locally.

Follow these instructions here -> NPM Linking and Unlinking instructions

Common issues

A common issue found with local testing is multiple versions of react running.

You may need to npm-link the react node module in the target app you want to locally test the library in. Then use that version of react inside the library, and then npm-link the library so the target app can use the library with just the 1 version of react.

Step by step:

• run npm link in /your-app/node_modules/react. This should make the React's global link.

• run npm link react in /supabase/ui. This should make the library use the application’s React copy.

• run npm link @supabase/ui in /your-app