BottomSheet

In progress

The bottom sheet component is a modified dialog that slides from the bottom of the screen, common pattern in mobile apps.

Bottom sheets can contain any anything so let your imagination fly.

Based on Headless UI.

BottomSheet

Default

Large with all optional extras

Custom height

BottomSheet

NameTypeRequiredDefaultDescription
hasShadowbooleanNo-Whether the BottomSheet has a shadow or not.
onClose() => voidYes-Called when the BottomSheet is dismissed.
openbooleanYes-Whether the BottomSheet is open or not.
sizestringNosmThe size of the BottomSheet, sm, md, lg or custom pixel/percentage/rem value.

BottomSheet.Draghandle

NameTypeRequiredDefaultDescription
childrenReactNodeNo-Optional title as a child to render text next to the drag handle.

BottomSheet.Title

NameTypeRequiredDefaultDescription
classNamestringNo-Tailwind classes for customization of BottomSheet Title.

BottomSheet.Panel

NameTypeRequiredDefaultDescription
classNamestringNo-Tailwind classes for customization of BottomSheet Panel.
hasShadowbooleanNo-Whether the BottomSheet has a shadow or not.
onClose() => voidNo-Called when the BottomSheet is dismissed.

BottomSheet.Backdrop

NameTypeRequiredDefaultDescription
classNamestringNo-Tailwind classes for customization of BottomSheet Backdrop.