Jhq NPM | npm.io

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