BottomSheet

In progress
ARIA
RTL

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

Anatomy

<BottomSheet>
  <BottomSheet.Panel>
    <BottomSheet.Draghandle>
      <BottomSheet.Title>...</BottomSheet.Title>
    </BottomSheet.Draghandle>
    ...
  </BottomSheet.Panel>
  <BottomSheet.Backdrop />
</BottomSheet>

Default

Different sizes

With Draghandle

With Title

Customization

BottomSheet

NameTypeRequiredDefaultDescription
onClose() => voidYes-Called when the BottomSheet is dismissed
openbooleanYes-Whether the BottomSheet is open or not

BottomSheet.Panel

NameTypeRequiredDefaultDescription
classNamestringNo-Tailwind classes for customization
onClose() => voidNo-Called when the BottomSheet is dismissed

BottomSheet.Draghandle

NameTypeRequiredDefaultDescription
classNamestringNo-Tailwind classes for customization

BottomSheet.Title

NameTypeRequiredDefaultDescription
classNamestringNo-Tailwind classes for customization

BottomSheet.Backdrop

NameTypeRequiredDefaultDescription
classNamestringNo-Tailwind classes for customization