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