Dropdowm

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).

Loading

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.

Loading

Do not close

You can use Dropdown.Misc to add an item that isn't part of a menu.

Loading

Radio

Using a Radio selection of options

Loading

Checkbox

Using a Checkbox option

Loading

API Reference

PropertyType
childrenReact.ReactNode
classNamestring
disabledboolean
onVisibleChangeany
overlayReact.ReactNode
overlayClassNamestring
overlayStyleCSSProperties
placementTBC
styleCSSProperties
transitionAnimationTailwindClasses
visibleboolean

Coming soon