Dropdown
Installing
Install the component
npm install @supabase/ui
Getting started
Import the component
import { Dropdown } from '@supabase/ui'
Basic
Use the children of Dropdown for the trigger element that will open the dropdown. Use overlay to insert any react node to show in the dropdown.
Dropdown.Item is used inside the overlay to define clickable options. By clicking on them, they automatically close the Dropdown.
You may also want to use the Typography component in Dropdown.Item to keep text consistent, and add support for dark/light mode variations.
Dropdown.Item also has an icon prop in which you can pass any Icon (Docs coming soon).
Placement
Choose where the dropdown appears with side and align.
The dropdown will automatically reposition its self if it collides with the edge of the viewable area.
Do not close
You can use Dropdown.Misc to add an item that isn't part of a menu.
Radio
Using a Radio selection of options
LoadingCheckbox
Using a Checkbox option
LoadingAPI Reference
Dropdown
| Property | Type |
|---|---|
| children | React.ReactNode |
| className | string |
| disabled | boolean |
| onVisibleChange | any |
| overlay | React.ReactNode |
| overlayClassName | string |
| overlayStyle | CSSProperties |
| placement | TBC |
| style | CSSProperties |
| transition | AnimationTailwindClasses |
| visible | boolean |
Dropdown.Item
Coming soon