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.

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

Name	Type	Required	Default	Description
onClose	() => void	Yes	-	Called when the BottomSheet is dismissed
open	boolean	Yes	-	Whether the BottomSheet is open or not

BottomSheet.Panel

Name	Type	Required	Default	Description
className	string	No	-	Tailwind classes for customization
onClose	() => void	No	-	Called when the BottomSheet is dismissed

BottomSheet.Draghandle

Name	Type	Required	Default	Description
className	string	No	-	Tailwind classes for customization

BottomSheet.Title

Name	Type	Required	Default	Description
className	string	No	-	Tailwind classes for customization

BottomSheet.Backdrop

Name	Type	Required	Default	Description
className	string	No	-	Tailwind classes for customization